패스트캠퍼스 챌린지 6일차

6일차

Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트

Ch 8. CSS 속성

 

---

 

Ch 8. CSS 속성

 

 

주제

 

• 글꼴, 문자
• 배경
• 배치

 

 

주요 내용

 

 🔗 글꼴, 문자 

font-weight: 400(regular), 700(bold) 가장 많이 사용

line-height: 2; // 글자 크기의 2배 => 이 방식(배수) 사용하는 것을 권장!

글자, 문자

 

 🔗 position  기준 -> 위치

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

 

 

새롭게 알게 된 내용

 

font-family: 글꼴1, "글꼴2", ..., 글꼴계열;

// 앞부터 순서대로 해당 폰트를 적용할 수 없으면, 뒤에꺼를 적용하는 방식으로 동작된다고 한다. 안 그래도 지금 하는 프로젝트에서 영어와 한글을 간편하게 서로 다른 폰트를 적용할 수 있는 방법이 없을까 고민하고 있었는데 이러한 점을 활용해서 하면 될려나?? 한 번 해봐야겠드

 

 🔗 postion 

배치의 기준이 바꼈기 때문에 주변 요소들와 상호작용하지 않는다. 주변 요소들에게는 이제 이웃이 아님(?)

 

 🔗 요소 쌓임 순서 (Stack order) 

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임. (기본값 static 제외) 이걸 최우선으로 따져야 됨 주의!
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임.
3. 1번과 2번 조건이 같은 경우, HTML의 다음 구조일 수록 위에 쌓임.

 

postion 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 자동 변경된다.

 

---

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스

#패캠챌린지

#직장인인강

#직장인자기계발

#패스트캠퍼스후기

#한_번에_끝내는_프론트엔드_개발_초격차_패키지_Online

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]