3일차 회고
ㅁ 주요 내용
- CSS 기초
- 박스모델
- CSS Selecor
1. CSS 기초
- CSS의 문법 구성
- CSS 속성 종류
font-size: 수치; 폰트사이즈
text-align: 위치; 텍스트 정렬
margin : 수치; 바깥쪽 여백
padding: 수치; 안쪽 여백
background: 색상; 배경이미지, repeat,position값까지 정의 가능 gradient 속성도 줄 수 잇음
background-color: 색상; 오직 색만 지정할수 있음. gradient 속성도 줄 수 없음
color: 색상;
font-size: 수치;- 절대단위와 상대단위
- 절대단위: px, pt 등
- 상대단위: 픽셀을 기준으로 상대적 크기를 지정. em, rem, vwm vh 등
- em: 부모 요소 값 기준 < > rem: 최상위 요소값 기준
// em rem 예시 //
<!DOCTYPE html>
~
<style>
html {
font-size: 10px;
}
div {
font-size: 15px;
}
span {
font-size: 2rm;
font-size: 2rem;
}
</style>
~
// 2em일 경우 15*2=30px 2rem일 경우 10*2=20px //
- CSS파일과 HTML 파일 연결 방법
- rel 속성과 href속성을 이용하여 연결(외부스타일 시트)
- 인라인스타일
//외부스타일시트 예시
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />//인라인 스타일 예시
<nav style="background: #eee; color: blue">...</nav>
2. 박스모델
- 박스모델이란?
- HTML 요소는 하나의 박스형태로 구성되어 있으며,
- 블록요소, 인라인요소, 인라인-블럭 요소로 나뉨
- 블록요소에는 <h1>, <div>, <p> 등이 있으며, 인라인 요소에는 <span>, <img>, <stong>등이 있음
- 박스를 구성하는 요소
- Margin: 바깥 여백
- Border: 테두리
- Padding: 안쪽 여백(content와 border 사이의 간격)
- Content: 내용
- content- box Vs border-box
3. CSS Selector
- 자식 셀렉터
//CSS 코드
header > div { }<header>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
</div>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
</div>
</header>
- 후손 셀렉터
//CSS 코드
header div {}<header>
<div><!-- 선택 -->
<p>
<div><!-- !!선택!! -->
</div>
</p>
</div>
<div><!-- 선택 -->
<p>
<div><!-- !!선택!! -->
</div>
</p>
</div>
</header>
- 형제 셀렉터
//CSS 코드
section ~ p { }<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
</header>
- 인접 형제 셀렉터
//CSS 코드
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 { }
'코딩 > 코드스테이츠 45기(FE)' 카테고리의 다른 글
| 블로깅 챌린지 6일차 - 자바스크립트 기초 (0) | 2023.04.18 |
|---|---|
| 블로깅 챌린지 5일차 - 페어프로그래밍 (계속) (0) | 2023.04.17 |
| 블로깅 챌린지 4일차 - Flexbox (0) | 2023.04.14 |
| 블로깅 챌린지 2일차 - HTML 기초 및 심화 (0) | 2023.04.12 |
| 코드스테이츠 45기 사전학습 (0) | 2023.04.05 |
