section1/unit5/CSS 기초(8/25)

블로깅 주제

• CSS

---

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

• 오늘은 드디어 금요일이다! 주말엔 푹 쉬고 싶다 :) 다사다난한 일주일이였던 것 같다! 대학교 시절보다 열심히 공부하는 것 같아 몸은 힘들지만 마음은 뿌듯하다.

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

• CSS, 속성, 글자, 절대단위, 상대단위, 박스모델, 박스 모델 사이즈, margin, border, padding, css selector

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

- <nav>

 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냄(메뉴, 목차, 색인 등)

- css 문법

셀렉터 : 요소 이름이나 id, 또는 클래스를 선택

- background 속성 vs background-color 속성

• background-color : 단순히 색깔 옵션만 부여해서 사용
• background: 다른 color / image / repeat / attachment / position과 background 옵션을 추가적으로 부여하여 사용 가능

(background 안에 backgroud-color가 포함되어 있다고 이해하면 됨)

- css의 단위

글꼴 사이즈를 정할 때 , rem을 추천

-> root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있음 (접근성에 유리)

•  절대단위 : in, cm, mm, pt, pc, px
• 상대단위 : %, em, rem, ch, vw, vh

• em : font_size, 해당폰트의 대문자 M의 너비를 기준
• ex : x-height, 해당폰트의 소문자 x의 높이를 기준
• px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐
• %  : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐
• pt  : point, 일반 문서(워드 등)에서 많이 사용

- id vs class

                            id                                                            class

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

- 색상

.red {
  color: #ff0000;
}

- 글자, 배경, 테두리

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

- 글꼴

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

글꼴 크기

.title {
  font-size: 24px;
}

굵기: font-weight

font-weight: normal;
font-weight: bold;

/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

밑줄, 가로줄: text-decoration

text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

자간: letter-spacing

letter-spacing: normal;
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

행간: line-height

line-height: normal;
line-height: 3.5;
line-height: 3em;
line-height: 34%;

- 정렬

text-align : left, right, center, justify

- 화면 사이즈를 정할 때

1. 반응형 웹 -> 디바이스 크기를 나누는 기준을 보통 px로 정함

2. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 -> vw, vh를 사용(viewport width, viewport height)

---

- 박스모델

박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가짐

- 줄 바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block) 

• 줄 바꿈이 되는 요소: <h1>, <p>
• 줄 바꿈이 되지 않는 요소: <span>

- 박스를 구성하는 요소

1. Border(테두리)

p {
  border: 1px solid red;
}

2. Margin(바깥 여백)

• 각각의 값은 top, right, bottom, left로 시계방향
• 값을 두 개만 넣으면 top과 bottom이 10px, left 및 right가 20px

p {
  margin: 10px 20px;
  margin: 10px 20px 30px;// 상 좌우 하
  margin: 10px 20px 30px 40px;
}

• 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어듦(padding에도 동일하게 적용됨)
• 극단적으로 적용하면, 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있음

p {
  margin-top: -2rem;
}

3. Padding(안쪽 여백)

• padding은 border를 기준으로 박스 내부의 여백을 지정
• 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left로 시계방향

- 박스를 벗어나는 콘텐츠 처리

• overflow 속성의 auto 값:  콘텐츠가 넘치는 경우 스크롤을 생성
• overflow 속성에 hidden 값: 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 때
• overflow-x 속성과 overflow-y : 스크롤할 두 방향을 모두 지정할 수 있음

p {
  height: 40px;
  overflow: auto;
}

- 박스 크기 측정 기준

• box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산

* {
  box-sizing: border-box;
}

• content-box는 박스의 크기를 측정하는 기본값
• 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장

---

- 기본 selector

1. 전체 셀렉터

* { }

2. 태그 셀렉터

• 같은 태그명을 가진 모든 요소를 선택
• 복수 선택 가능

h1 { }
div { }

section, h1 { }

3. id 셀렉터

#only { }

4. class 셀렉터

.widget { }
.center { }

5. attribute 셀렉터

• 같은 속성을 가진 요소를 선택

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

- 자식/후손/형제 셀렉터

1. 자식 셀렉터 ( > )

• 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택

예시)

<header> 요소 바로 아래에 있는 두 개의 <p> 요소는 선택되지만, <span> 요소의 자식인 <p> 요소는 선택되지 않음

header > p { }

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

2. 후손 셀렉터 ( )

• 첫 번째로 입력한 요소의 후손을 선택

예시)

<header> 요소의 자식인 <p> 요소를 뿐 아니라, <header> 요소의 자식의 자식인 있는 <p> 요소까지 모두 선택

header p {}

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

3. 형제 셀렉터 ( ~ )

• 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택

예시)

<section> 요소 뒤에 있는 세 개의 <p> 요소를 모두 선택

section ~ p { }

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

4. 인접 형제 셀렉터 ( + )

같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택

예시)

<section> 요소 뒤에 있는 세 개의 <p> 요소 중 첫 번째 <p> 요소를 선택

section + p { }

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

-기타 셀렉터

1. 가상클래스 셀렉터

• 요소의 상태 정보에 기반해 요소를 선택

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

2.UI 요소 상태 셀렉터

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

3. 구조 가상 셀렉터

• :first-child 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택
• :last-child 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택
• :nth-child(n) 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택
• :nth-last-child(n) 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택
• :nth-child(odd) 셀렉터에 해당하는 모든 요소 중 홀수번째 자식인 요소 선택
• :nth-child(even) 셀렉터에 해당하는 모든 요소 중 짝수번째 자식인 요소 선택
• ::first-letter 콘텐츠의 첫글자를 선택
• ::first-line 콘텐츠의 첫줄을 선택. 블록 요소에만 적용 가능
• ::after 콘텐츠의 뒤에 위치하는 공간을 선택. 일반적으로 content 어트리뷰트와 함께 사용
• ::before 콘텐츠의 앞에 위치하는 공간을 선택. 일반적으로 content 어트리뷰트와 함께 사용
• ::selection 드래그한 콘텐츠를 선택. iOS Safari 등 일부 브라우저에서 동작하지 않음
• :first-of-type 대상 요소 형제중 대상 요소가 첫번째로 확인되는 요소 선택
• :nth-last-of-type 아래서부터(뒤에서부터) 찾음(nth-of-type과 시작점이 반대)

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) { }

4. 부정 셀렉터

• :not(셀렉터) 셀렉터에 해당하지 않는 모든 요소를 선택

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

5. 적합성 확인 셀렉터

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