[카카오테크캠퍼스 4주차] CSS 속성

⏳ 2023. 5. 1. - 2023. 5. 7.

 

글꼴과 문자

line-height

한 줄의 높이. 행간과 유사하다.

• line-height: normal; -> 브라우저의 기본값 사용
  • 1.4 : 글꼴 크기의 1.4배

text-indent

문자 첫 줄의 들여쓰기. 음수를 사용한다면 내어쓰기가 된다.

---

배경

background-image

div {
  width: 300px;
  height: 300px;
  background-color: orange;
  background-image: url("https://heropy.blog/css/images/logo.png");
}

 

background-size

div {
  width: 300px;
  height: 300px;
  background-color: orange;
  background-image: url("https://heropy.blog/css/images/logo.png");
  background-size: 100px;
}

• background-size: auto; -> 이미지의 실제 크기
  • cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤
  • contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤

 

background-repeat

div {
  width: 300px;
  height: 300px;
  background-color: orange;
  background-image: url("https://heropy.blog/css/images/logo.png");
  background-size: 100px;
  background-repeat: no-repeat;
}

• background-repeat: repeat; -> 이미지를 수직, 수평 반복
  • repeat-x : 수평 반복
  • repeat-y : 수직 반복
  • no-repeat : 반복 없음

 

background-position

div {
  width: 300px;
  height: 300px;
  background-color: orange;
  background-image: url("https://heropy.blog/css/images/logo.png");
  background-size: 100px;
  background-repeat: no-repeat;
  background-position: center;
}

• background-position: 0-100%(x축) 0-100%(y축)
  • 방향 : top/bottom/left/right/center

 

background-attachment

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

• background-attachment: scroll; -> 이미지가 요소를 따라서 같이 스크롤
  • fixed : 이미지가 뷰포트에 고정되어 스크롤되지 않음

Parallax Scrolling

내가 좋아하는 느낌의 웹페이지(애플 같은)는 parallax라는 개념을 사용한 것이었다.
그동안 효과의 이름은 모르고 있었는데, 이제는 검색할 때 더 편할 듯!

---

배치

position

position의 값으로 absolute나 fixed로 지정되었다면, 자동으로 블록 요소로 바뀐다.

• position: static; -> 기준 없음 
  • relative : 요소 자신이 기준
  • absolute : 위치 상 부모 요소가 기준
  • fixed : 뷰포트가 기준

좌 : relative 우 : absolute

---

요소 쌓임 순서(Stack Order)

어떤 요소가 사용자와 가까운지(위에 쌓이는지) 결정하는 순서

1️⃣ : 요소의 position 값이 있는 경우

2️⃣ : 1️⃣의 조건이 같으면, z-index 값이 큰 경우

3️⃣ : 1️⃣과 2️⃣의 조건이 같으면, html에서 나중에 작성된 경우