CSS (Cascading Style Sheet)
: 상속되는 스타일 문서
Case Style
Naming Convention
ex) My React Lecture
- camel case: myReactLecture
- kebab case: my-react-lecture
- snake case: my_react_lecture (다른 언어 변수, table의 column명) / MY_REACT_LECTURE (상수)
- pascal case: MyReactLecture (클래스)
CSS 적용 방법
- Inline Style Sheet
→ 일일이 적용하는데 한계가 있음, 유지보수 어려움
<p style=”color: red”>Inline Style Sheet</p>
- Internal Style Sheet
→ 웹 문서 로딩 시간이 증가함
<style> p{ color: red; } </style>
- Linking Style Sheet
<link rel=”stylesheet” href=”style.css” />
- 기본 구성
- Box Model 개념
id
: 우선순위 3, style에서 . 사용
class
: 우선순위 4, style에서 # 사용
properties
- Box Model properties
- background: attachment, clip, color, image, origin, position, repeat, size
- margin, padding: value, border, border-radius
- text: color, font-size, font-weight(두께)
margin, padding의 value 규칙
- 1개: URDL;
- 2개: UD LR;
- 3개: U LR D;
- 4개: U R D L;
- property value
- 크기의 단위
→ %: 부모 기준
→ vw, vh: 뷰포트(화면에서 보이는 웹사이트)의 너비 높이
→ em(부모 기준), rem(최상단 기준): 반응형
px, %, vw, vh, em, rem
- 색상의 단위
→ Hex Color Code(16진수): 빛의 개념, 합칠수록 white에 가까워짐
→ opacity(0 ~ 1): 투명도, 수가 0에 가까울수록 투명도가 올라감
#000000(ff), rgba(0, 0, 0, 1)
선택자
- class 선택자
class="button active"
→ .button.active{ ... }
- 전체 선택자
→ *{ ... }
- 요소 선택자
tag 이름 자체를 사용
→ strong{ ... }
- 자손 선택자
부모 밑의 자손 선택시 공백 사용
→ .hi .hello{ ... } // hi class 부모 밑 hello class 자손 선택
display
- none: 화면에 보이지 않음
| display: none; | visibility: hidden; | opacity: 0; | |
| 공간 차지 | X | O | O |
| 이벤트 적용 | X | X | X |
| 탭 눌렀을 때 focus | X | X | O |
- block: 새로운 줄에서 시작, 그 한줄을 모두 차지해 줄바꿈 일어남
→ width/height 지정 가능 - inline: 줄바꿈 일어나지 않음, 글자나 문장에서 특정 단어만 효과
→ width/height 지정 불가능 - inline-block : 줄바꿈이 일어나지 않음
→ width/height 지정 가능
layout
- sementic element
| header | 머릿말 |
| nav | 네비게이션 링크 집합 |
| main | 문서의 주요한 내용 |
| article | 독립된 내용임을 알려줌 |
| section | 비슷한 내용을 묶음 |
| aside | 페이지의 다른 콘텐츠들과 연관성을 가지며 분리시킬 수 있는 콘텐츠 |
| footer | 꼬릿말 |
flex
: flex container를 만들어줌, 우측에 content 둘 수 있음
- flex-direction: container 안 item 배치
row, row-reverse, column, column-reverse
- flex-wrap: container 밖으로 item 튀어나오는 것을 방지
wrap, wrap-reverse
- justify-content: main 수평 축 기반으로 item 좌우 정렬
flex-start, flex-end, center
space-between, space-around, space-evenly
- align-items: 수직 축 기반으로 item 상하 정렬
stretch, flex-start, flex-end, center
position
/* content를 가운데로 */
display: flex;
align-items: center;
justify-content: center;| static | 기본값, left/top/right/bottom으로 위치 지정 가능 |
| relative | 원래 있던 위치 기준 좌표 지정, 본인의 좌표 기준으로 좌표 변경 가능 |
| absolute | 본인과 제일 가깝고 position: static이 아닌 애를 기준으로 좌표 변경 가능 (부모 중 static이 아닌 경우가 없다면, 뷰포트 기준) |
| fixed | 뷰포트 기준 좌표 고정 (scroll 해도 좌표 고정) |
| sticky | scroll 이전에는 본인의 위치에 딸려가다가, scroll 이후 fixed처럼 동작 (본인의 범위에서 벗어나면 다시 본인의 위치에 딸려감) |
normalize.css, rest.css
- 크로스 브라우징: 웹 사이트를 접속했을 때, 어느 한쪽(브라우저)에만 최적화됨을 막기 위해 공통 요소를 사용하고 제작함
- normalize: 사용하기 좋은 값들을 유지시키며 초기화
- reset: 모든 값을 초기화
- box-sizing
- border-box: 테두리 영역 기준
- content-box: 콘텐츠 영역 기준