TIL - CSS 단위, Selector, box, 레이아웃 reset

CSS Units 단위

MDN, W3S

절대단위

• px pixels
  인쇄와 같이 화면의 사이즈가 정해진 경우에만 유리.
  값이 고정된 절대단위여서 사용자 접근성 한계가 있다.
• pt points 등

상대단위

• em, ex, rem, vw, vh, % 등
• rem은 root 글자 크기에 따라 변경된다
  1rem = 기본글자크기 / 2rem = 기본글자크기의 2배
• 100vw, 100vh
  화면을 가득 채우며 스크롤 할때 사용

박스

1. block

화면 전체를 사용. 한줄에 한개 들어감 ex) h1

2. inline

화면을 일부만 사용 ex) a

• width, height 값 무시

// block <=> inline 서로 바꾸는 방법
h1 {display: inline;} 
a {display: block;}

3. inline-block

한줄에 여러개가 들어감

💗box sizing

• padding, border 모두 포함한 크기를 박스크기로 지정하는 것
• width값에는 border가 포함되어 있지않고 element크기만 포함되어있다. 그래서
  여백, 테두리를 포함해야 원하는 레이아웃 크기를 맞출 수 있기 때문에 border-box를 사용한다

* {
	box-sizing : border-box;
}

	block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	가능	가능	불가능

기본 셀렉터

* { }

• 모든 요소를 선택하는 전체 셀렉터

태그명 { }

• 같은 태그명을 가진 모든 요소를 선택. 복수 선택 가능
  h1 { }
div { }
section, h1 { }

#id명 { }

• #id로 입력
  #only { }

.class명 { }

• .class로 입력 / 같은 class명의 모든 요소를 선택
  .widget { }
.center { }

태그명[attribute명] { }

• 같은 속성의 요소를 선택
  a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }
  
  
  
  

자식 / 후손 / 형제 셀렉터

1. 자식 셀렉터

• 부모요소 > 바로 아래 자식요소를 선택 (자식의 자식은 선택안함)
  header > p { }

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>

2. 후손 셀렉터

• 부모요소의 (자식의 자식)후손까지 선택 (자식의 자식도 선택한다)
  header p {}

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>

3. 형제 셀렉터

• 같은 부모 요소를 공유하면서
• 1번째요소 ~뒤에 2번째요소 모두 선택
  section ~ p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>

4. 인접 형제 셀렉터

• 같은 부모 요소를 공유하면서
• 1번째요소 +뒤에 2번째요소 하나만 선택
  section + p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>

기타 셀렉터

가상 클래스 셀렉터

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */

UI 요소 상태 셀렉터

input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */

구조 가상 클래스 셀렉터

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { } //짝수
section > p:nth-child(2n+1) { } //홀수
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { } 
div:nth-last-child(2) { } //짝수
section > p:nth-last-child(2n + 1) { } //홀수
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 셀렉터

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 셀렉터

input[type="text"]:valid { }
input[type="text"]:invalid { }

reset CSS

width, height는 여백을 포함하지 않아서 크기를 계산할때 오차가 생긴다.
그리고 body에도 여백이 있으므로 0,0에서 시작하는 것이 아니라 내가 계산한 범위를 벗어나게 된다. 이를 방지하기 위해서 레이아웃을 리셋하고 시작하는 것이 중요하다

CSS Tools: Reset CSS

위에 사이트에서 레이아웃 리셋을 복붙해도 된다.

아니면 밑처럼 설정해줘도 리셋된다.

* {
  box-sizing: border-box;
  /* 박스크키에 여백도 포함한다 */
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  /* 여백을 다 없앤다 */
}