✅ CSS
1️⃣ css란 무엇인가?
캐스케이딩 스타일 시트(Cascading Style Sheets)라는 뜻을 가지고 있습니다.
마크업에 있어 스타일 언어로 레이아웃과 스타일을 정의할 때 자유도가 높습니다.
🚫 css는 마크업 언어가 아닙니다.
2️⃣ CSS 문법
3️⃣ BOX-model
| 속성 | 설명 |
|---|---|
| box-sizeing: boder-box | boder를 까지 박스 사이즈를 잡습니다. |
| (주로 이렇게 잡아서 사용함. 최종적으로 랜더링된 사이즈가 일치하기 위함) | |
| box-sizeing: content-box | (디폴트값)content만 박스 사이즈로 잡습니다. |
4️⃣ position
문서 상에 요소를 배치하는 방법을 지정하는 속성 입니다.
- static
- 속성을 별도로 지정해주지 않으면 기본값인 static이 적용
- 문서 상에서 원래 있어야하는 위치에 배치됨
- relative
- 원래 위치에서 벗어나게 배치할 수 있게 됨
- 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정
- absolute
- 요소를 일반적인 문서 흐름에서 제거한다.
- 가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.
- 조상 요소 위치를 기준으로 top, bottom, left, right에서 얼마만큼 떨어질 지 결정한다.
- 조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(
<body>요소)를 기준으로 삼는다. (static을 제외한 값)
문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다)
- sticky
- 스크롤 영역 기준으로 배치
- 기준점을 잡아야함
- fixed
- 뷰포트 기준으로 배치
5️⃣ display
요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정 -mdn
주로 사용되는 속성
- none : 보이지 않음
- block : 블록 박스
- inline : 인라인 박스
- inline-block : block과 inline의 중간 형태
flex : 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈
grid : CSS 그리드 레이아웃(Grid Layout)은 CSS에 2차원의 그리드 시스템 (따로 설명)
✅ Selector(선택자)
1️⃣ 기본 선택자
| 종류 | 형태 |
|---|---|
| 전체 | * |
| div | 요소 |
| , | 클래스 |
| # | 아이디 |
| [attr] | 특성 |
2️⃣ 그룹 선택자
| 종류 | 형태 |
|---|---|
| 그룹선택 | , |
3️⃣ 결합자
| 종류 | 형태 |
|---|---|
| 자손결합 | (스페이스) |
| 자식결합 | > |
| 일반형제결합 | ~ |
| 인접형제결합 | + |
4️⃣ 가상 클래스 선택자
| 종류 | 형태 |
|---|---|
| :hover | 마우스를 롤오버 했을 때 |
| :focus | 포커스 되었을 때 |
| :focus-visible | 키보드 탭 클릭할 때(접근성을 높임) |
| :active | 마우스를 클릭 했을 때 |
| :checked | input 버튼이나 체크박스를 눌렀을 때 |
| :disabled | 비활성화 상태일 때 |
| :not() | 지정된 css스타일에 특정 요소를 제외시킬 때 |
| :first-child | 부모 요소 안에 있는 첫번째 자식만 선택할 때 |
| :last-child | 부모 요소 안에 있는 마지막 자식만 선택할 때 |
| :nth-child(N) | 부모안에 모든 요소 중 N번째 요소 |
| :only-child | 요소의 자식이 하나밖에 없을 때 |
5️⃣ 가상 요소 선택자
| 종류 | 형태 |
|---|---|
| :before | 요소 내용 앞쪽에 새 콘텐츠 추가 |
| :after | 요소 내용 끝에 새 콘텐츠 추가 |
| :placeholder | 자리 표시자 텍스트 꾸밀 때 |
6️⃣ 단축 속성
서로 다른 여러 가지 CSS 속성의 값을 지정할 수 있는 CSS 속성입니다.
단축 속성을 사용하면 가독성이 좋은 스타일 시트를 작성할 수 있습니다.
예시
boder-width: 100px;
boder-style: solid;
boder-color: red;단축
boder: 100px solid red;다른 예시도 보여드리겠습니다.
예시
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;단축
margin: 10px 5px 10px 5px;이런식으로 단축속성을 이용해 코드를 간결하게 작성하는 것이 좋습니다.
7️⃣ CSS Emmet
css emmet과 html emmet 은 많기 때문에 위 링크에 들어가 참고하시길 바랍니다.
Emmet만 사용하더라도 빠르고 정확하게 마크업이 가능합니다.
#UXUI #코린이