🧐 CSS (Cascading style sheets)
프론트 엔드 개발자에게 필요한 역량 :
1) 컴포넌트 기능별로 묶어서 제작
2) 화면의 구성이나 배치 (레이아웃 디자인)
3) 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
🧐 CSS 기본문법
- link 요소는 HTML 파일과 다른 파일을 연결하는 목적으로 사용
- rel은 연결하고자 하는 파일의 역할이나 특징을 나타낸다.
🧐 CSS 스타일을 적용하는 3가지 방법
1) 인라인 스타일
2) 별도의 파일로 구분하지 않고 style 요소 내에 작성하는 내부 스타일 시트
3) 외부 스타일 시트
❗ 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장x
🧐 기본적인 선택자 (Selector)
1) id - 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 한다.
2) class - 여러 요소에 같은 스타일링을 적용하기 위해서는 class 사용
🧐 id 와 클래스의 차이점
1) id는 #으로 선택, class는 .으로 선택
2) id는 한 문서에 단 하나의 요소에만 적용, class는 동일한 값을 갖는 요소 많음
3) id는 특정 요소에 이름을 붙이는 데 사용, class는 스타일의 분류에 사용
🧐 색상
글자의 색상 - color
테두리 색상 - border-color
배경 색상 - background-color
- 글꼴 - font-family
fallback - 글꼴이 없거나 사용불가 할때 순차적으로 나오게 하는 방법, 쉼표로 구분하여 입력
입력된 순서대로 fallback 이 적용
- Gooble Fonts 서비스 - HTML의 link 태그를 사용하여 간단하게 embed 할 수 있다.
🧐 글자
글자의 크기 - font-size
글자의 굵기 - font-weight
밑줄, 가로줄 - text-decoration
자간 - lettet-spacing
행간 - line-height
- 정렬
1) 글자를 가로로 정렬할 경우 - text-align
2) 글자를 세로로 정렬할 경우 - vertical-align
❗ 그러나 부모 요소의 display 속성이 반드시 table-cell 이어야 한다.
❗ center와 font 를 사용하지 말아햐 하는 이유 : 관심사 분리 ( CSS가 스타일링 담당하도록 작성!)
🧐 크기의 단위
1) 절대 단위: px, pt
2) 상대 단위: %, em, rem, ch, vw, vh 등
- px 사용 경우: 기기나 브라우저 사이즈의 환경에 영향을 받지 않는 절대적인 사이즈 필요할 경우
❗ 부적합한 경우 : 모바일기기 처럼 작은 화면이면서, 고해상도인경우 (고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일 되기 때문에, 뚜렷하게 출력되지 않는 경우 발생)- 일반적인 경우: root 글자 크기에 따라서만 상대적으로 변하는 rem 사용이 좋다
(em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산 힘듬)- 반응형 웹의 기준점을 만들 때 : px
- 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 : vw, vh 사용
(화면을 가득 채우며 딱 떨어지는 사이트 -> 100vw, 100vh 사용 구현)- % -> HTML이 차지하는 모든 영역, 스크롤 했을 때 보이는 영역까지 포함했을 때의 비율!
% -> 부모의 넓이 기준으로 적용된다.- em -> 상위 요소 폰트의 몇배인지 정하는 단위
- 뷰포트 -> 검색창, 최소화, 끄기 등의 브라우저가 제공하는 기능을 제외하고 실제로 눈에 보이는 부분
- 참고 - https://designbase.co.kr/webcoding-15/
🧐 block과 inline, inline-block
- block - 줄바꿈이 됨, 기본적으로 갖는 너비 100%
- inline - 줄바꿈이 일어나지 않고 크기 지정 불가, 글자가 차지하는 만큼의 너비
- inline-block - 줄바꿈이 일어나지 않는 동시에 block 박스의 특징 가짐, 글자가 차지하는 만큼의 너비
- block 요소의 대표적인 예) div,p
- inline 요소의 대표적인 예) span
❗ inline 박스는 width, height 속성이 적용되지 않는다.
🧐 margin과 padding
- margin: content의 바깥방향 여백
- padding: content의 안쪽방향 여백
❗ margin에는 음수 값 지정 가능 -> 다른 엘리먼트와의 간격이 줄어든다. 화면에서 아예 사라지게 하거나 다른 엘리먼트와 겹치게 만들 수 도 있다.
🧐 overflow
overflow 속성: 콘텐츠가 넘치는 경우 사용
overflow: auto -> 스크롤 생성
overflow: hidden -> 넘치는 내용 숨김
overflow-x, overflow-y -> 스크롤 방향 지정
🧐 박스 크기 측정 기준 두가지
레이아웃 디자인을 조금 더 쉽게 하는 방법 -> 여백과 테두리 두께를 포함해서 박스 크리를 계산하게 만드는 것!
1) content-box -> 박스의 크기를 측정하는 기본값
2) border-box -> 권장됨!
❗ border나 padding을 추가할 시 그만큼 커지게 됨
🧐 CSS selector
1) 자식 선택자 : 바로 아래 자식인 요소 선택 ex) header > div
2) 후손 선택자 : 요소의 후손 선택 ex) header div
3) 형제 선택자 : 같은 부모 요소를 공유하면서 두번째 입력한 요소를 모두 선택
ex) section ~ p
4) 인접 형제 선택자 : 같은 부모 요소를 공유하면서 바로 뒤에 오는 두번째 입력한 요소 선택
ex) section + p
🧐 기타 선택자
1) 가상 클래스 선택자 ex) a: link
2) UI 요소 상태 선택자 ex) input: checked
3) 구조 가상 클래스 선택자
4) 부정 선택자 ex) input: not ([type="password"])
5) 정합성 확인 선택자 ex) input[type="text"]:valid
💡 목록 요소 자체를 가운데 정렬 하고 싶은 경우 margin 이용하고 width 주기
