CSS
CSS란
CSS는 Cascading Style Sheets를 의미한다.
- Cascading:계단식
- Style:멋을 내다
- Sheets:(종이)한 장
-> 계단식으로 스타일을 정의하는 문서
CSS는 HTML 문서에 스타일을 더해준다. HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있다.
CSS가 일하려면
CSS문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 사실상 의미가 없다.
HTML: 웹 문서의 콘텐츠를 구성하는 언어
CSS: 웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치 등)
-> HTML과 함께 사용되지 않는 CSS는 단순 텍스트일 뿐이며, 웹브라우저를 통해 결과물을 확인하기 위해서는 반드시 HTML문서 작성이 선행되어야 합니다.
내용 정리
- CSS는 웹문서를 꾸며주기 위해 사용하는 언어이다.
- CSS코드는 CSS파일에 작성한다. 확장자는 *.css이다.
- CSS코드는 HTML 문서에 스타일을 추가(정의)하는 언어이다. 따라서 HTML 문서가 존재하지 않을 때는 단순 텍스트에 불과하다.
CSS 기본 문법
- 선택자:어떤 요소에 스타일을 적용 할지에 대한 정보
- {중괄호}: 선택한 요소에 적용할 스타일을 정의하는 영역
- 속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)
- 속성값: 어떻게 정의하고 싶은지에 대한 정보
CSS 기본 문법 사용 예
- 속성값: p 태그에 스타일을 적용하겠다.
- {중괄호}: 이 안에 p 태그에 대한 스타일을 정의하겠다.
- 속성명: color를 정의하겠다. 이건 글자색을 의미한다.
- 속성값: red로 정의하겠다. 빨간색 글자를 원한다.
주석
주석은 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드이다.
주로 코드에 대한 메모를 남기기 위한 용도로 사용된다.
HTML에 CSS를 더하려면
HTML문서에 CSS 문서(코드)를 적용하고자 할 떄는 다음과 같은 방식들을 사용할 수 있다.
- 인라인 스타일: 태그에 직접 기술하기
- 스타일 태그: 스타일시트를 위한 태그를 추가하여 기술하기
- 문서 간의 연결: 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기
인라인 스타일
태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식. 따라서 선택자는 필요 없다. 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다.
스타일 태그
HTML 문서에 <style></style>태그를 추가하여 그 안에 CSS코드를 작성할 수 있다.
문서 간의 연결
확장자가 *.css인 스타일시트 파일을 생성해 그 안에 CSS코드를 작성하고, HTML문서에 이를 연결해줄 수 있다. 이때는 <link>태그를 사용한다.
- href: 연결하고자 하는 외부 소스의 url을 기술하는 속성
- rel: 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성
-><link>채그는 HTML 문서의<head></head>내부에서 사용해야 합니다.
내용 정리
- CSS 코드는 선택자, 중괄호 영역, 속성명, 속성값 등으로 구성된다.
- CSS 코드에도 주석을 사용할 수 있다./주석/
- CSS 코드를 HTML 문서에 적용하기 위해서는 인라인 스타일, 스타일 태그, 외부 문서 연결 등의 방식을 사용해야 한다.
선택자
선택자: 어떤 요소에 스타일을 적용 할 것인지에 대한 정보
선택자의 종류
- 기본 선택자
- 그룹 선택자
- 특성 선택자
- 결합 선택자
- 의사 클래스
- 의사 요소
기본 선택자 1. 전체 선택자
모든 요소를 선택한다.
*(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다.
기본 선택자 2. 태그 선택자
주어진 이름을 가진 요소를 선택한다. '유형 선택자'라고도 한다. 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.
기본 선택자 3. 클래스 선택자
주어진 class 속성값을 가진 요소를 선택한다. 주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택한다.
기본 선택자 4. 아이디 선택자
주어진 id 속성값을 가진 요소를 선택한다. id는 고유한(unique) 식별자 역할을 하는 전역 속성이다.
그룹 선택자
다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다. 쉼표(,)를 이용해 선택자를 그룹화한다.
선택자가 겹치는 경우
선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용된다. 선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정된다.
선택자 우선순위: 아이디 선택자 > 클래스 선택자 > 태그 선택자
텍스트 관련 속성
- font-family: 글꼴을 정의한다.
- font-size: 글자 크기를 정의한다.
- text-align: 정렬 방식을 정의한다.
- color: 글자 색상을 정의한다.
font-family
요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴명을 속성값으로 지정한다. 여러 개의 글꼴을 연달아 기입하여 우선 순위를 지정할 수 있다.
font-size
수치와 단위를 지정해 글자의 크기를 정의할 수 있다.
- px: 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
- rem:
<html>태그의 font-size에 대응하는 상대적인 크기 - em: 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기
text-align
블록 내에서 텍스트의 정렬 방식을 정의한다. 미리 정의된 키워드 값을 지정한다.
- left/right: 왼쪽 또는 오른쪽 정렬한다
- center: 가운데 정렬한다
- justify: 양끝 정렬한다(마지막 줄 제외)
color
텍스트의 색상을 정의한다. 다양한 방법으로 색상을 지정할 수 있다.
- 키워드: 미리 정의된 색상별 키워드를 사용한다(ex. red, blue)
+ 여섯자리 16진수 값 형태로 지정한다
- Red, Green, Blue 의 수준을 각각 정의해 지정한다
내용 정리
- font-family는 글꼴을 지정하는 속성이며, 여러 글꼴을 연달아 기입하여 우선순위를 지정할 수 있다.
- font-size는 글자 크기는 지정하는 속성이며, px,rem,em등의 단위를 사용할 수 있다.
- text-align은 블록 내에서 텍스트의 정렬 방식을 정의한다.
- color는 다양한 방법으로 텍스트의 색상을 정의한다.
블록 레벨 요소 vs 인라인 요소
블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. (ex.div,p,h1 등)
인라인 요소: 자기에게 필요한 만큼의 공간만 차지한다.(ex.span,a 등)
display 속성
display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.
display 속성 값
- inline: 인라인으로 처리한다.
- block: 블록 레벨로 처리한다.
- inline-block: 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리한다.
- none:디스플레이(표시)하지 않는다.
border 속성
border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다. border 속성에는 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데, 이러한 속성을 '단축속성'이라 한다.
border 속성의 하위 속성
- border-color:color정의 방식과 동일
- border-width: thin,medium,thick 등의 키워드 또는 px,em,rem 등의 단위
- none(기본값),solid(직선),dotted(점선),dashed(긴 점선)등
박스모델(Box-Model)
브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라 표현하며, CSS는 박스의 크기, 위치, 속성(색,배경,테두리 모양 등)을 결정할 수 있다.
하나의 박스는 다음 네 개의 영역으로 구성된다.
- 콘텐츠 영역
- 안쪽 여백
- 경계선(테두리)
- 바깥쪽 여백
박스 각 영역의 크기는 어떻게?
- 콘텐츠 영역: width,height
- 안쪽 여백:padding
- 바깥쪽 여백:margin
- 테두리:border-width
box-sizing
box-sizing 속성은 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정한다.
- content-box: 기본값. 너비와 높이가 콘텐츠 영역만을 포함한다.
- border-box: 너비와 높이가 안쪽 여백과 테두리까지 포함한다.
background
배경(background)은 콘텐츠의 배경을 정의한다.
- background-color
- background-image
- background-position
- background-size
- background-repeat
float
float 속성은 요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 한다.
- none
- left
- right
clear
clear 속성은 float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려가게 할 수 있다.
- none
- left
- right
- both
position
position은 문서 상에 요소를 배치하는 방법을 정의한다.
- static
- relative
- absolute
- fixed
- sticky
flexbox
flexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다.
- 행(row)
- 열(column)
flex-direction
- row
- row-reverse
- column
- column-reverse
flexbox 다루기
- justify-content
- align-items
- align-self
- flex-wrap
의사클래스
- hover
- active
- focus
- disabled
- nth-child()
의사요소
- after
- before
- first-line
- marker
- placeholder
상속
상속(Inheritance)이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다.
공용 키워드
- inherit
- initial
- unset
z-index
z-index 속성은 요소의 쌓임 순서(stack order)를 정의할 수 있다.
- 기본값: auto
- 값이 클수록 위에 표시됨
Flexbox
Flexbox(Flexible Box)는 요소들을 가로 또는 세로 방향으로 자유롭게 정렬하고 공간을 배분하기 위해 사용하는 1차원 레이아웃 모델입니다.
1. 주요 용어
- Flex Container:
display: flex;가 적용된 부모 요소 - Flex Item: 컨테이너 안에 포함된 자식 요소들
- Main Axis(주축): 아이템이 배치되는 기본 방향
- Cross Axis(교차축): 주축과 수직을 이루는 방향
2. 컨테이너에 쓰는 속성 (부모)
display: flex;:Flex 컨테이너로 정의 (필수)flex-direction: 주축의 방향 설정(row,colums,row-reverse,column-reverse)justify-content: 주축 (가로) 정렬(flex-start,center,space-between,space-around)align-items: 교차축(세로) 정렬(flex-start,center,stretch)flex-wrap: 줄 바꿈 여부(nowrap,wrap)
3. 아이템에 쓰는 속성 (자식)
flex: 아이템의 증가, 감소, 기본 크기를 한 번에 설정(flex: 1;)align-self: 특정 아이템 하나만 개별적으로 세로 정렬
