WIKI

SEOUL‍
wiki:language:css
추적:

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판		이전 판
wiki:language:css [2023/11/10 17:41] – 만듦 clockoonwiki:language:css [2025/01/16 12:20] (현재) – clockoon
줄 1: 줄 1:
-# CSS+CSS 
 +==== 
 + 
 +## selectors 
 +### first-child / first-of-type 
 +CSS를 사용할 때 많이 혼동하지만, `first-child`는 element의 절대적인 위치를 나타낸다. 즉, 자식 element 중 '해당하는' 요소의 첫 번째가 아니라, '모든' 요소의 첫 번째를 가리킨다. 전자를 지정하기 위해서는 `first-of-type`을 사용해야 한다. 예를 들어, 
 + 
 +```css 
 +<div class="parent"> 
 +  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type --> 
 +  <div>Child</div> <!-- div:nth-child(2), div:first-of-type --> 
 +  <div>Child</div> 
 +  <div>Child</div> 
 +</div> 
 +``` 
 + 
 +즉 `div:first-child`는 아무런 div도 가리키지 않는다[^1].
  
 ## !important ## !important
줄 6: 줄 22:
 > Anything else is probably misuse, and a sign you may not understand the cascade properly. > Anything else is probably misuse, and a sign you may not understand the cascade properly.
 -- [Steven Pemberton](https://twitter.com/stevenpemberton/status/1505839184287870981?s=20&t=_eW9HipzNTzEnBeo_r5giA) -- [Steven Pemberton](https://twitter.com/stevenpemberton/status/1505839184287870981?s=20&t=_eW9HipzNTzEnBeo_r5giA)
 +
 +## Tips
 +내용이 많아지면 [[:language:css:tips]]로 옮겨서 작성.
 +
 +### td를 수직으로 배열하기
 +- https://stackoverflow.com/questions/33569998/how-do-i-force-td-within-a-table-row-below-another-td
 +
 +### 모든 하위 엘리먼트에 스타일 적용하기
 +- https://stackoverflow.com/questions/26349987/how-do-i-apply-a-style-to-all-children-of-an-element
 +
 +[^1]: 출처: https://stackoverflow.com/questions/24657555/what-is-the-difference-between-first-child-and-first-of-type/24657721#24657721
 +
 +### Selector ID
 +HTML spec에서는 ID에 온점을 허용한다. 즉, `<div class=“aaa.bbb”></div>`는 유효하다. 그러나 CSS에서 클래스를 온점으로 구분하기 때문에 이를 통상적인 방식으로 호출하는 것은 불가능하다. 요컨대 이런 코드는 성립하지 않는다.
 +
 +
 +```css
 +.aaa.bbb {
 +    color: #000;
 +}
 +```
 +
 +대신, 백슬래시로 이스케이프하거나 attribute selector를 활용해야 한다.
 +
 +```css
 +.aaa\.bbb {
 +    color: #000;
 +}
 +
 +[class=‘aaa.bbb’] {
 +    display:none;
 +}
 +```
  
 ## 유용한 글들 ## 유용한 글들
-- [[번역) 레이아웃 알고리즘 이해하기](https://junghan92.medium.com/번역-레이아웃-알고리즘-이해하기-baed8b1eca5f|(번역) 레이아웃 알고리즘 이해하기]]+- [번역) 레이아웃 알고리즘 이해하기](https://junghan92.medium.com/번역-레이아웃-알고리즘-이해하기-baed8b1eca5f) 
 +- [이번에야말로 CSS Flex를 익혀보자](https://studiomeal.com/archives/197) 
 +- [CSS order 쓰는 법](https://velog.io/@yena1025/CSS-order-%EC%93%B0%EB%8A%94-%EB%B2%95) 
 +- [MDN: order](https://developer.mozilla.org/ko/docs/Web/CSS/order)
 ---- struct data ---- ---- struct data ----
 pageinfo.status      : Draft pageinfo.status      : Draft
 ---- ----
  
wiki/language/css.1699638119.txt.gz · 마지막으로 수정됨: 2023/11/10 17:41 저자 clockoon