231018_CSS

선택자~우선순위 복습 필요

인라인은 입력하는 내용 만큼 크기를 차지하는 것...

인라인과 블록 구분하기

Boder

 

명칭(색상이름)	브라우저에서 제공하는 색상 이름	(예) red, tomato, royalbiue
hex 색상코드	16진수 색상	#000, #FFFFFF
RGB	빛의 삼원색
RGBA	빛의 삼원색 + 투명도
HSL	색상, 채도, 명도
HSLA	색상, 채도, 명도 + 투명도

---

border-reaius 모서리 둥글게 처리 

---

box-sixing 요소의 크기 계산 기준을 지정

> content-box: 요소의 내용으로 크기 계산

> border-box: 요소의 내용 + padding + border 로 크기 계산

 

box-sizing: border-box 는 padding:20 px 을 포함한다.

---

Overflow 넘침 제어 (178pg)

Visible: 넘친 내용을 그대로 보여줌

hidden: 넘친 내용을 잘라냄

scroll: 넘친 내용을 잘라내고 스크롤 생성, 넘치지 않았을 경우에도 스크롤바 생성

auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성, 넘치지 않았을 경우 스크롤바 생성X

---

display

각각의 요소가 디스플레이 속성을 고유한 기본값으로 가지고 있으나 이것을 변경할 수 있음

li 의 말머리 기호를 none으로 없앤 뒤 디스플레이 인라인 블록으로 가로 배열,

패딩값 20px 으로 Menu의 상하좌우 여백 부여.

Margin 상하 0px, 좌우 20px 으로 박스끼리 거리를 둠.

보더 1px, solid 실선, 검정색으로 박스가 표시되게 변경함. 

---

Opacity 투명도

---

글꼴

글꼴의 기울기

글꼴 두께

글꼴 크기

한 줄의 높이

글꼴 이름

font: 기울기 두께 크기 / 줄높이 글꼴;

글꼴을 반드시 지정

---

문자: 텍스트 제어와 관련된 개념

Color 색상

Text-align 정렬:  왼쪽, 오른쪽, 가운데, 양쪽 정렬 

text-decoration 문자 장식: none(장식 없음),밑줄, 윗줄, 중앙선

text-indent 문자의 첫 줄 들여쓰기: 일반 단위

letter-spacing 문자 사이 간격(자간): 일반 단위

word-spacing 단어 사이 간격(공백 문자 너비)

white-space 공백문자 처리 방법:

word-break 줄바꿈 규칙: 

 

배경

background-color : 요소의 배경 색상 지정

background-image : 배경 이미지 삽입, 이미지를 삽입할 땐 CSS의 url 함수를 사용. 

background-repeat: 배경이미지의 반복 처리,(repeat-x, repeat-y, no-repeat 등)

background-position: 요소 배경 이미지의 위치 지정

background-size: 요소 배경 이미지의 크기 지정 (auto, cover, contain 등)

background-attachment: 요소 배경 이미지의 스크롤 특성을 지정(scroll, fixed 등)

---

배치

Position: (static, relative, absolute, fixed, sticky)

static ( 기본값, 위치기준이 없음)

relative(요소 자신을 기준),

absolute(위치상 부모 요소를 기준),

fixed(뷰포트 기준), but fixed 와 부모가 없는 absolute, sticky 과 헷갈리지 말 것.

sticky(스크롤 영역 기준): 주로 배너 등에 사용