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

CSS 문자

color

글자의 색상

• rgb(0,0,0): 검정색(★기본값)
• 색상: 기타 지정 가능한 색상

text-align

문자의 정렬방식

• left: 왼쪽 정렬(★기본값)
• right: 오른쪽 정렬
• center: 가운데 정렬
• justify: 양쪽 정렬

text-decoration

문자의 장식(선)

none: 장식 없음(★기본값) 

unterline: 밑줄 - a태그는 기본적으로 밑줄이 들어감

overline: 윗줄

line-through: 중앙 선

 

text-indent

문자 첫 줄의 들여쓰기(양수 사용)&내어쓰기(음수 사용)

• 0: 들여쓰기 없음(★기본값)
• 단위: px, em, rem 등 단위로 지정
• %: 요소의 가로 너비에 대한 비율

---

CSS 배경

background-color

요소의 배경 색상

• transparent: 투명함(★기본값)
• 색상: 지정 가능한 색상

background-image

요소의 배경 이미지 삽입

• none: 이미지 없음(★기본값)
• url("경로"): 이미지 경로

background-repeat

요소의 배경 이미지 반복

• repeat: 이미지 수직, 수평 반복(★기본값)
• repeat-x: 이미지를 수평 반복
• rpepeat-y: 이미지를 수직 반복
• no-repeat: 반복없음

background-position

요소의 배경 이미지 위치

• 0% 0%: 0% ~ 100% 사이 값(★기본값) - 왼쪽에서 오른쪽으로, 위에서 아래로
• 방향: top, bottom, left, right, center 방향 - ex) top right;
• 단위: px, em, rem 등 단위로 지정

background-size

요소의 배경 이미지 크기

• 이미지의 실제 크기(★기본값)
• 단위: px, em, rem 등 단위로 지정
• over: 비율을 유지, 요소의 더 넓은 너비에 맞춤
• contain: 비율을 요지, 더 짧은 너비에 맞춤

background-attachment

요소의 배경 이미지 스크롤 특성

• scroll: 이미지가 요소를 따라서 같이 스크롤(★기본값)
• fixed: 이미지가 뷰포트에 고정, 스크롤X
• local: 요소 내 스크롤 시 이미지가 같이 스크롤

background-attachment

요소의 배경 이미지 스크롤 특성

• scroll: 이미지가 요소를 따라서 같이 스크롤(★기본값)
• fixed: 이미지가 뷰포트에 고정, 스크롤X

---

CSS 배치

position

요소의 위치 지정 기준

기준을 잡고 위치값을 선정

position과 같이 사용하는 CSS속성. 모두 음수를 사용할 수 있음(top, bottom, left, right, z-index)

• static: 기준 없음(★기본값)
• relative: 요소 자신을 기준
• absolute: 위치 상 부모 요소를 기준(위치 상 부모 요소를 꼭 확인해야 함)
• fixed: 뷰포트(브라우저)를 기준
• sticky: 스크롤 영역 기준

top, bottom, left, right

요소의 각 방향별 거리 지정

• auto: 브라우저가 계산(★기본값)
• 단위: px, em, rem 등 단위로 지정

position

요소의 위치 지정 기준

기준을 잡고 위치값을 선정

position과 같이 사용하는 CSS속성. 모두 음수를 사용할 수 있음(top, bottom, left, right, z-index)

• static: 기준 없음(★기본값)
• relative: 요소 자신을 기준
• absolute: 위치 상 부모 요소를 기준(위치 상 부모 요소를 꼭 확인해야 함)
• fixed: 뷰포트(브라우저)를 기준

z-index

요소의 쌓임 정도를 지정

• auto: 부모 요소와 동일한 쌓임 정도(★기본값)
• 숫자: 숫자가 높을 수록 위에 쌓임

요소의 display가 변경됨

position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경됨

---

요소 쌓임 순서(Stack order)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임