CSS
CSS를 간단하게 개념을 정리해봅니다😋
CSS란?
- HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어
- HTML4부터 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리 가능.
- W3C에서 만든 언어, 현재 모든 웹브라우저에서 요소들을 꾸미는 방법으로 사용됨.
CSS를 사용하는 이유
- HTML의 어트리뷰트만으로 웹 페이지를 제작한다고 하면, HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야한다. 이는 매우 많은 작업 시간을 요함
- 위의 언급한 방법보다 손쉬운 변경 및 유지 보수
- 같은 모양을 가져야 하는 요소에 일관적인 스타일 적용가능
CSS 문법
// 예시
h1 {
color: red;
width: 100%;
}
| 예시 대상 | 설명 |
|---|---|
| h1 | 선택자, HTML 요소를 선택 |
| {} | 선언의 시작과 끝, 이 속에 해당 선택자의 속성을 정의 |
| color | 속성명 key |
| red | 속성값 |
다양한 선택자
// 선언 속에 속성 대신 선택자에 대한 설명을 첨부함
h1 {일반 선택자. 태그들을 선택}
.class {클래스 선택자. 태그의 클래스 값(class 속성)으로 해당 태그(들)을 선택}
#id {아이디 선택자. 태그의 아이디 값(id 속성)으로 해당 태그 선택}
div p {자손 선택자. 하위 요소 중 특정 타입 요소 모두 선택}
div > div {자식 선택자. 해당 요소 바로 및에 존재하는 하위 요소 중 특정 타입의 요소 모두 선택}
div ~ p {일반 동위 선택자. 동위 관계에 있는 요소 중, 뒤에 존재하는 p 태그 모두 선택}
div + p {인접 동위 선택자. 동위 관계에 있는 요소 중, 바로 뒤에 존재하는 p 태그 모두 선택}
이외에도 정말 많은 선택자가 존재. MDN을 참조.
FLEX BOX
-
웹페이지의 레이아웃을 Flex하게 다룰 수 있게 해주는 css 속성
-
플랙스 박스는 크게 container, item으로 나눌 수 있음.
구분 주요 속성 container display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content item order, flex-grow, flex-shrink, flex, align-self
사이트
프론트엔드