CSS 개념 정리

id와 class의 차이점

id	class
# 으로 선택	. 으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는데 사용	스타일의 분류에 사용

<!-- 잘못된 id 사용 예제 -->
<ul>
  <li id="menu-item">Home</li>
  <li id="menu-item">Mac</li>
  <li id="menu-item">iPhone</li>
  <li id="menu-item">iPad</li>
</ul>

<!-- 바른 예제 -->
<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

반응형 웹

• 디바이스 크기를 나누는 기준을 보통 px 로 정함

상대 단위 : %, em, rem, ch, vw, vh …

• vw: viewport width
  • 1vw = 보이는 영역 너비의 1/100
• vh: viewport height
  • 1vh = 보이는 영역 높이의 1/100

절대 단위: px, pt

	block	inline-block	inline
줄바꿈 여부	O	X	X
기본 너비	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	O	O	X

inline-block 박스는 inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가짐.

박스 구성 요소

margin을 음수로 적용하면 다른 엘리먼트와 겹치게 하는것 가능

콘텐츠의 크기가 박스의 크기를 초과할 경우, overflow: hidden; 을 사용하면 초과한 콘텐츠를 보이지 않게 할 수 있다

id와 class를 동시 선택하여 css 코드 작성시
--> #id.class {..} 로 표기한다
--> .class#id {..} 이것도 가능

<section>
	<h2>

section h2 {…}
이것은 section의 후손 엘리먼트 중 h2 엘리먼트 선택

<article>
	<li class=”item”>

article의 후손 중 class가 item 인 엘리먼트 선택 ⇒ article .item{…}

“+” 는 인접한 형제 엘리먼트 선택
section ~p {…} : “~” section과 인접한 형제 엘리먼트 p 모두 선택

#container > .mx-auto {}
→ id가 container인 엘리먼트의 자식 엘리먼트 중 class가 mx-auto인 엘리먼트 선택

a[href] {…}
→ a 엘리먼트 중에서, href 속성을 갖는 모든 엘리먼트 선택

p[id=’only’] {…}
→ p 엘리먼트 중에서, id가 only인 속성을 가진 모든 엘리먼트 선택

ul > li:last-child {…}
→ ul의 자식 엘리먼트 중에서, 마지막 자식 엘리먼트가 li인것을 선택

section > p:nth-child(2n+1) {…}
→ section의 자식 엘리먼트 중에서, 홀수번째 자식 엘리먼트가 p인 것을 선택