position 말줄임 설정 반응형 border-radius

시맨틱 태그를 통한 마크업클래스명의 통일성 및 규칙스크린리더기가 원활히 읽을 수 있는 blind 처리 / IRIS유지보수의 용이성을 위해 img 태그와 backgound-img 구분하여 사용기존 네이버 페이지와 내가 작성한 코드의 차별점 div와 같은 의미 없는 디자인

메타언어로서, 추가 기능과 유용한 도구를 제공하기 위해 CSS의 구문을 개선하는 역할 @mixin / @include : 스타일 청크(묶음)를 쉽게 재사용할 수 있다.@extend : 여러 선택자가 스타일을 상속받도록 할 수 있다.@import / @use : 다른 스

display: grid;gtc→ grid-template-columns: 1fr 1fr 1fr; = repeat(3, 1fr);→ 가로로 1/3씩 먹었다는 뜻gtr→ grid-template-rows: 100px 100px = repeat(2, 100px)→ 세로로

Flex는 레이아웃 배치 전용 기능으로 고안레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 편리\*flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.\*flex-end: 요소들을 컨테이너의 오른쪽으

li {transition-duration: 3s} —> 3초 걸리게li {transition-delay: 3s} —> 동작 3초 후 작동li {transition-delay: 3s} —> 동작 3초 후 작동li {transition-delay: 3s} —> 동작 3초

background-attachement: fixed 하면 background img 가 fixed가 적용 되어서 scroll 하면 contents만 scroll 적용 background image는 fixed

동위선택자 / 앞에 선언한 애는 제외됨 /div + div: 바로 뒤 형제선택자만div ~ div: 뒤 모든 형제선택자속성선택자inputtype=textimgsrc상태선택자input:focus -클릭 했을 때 스타일값input:enabled -뭔가 입력 할 때 스타일값

table tage (table > tr > td) 콜행가 !! 로열세 !!

http://www.caniuse.com

한줄로 보여지게 말줄임 기법두줄 이상의 문장으로 보여지게 말줄임 기법

:nth-child(2) — 2번째 자식:nth-child(2n) — 2의 배수:nth-child(n+4) — 4이상:nth-child(-n+3) — 3이하 < 앞에 “-”가 붙으면 이하가 됨>

css reset 초기화 해줄때img는 inline-block 이라 기본값으로 밑에 살짝 여백이 생긴다 그래서 display:block 을 줘서 밑에 여백 없앤다. inline-block이 기본 속성인 태그들은 display:block을 줘서 여백을 없애거나 i

calc((100% - 마진 다 더한값)/덩어리 갯수)ex) width: calc((100% - 20px)/3)두개로 나눌때는width: calc(50% - 5px)

CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용position 속성을 별도로 지정해주지 않으면

float 띄운다는 뜻으로 웹페이지에서 float를 준 영역을 띄워서 left 혹은 right로 자리 잡게 한다. 띄운다는 것 자체가 영역을 인식하기 힘들기 때문에 따로 영역이나 크기를 선언 해주고, 플로트가 끝남을 알리는 것을 써서 다른 영역이 float가 적용 되지