Learning Log 68

[javascript] keyup, keydown, keypress의 차이

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 1. keyup -키보드에서 손을 뗐을 때 실행 2. keydown -키보드를 눌렀을 때 실행되고 누르고 있을 때 1번만 실행됨 -어떤 키가 눌리더라도 반응 3. keypress -키보드를 눌렀을 때 실행되고 누르고 있을 때 계속 실행됨 -입력할 수 있는 키보드를 눌렀을 때만 반응(한글은 인식하지 않음) keydown > keypress > keyup 순으로 이벤트가 진행됨 Resources https://velog.io/@jjhstoday/project-Sleact-keydown-keypress-keyup-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94

[html/css] 목록을 만드는 dl, dt, dd tag

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 1. tag definition list의 약자로 사전처럼 용어를 설명하는 목록을 만듦 2. tag definition term의 약자로 정의되는 용어의 제목을 넣을 때 사용 3. tag definition description의 약자로 용어를 설명하는데 사용 4. 사용예시 -코드 작성 Firefox A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers. -실제 모습 Resources https://aboooks.tistory.com/211 https://developer.mozill..

[javascript] 데이터 타입(Data types)

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! javascript는 6가지의 데이터 타입을 가지며 배열을 제외한 나머지를 말함 배열은 객체(참조 타입)에 속하는 데이터 타입 중 하나! 1. Number -숫자를 의미 -산술 연산자를 사용하여 작성 2. String -문자열 데이터 타입은 " " 혹은 ' '로 감싼 모든 표현을 의미 -다양한 기능 .length : 문자열이 몇 글자로 되어 있는지 확인 .toUpperCase() : 문자열을 대문자로 출력 .indexOf(' ') : 특정 텍스트의 포함 유무 및 위치 확인 3. Boolean -조건문에서 자주 활용 4. Array -순서가 있는 데이터의 모음 -[]를 이용하여 작성 5. Object -key와 value의 조합으로 이루어진 데이터 ..

[javascript] 변수(variables)

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 1. 변수 이름 생성 시 주의사항 -한 파일에서 같은 변수 이름 중복 사용 불가 -첫 번째 문자는 반드시 글자, _, $ 중 하나로 시작 -예약어(function, const)는 변수로 사용할 수 없음 2. camelCase vs snake_case -camelCase 맨 첫 글자를 제외한 각 합성어의 첫 글자만 대문자로 표기 ex. myProfileImg, toDoListArray -snake_case 소문자를 사용하며 각 합성어를 '_'로 연결하는 방식으로 표기 ex. my_profile_img, to_do_list_array 3. 변수명을 지어주는 사이트 https://www.curioustore.com/#!/ Curioustore 변수명 짓..

[css] Layout - inline, inline-block, block이란

1. inline 주로 텍스트를 입력할 때 사용하는 형태로 content 만큼 영역만큼 차지합니다 width와 height 값을 설정할 수 없다 요소 : , , , , , , , , , , , ... 2. inline-block inline과 block의 특징을 모두 가진 요소이다 inline과 달리 element에 width와 height 값을 설정할 수 있고, 설정하지 않은 경우 content 만큼 영역을 차지합니다 3. block 한 영역을 차지하는 박스 형태이다 width, height, padding, margin 값을 설정할 수 있다 요소 : , , , , , , , , , , , , , ... Resources https://www.w3schools.com/css/css_inline-bloc..

[css] Layout - position 속성이란

0. static css position의 default 값은 static이다 static의 속성은 element를 위에서부터 아래로 배열시켜준다 아래의 속성들과 달리 top, bottom, right, left 속성의 값을 무시한다 1. relative top, bottom, right, left을 이용해 원래의 위치(static)에서 상대적인 position을 갖게 해준다 원래의 위치(static)에 빈 공간을 만들어 다른 content가 위치할 수 없게 한다 2. absolute 가장 가까운 조상 positioned를 기준으로 상대적인 위치를 설정하고, 가장 가까운 조상 positioned가 없다면 body를 기준으로 위치가 설정된다 3. fixed 화면에서 상대적 위치를 결정한다 스크롤에 관계없이..

[html/css] Semantic Web과 Semantic Tags의 차이

Semantic Web이란? -기계가 읽고 처리할 수 있는 형태로 제작된 웹이다. 웹에 존재하는 수많은 웹들에 메타데이터를 부여하여 잡다한 데이터 집합이 아닌 의미와 관련성을 가지는 거대한 데이터 베이스를 구축하고자하는 발상이다. Semantic Tag란? -활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 Tag로 효과적인 검색이 가능하게 한다. Tag만 보고도 무엇을 의미하는지 알아볼 수 있는 Tag이다. -Semantic Tag : , , , , , -Non-semantic Tag : ... "HTML img Tag"과 "CSS backgraound-image Property"의 차이는 무엇일까? 1. alt 속성 tag는 alt 속성에 문자열을 넣을 수 있어 검색엔진이 빠르게 인식할 수 있..