Event Bubbling (이벤트 버블링) 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는 것 (부모 요소들의 핸들러가 호출됨) FORM DIV P 에 할당된 핸들러 --> 에 할당된 핸들러 --> 에 할당된 핸들러 p 태그 클릭 : alert('p'), alert('div'), alert('form') 실행 div 태그 클릭 : alert('div'), alert('form') 실행 form 태그 클릭 : alert('form') 실행 FORM DIV P 부모 요소 핸들러에서는 어디에서 이벤트가 발생했는지 알 수 있음 p 태그 클릭 : target=p, this=form div 태그 클릭 : target=div, this=form form 태그 클릭 : target=form, t..

Sass CSS 전처리 도구 기존의 CSS 문법과 호환되지 않는 문제가 있음 SCSS CSS 전처리 도구 SASS 를 기존의 CSS 문법과 호환되도록 만든 것 변수 $color: orange; .container { background-color: $color; } $ 기호를 이용해 변수 선언 가능 css 속성 안에 변수 작성 가능 중첩 .container { font-size: 40px; .item { // .container .item color: orange; &:hover { // .item:hover color: yellow; } } } 중첩해서 하위 요소 작성 가능 &: 부모 선택자 참조 중첩된 속성 .container { font : { weight: bold; // font-weight s..

animation animation: 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지]; 요소에 애니메이션을 설정하고 제어하는 단축 속성이다. @keyprames 2개 이상의 애니메이션 중간 상태(프레임)을 지정한다. @ (at-sign) 기호로 시작하는 것을 CSS rules 라고 한다. animation-name @keyframes 규칙의 이름을 지정한다. - none : 애니메이션을 지정하지 않는다. (기본값) - @keyframes 이름 : 이름이 일치하는 @keyframes 규칙의 애니메이션을 적용한다. animation-duration 애니메이션의 지속 시간을 설정한다. - 시간 : 지속 시간을 설정한다. (기본값 : 0s) animation-timing-fu..

CSS grid display grid : Block 특성을 가진 그리드 컨테이너를 정의한다. inline-grid : Inline 특성을 가진 그리드 컨테이너를 정의한다. grid-template-rows .container { display: grid; grid-template-rows: 1행크기 2행크기 ...; } 명시적으로 행의 크기를 정의한다. fr(fraction, 공간 비율) 단위와 repeat() 함수를 사용할 수 있다. grid-template-columns .container { display: grid; grid-template-columns: 1열크기 2열크기 ...; } 명시적으로 열의 크기를 정의한다. fr(fraction, 공간 비율) 단위와 repeat() 함수를 사용할 수..

flex 부모 요소에 display: flex; 속성을 적용하면 부모 요소는 flex-container 가 되고 자식 요소는 자동으로 flex-item 이 된다. flex-direction 속성의 기본 값은 row 이므로, 부모 요소에 flex-direction 속성을 별도로 지정하지 않으면 flex-item 들이 수평으로 배치된다. flex-container 는 블럭 요소처럼 위에서부터 아래로 수직으로 쌓인다. flex-container 에서 사용하는 속성 - flex-direction : 아이템의 주 축 설정 - flex-wrap : 아이템의 줄바꿈 설정 - justify-content : 주 축의 정렬방법 설정 - align-content : 교차 축의 정렬방법 설정 (2줄 이상) - align-i..

emmet 한국어 설정하기 vscode 에서 html 파일에 ! 를 작성하면 html 기본 구조를 자동으로 완성해준다. 이 때, lang="en" 으로 작성되어져 있는 경우, 해당 html 을 읽을 때 한국어로 번역할 것인지 묻는 창이 계속 뜰 수 있기 때문에 lang="ko" 로 자동완성 되도록 settings.json 에서 아래의 코드를 추가해 주는 것이 좋다. "emmet.variables": { "lang": "ko" }, CSS 선택자는 오른쪽부터 읽기 아래 코드에서 li:nth-child(4) 를 찾아보면 list 중에서 네번째 요소인 item4 일 것 같지만, 사실 li:nth-child(4) 선택자인 요소는 없다. 해당 선택자를 오른쪽에서부터 읽어보면 네번째에 있는 요소 중에서 li 태그인..