2주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트3

CSS 테두리 선과 색상 표현

border: 선-두께(width) 선-종류(style) 선-색상(color)

요소의 테두리 선을 지정하는 단축 속성. 요소의 크기가 커짐

• ★기본값: medium none(선의 종류가 없어서 출력되지 않음) black

border-width

요소 테두리 선의 두께(상하좌우, 상하 좌우, 상 좌우 하, 상 우 하 좌)

두께는 상대적이기 때문에 정확한 수치를 통해서 특정한 단위로 명시하는 것을 권장

• medium: 중간 두께(★기본값)
• thin: 얇은 두께
• thick: 두꺼운 두께
• 단위: px, em, % 등 단위로 지정

border-style

요소 테두리 선의 종류(상하좌우, 상하 좌우, 상 좌우 하, 상 우 하 좌)

• none: 선 없음(★기본값)
• solid: 실선 (일반 선)
• dotted: 점선
• dashed: 파선(절취선)
• double: 두줄 선
• groove: 홈이 파여있는 모양
• ridge: 솟은 모양(groove의 반대)
• inset: 요소 전체가 들어간 모양
• outset: 요소 전체가 나온 모양

border-color

요소 테두리 선의 색상을 지정하는 단축 속성

• black: 검정색(★기본값)
• 색상: 선의 색상
• transparent: 투명

border-방향, border-방향-속성

요송의 테두리 선을 지정하는 기타 속성들

• border-top: 두께 종류 색상;
• border-top-width: 두께;
• border-top-style: 종류;
• border-top-color: 색상;

---

색상 표현

색을 사용하는 모든 속성에 적용 가능한 색상 표현

색상이름	브라우저에서 제공하는는 색상 이름 (명확하고 정확하지 않을 수 있음)	red, royalblue, palegreen
Hex 색상코드(많이 사용)	16진수 색상(Hexadecimal Colors)	#000, #FFFFFF
RGB	빛의 삼원색	rgb(225, 225, 255)
RGBA	빛의 삼원색 + 투명도	rgba(0, 0, 0, 0.5(0~1, 반투명))
HSL	색상, 채도, 명도	hsl(120, 100%, 50%)
HSLA	색상, 채도, 명도 + 투명도	hsla(120, 100%, 50%, 0.3)

---

CSS 모서리 둥글게

Border-radius

요소의 모서리를 둥글게 깎음(왼쪽위 오른쪽위 오른쪽아래 왼쪽아래)

• 0: 둥글게 없음(★기본값)
• 단위: px, em, vw 등 단위로 지정

---

CSS 크기 계산

box-sizing

요소의 크기 계산 기준을 지정

• content-box: 요소의 내용(content)으로 크기 계산(★기본값)
• border-box:  요소의 내용 + padding + border로 크기 계산

---

CSS 넘침 제어

overflow

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

• visible: 넘친 내용을 그대로 보여줌(★기본값)
• hidden: 넘친 내용을 잘라냄
• scroll: 넘친 내용을 잘라냄. 스크롤바 생성
• auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

overflow-x, overflow-y

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 개별 속성들

---

CSS 출력 특성

display

요소의 화면 출력(보여짐) 특성

각 요소에 이미 지정되어 있는 값(-), 따로 지정해서 사용하는 값(+)

• block: 상자(레이아웃) 요소(-)
• inline: 글자 요소(-)
• inline-block: 글자 + 상자 요소(-)
• flex: 플렉스 박스(1차원 레이아웃, 하나의 축만을 가지고서 레이아웃을 잡는 개념)(+)
• grid: 그리드(2차원 레이아웃, 행과 열에 2가지 차원을 이용)(+)
• none: 보여짐 특성 없음, 화면에서 사라짐(+)
• 기타: table, table-row, table-cell 등...

---

CSS 투명도

opacity

요소 투명도

• 1: 불투명(★기본값)
• 0~1: 0부터 1사이의 소수점 숫자(0.x에서 0은 생략 가능)

---

CSS 글꼴

font-style

글자의 기울기

• normal: 기울기 없음(★기본값)
• italic: 이텔릭체
• oblique: 기울어진 글자

font-weight

글자의 두께(가중치)

• normal,400: 기본 두께(★기본값)
• bold, 700: 두껍게
• bolder: 상위(부모) 요소보다 더 두껍게
• lighter: 상위(부모) 요소보다 더 얇게
• 100~900: 100단위의 숫자 9개, normal과 bold 이외의 두께

font-size

글자의 크기

• 16px: 기본크기(★기본값)
• 단위: px, em, rem 등 단위로 지정
• %: 부모 요소의 폰트 크기에 대한 비율
• smaller: 상위(부모) 요소보다 작은 크기
• larger: 상위(부모) 요소보다 큰 크기
• xx-small~xx-large: 가장 작은 크기~가장큰 크기까지, 7단계 크기를 지정

line-height

한 줄의 높이, 행간과 유사

• normal: 브라우저의 기본 정의를 사용(★기본값)
• 숫자: 요소의 글꼴 크기의 배수로 지정
• 단위: px, em, rem 등의 단위로 지정
• %: 요소의 글꼴 크기의 비율로 지정

line-family: 글꼴1, "글꼴2", ... 글꼴계열(필수작성);

글꼴 서체 지정. 후보를 여러개 해놓고 적용하지 못하는 글꼴일 경우 다음 글꼴을 사용.띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따음표로 묶어야 함(Ex. "글꼴2")

• serif: 바탕체 계열
• sans-serif: 고딕체 계열 - 거의 대부분의 폰트
• monospace: 고정너비(가로폭이 동등) 글꼴 계열 - 코드 에디터
• cursive: 필기체 계열
• fantasy: 장식 글꼴 계열