Last updated
Last updated
지정된 어트리뷰트를 갖는 모든 요소를 선택
li 바로 뒤 에있는 ul 를 선택
li 뒤 에있는 ul 를 모두 선택
:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을때
:active - 마우스를 클릭했을때
BFC는 context의 width값 만큼 페이지의 width를 다 차지하고 수직으로 쌓인다.(ex, display: block, flex)
IFC는 context의 width만큼 페이지의 width를 차지하고 수평으로 쌓인다.(ex, display: inline, inline-block, inline-flex)
E:nth-child(n)는 부모 엘리먼트의 모든 자식 엘리먼트중 n번째 엘리먼트가 E 엘리먼트인경우 스타일이 적용된다.
E:nth-of-type(n)는 부모 엘리먼트의 자식 엘리먼트중 n번째 E 엘리먼트에게 스타일이 적용된다.
float된 자식 엘리먼트가 부모 엘리먼트의 높이에 영향을 주지않아 레이아웃이 깨질수가있다.
그래서 float된 자식 엘리먼트의 높이를 부모 엘리먼트에 반영하도록 대응하는 방법을 clearfix라고 한다.
부모요소를 position: relative로 설정한다.
부모요소를 display: inline-block로 설정한다.
부모요소를 overflow: auto 또는 hidden으로 설정한다.
이미지 스프라이트는 여러개의 이미지를 합쳐서 하나의 이미지로 만들고 이를 잘라 사용하는 방식이다.
한 페이지에 5개의 이미지 리소스가 필요한 경우 5번의 http 요청이 필요하지만 이미지 스프라이트를 사용하게 되면 1번의 http 요청으로 이미지를 다 받아올 수 있다.
Image Replacement(IR)이란 웹 접근성을 준수하여 시각장애인에게(이미지를 볼 수 없는 상황) 대체 텍스트를 제공하는 방법이다.
text-indent를 사용하는 방법과 대체 텍스트요소의 width와 height를 0으로 설정하는 방법이 있다.
display:none;
visibility:hidden;
width: 0; height: 0;
text-indent: -9999;
position; absolute; left: -99999px;
인쇄하면에서 스타일을 지정하기 위해선 미디어쿼리의 print 속성을 사용하여 스타일을 지정할 수 있다.
pseudo-element Selector란 element의 특정 부분을 스타일하는데 사용한다.
기본값인 content-box의 경우는 element의 width나 height를 설정할 경우 해당 element의 content width/height 값을 설정하기때문에 element에 padding/border값이 설정되어있을 경우 원하는 width랑 다를 수 있다.
그렇기때문에 padding의 영향을 안받을려면 box-sizing: border-box;로 설정하여야 한다.
element의 크기(width, height)를 설정하면 컨텐츠의 표시영역을 입력한 크기값과 동일하게 보여준다.
그래서 padding 값이나 border 값이 늘어나면 element의 크기가 의도한것보다 커지는 문제가 발생할 수 있다.
box-sizing: border-box;로 설정하게 되면 padding 값이나 border 값이 늘어나도 element의 크기가 변하지 않으며 컨텐츠의 표시영역이 줄어들어 일관된 사이즈를 유지할 수 있습니다.
반응형 웹 디자인은 mediaquery를 사용해 화면 해상도를 감지한뒤 화면 크기에 맞게 디자인을 하는것이다.
적응형 웹 디자인은 서버또는 브라우저에서 기기나 해상도를 감지한뒤 화면 크기에 맞는 디자인이 적용된 페이지로 리다이렉션 시키는것이다.
translate를 사용해서 엘리먼트의 위치를 변경하면 composite만 일어나지만 left/right/top/bottom을 사용하여 위치를 변경하면 reflow(layout)가 일어난다.
reflow란 생성된 엘리먼트의 레이아웃(너비, 높이 등) 변경 시 영향받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업이다. reflow가 자주 발생하면 성능이 안좋아진다.
위치 이동을 구현한 애니메이션(넓이나 높이값 변경 등)은 reflow가 짧은 시간 내 반복적으로 일어나게 됩니다. 그래서 사용하지 않는 것이 가장 바람직하나 반드시 사용해야 한다면 애니메이션이 들어간 요소에 position: absolute 혹은 position: fixed 속성을 적용합니다. 다른 요소에는 영향을 끼치지 않으므로 페이지 전체가 아닌 해당 요소만 reflow가 발생합니다.
style 객체를 여러번 호출해 스타일 변화를 주지말고 CSS 정의된 class를 통해 한번에 변화를 적용해준다.
위의 내용과 중복되며, reflow 비용을 줄이는 것 이외에 코드 가독성도 높일 수 있다.
CSS 샐랙터는 오른쪽에서 왼쪽으로 이동하면서 읽기 때문에 불필요한 선택자를 사용하는 것은 성능을 저하시킬 수 있다.
will-change는 변화가 예상되는 요소를 브라우저에게 미리 알려줍니다. 브라우저는 실제 요소가 변화되기 전에 적절하게 최적화를 할 수 있습니다. 큰 비용이 드는 변화도 최적화로 인해 페이지의 반응성을 증가시킬 수 있습니다.
하지만 너무 많은 요소에 will-change요소를 사용하면 오히려 성능이 더 안좋아질 수 있다.
pseudo-element
Description
::first-letter
콘텐츠의 첫글자를 선택한다.
::first-line
콘텐츠의 첫줄을 선택한다. BFC에만 적용할 수 있다.
::after
콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 속성과 같이 사용된다.
::before
콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 속성과 같이 사용된다.
::selection
드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 안한다.