CSS
CSS의 의미 :
CSS는 HTML로 작성된 웹 문서의 시각적 스타일(글꼴, 색상, 레이아웃, 크기 등)을 정의하고 꾸미는 스타일 시트 언어이다.
CSS의 속성 구조 :
CSS의 속성구조는 아래와 같이 되어있다.
p는 선택자(Selector)로 어떤 태그에 스타일을 적용할 건지 선택한다.
color, font-size는 속성(property)으로 무엇을 바꿀지 정한다.
blue, 20px은 값(value)으로 어떻게 바꿀지를 정한다.
: 은 속성과 값을 구분하는 역할을, ; 은 속성 끝을 표시하는 역할을 한다.
CSS 적용 방식
CSS의 적용 방식은 아래와 같다.
1. 인라인 스타일
인라인 스타일은 HTML 태그 안에 직접 CSS를 작성하는 방법으로 한 요소에만 스타일을 적용할 때 사용한다.
2. 내부 스타일
내부 스타일은 HTML 문서의 head태그 안에서 style 태그를 사용해 CSS를 작성하는 방법으로
한 HTML 파일 안에서 여러 요소에 스타일 적용이 가능하다.
3. 외부 스타일
CSS 파일을 따로 만들어 HTML 문서와 연결하는 방법으로 여러 웹페이지에서 같은 스타일을 사용할 수 있다.
CSS 태그 선택자
HTML 태그 이름을 이용해 스타일을 적용하는 선택자로 선택한 태그 전체에 같은 스타일이 적용된다.
CSS 클래스 선택자
특정 class 이름을 가진 요소에 스타일을 적용하는 선택자로 클래스 선택자는 앞에 . 을 붙인다.
CSS ID 선택자
특정 ID 값을 가진 요소 하나에 스타일을 적용한다. ID 선택자는 앞에 #을 붙인다.
가상 선택자
특정 상태의 요소를 선택하는 CSS선택자로 마우스를 올리거나 클릭했을 때 등의 상태 표현 가상의 표현이 가능하다.
:hover - 마우스를 올렸을때
:active - 클릭 중일 때
:focus - 입력창 선택 시
가상 요소
HTML에 없는 부분을 CSS로 만들어 꾸미는 기능
::before는 요소 앞에 내용을 추가한다.
::after는 요소 뒤에 내용을 추가한다.
글자 스타일
글자의 색상, 크기, 글꼴 등을 설정하는 CSS 속성이다.
color - 글자 색을 설정한다.
front-family - 글꼴을 지정한다.
front-size - 글자 크기를 설정한다.
front-weight - 글자 굵기를 설정한다.
텍스트 꾸미기
텍스트의 모양이나 간격 등을 설정하는 속성이다.
text-decoration - 밑줄, 취소선 등을 표현한다.
text-transform - 대소문자 변경을 표현한다.
letter-spacing - 글자 간격을 조절한다.
CSS 박스 모델 & 레이아웃 정리
1. 박스 테두리(border)
HTML 요소는 박스 형태로 이루어져 있으며, border 속공을 사용하면 요소의 테두리를 설정할 수 있다.
| width / high | 가로, 세로 크기 |
| border-width | 테두리 두께 |
| bolder-color | 테두리 색상 |
| bolder-style | 테두리 모양 |
| bolder-radius | 모서리를 둥글게 만든다 |
- width: 200px
→ 가로길이를 200px로 설정 - height: 100px
→ 세로 길이를 100px로 설정 - border-width: 5px
→ 테두리 두께를 5px로 설정 - border-color: red
→ 테두리 색상을 빨간색으로 설정 - border-style: dashed
→ 점선 형태의 테두리 적용 - border-radius: 15px
→ 모서리를 둥글게 만듦
2. border-style 종류
borde-style은 테두리 모양을 결정하는 속성이다.
| 속성값 | 설명 |
| none | 테두리 없음 |
| solid | 실선 |
| dashed | 점선 |
| dotted | 점으로 된 선 |
| double | 이중선 |
| groove | 홈이 파인 듯한 효과 |
| ridge | 튀어나온 효과 |
| inset | 안쪽으로 들어간 효과 |
| outset | 바깥쪽으로 나온 효과 |
3. 박스 배경화면 (background-color)
background-color는 요소의 배경 색상을 설정하는 속성이다.
- background-color: lightblue
→ 박스 내부 배경색을 하늘색으로 설정 - 배경색은 콘텐츠 영역과 padding 영역까지 적용된다.
4. 박스 여백 (margin / padding)
CSS 박스 모델에서 여백은 크게 두 가지로 나뉜다.
- margin
→ 테두리 바깥쪽 여백(다른 요소와 거리를 띄울 때 사용) - padding→ 테두리 안쪽 여백(글자와 테두리 사이 간격 조절)
5. display
display는 요소를 화면에 어떤 방식으로 배치할지 결정하는 CSS 속성이다.
| 속성값 | 설명 |
| block | 한 줄 전체 차지 |
| flex | 유연한 레이아웃 배치 |
| none | 화면에서 숨김 |
6. justify-content
justify-contenr는 Flexbox에서 요소들을 가로 방향으로 어떻게 정렬할지 결정하는 속성이다.
속성값설명
| 속성 종류 | 설명 |
| flex-start | 왼쪽 정렬 |
| flex-end | 오른쪽 정렬 |
| center | 가운데 정렬 |
| space-between | 요소 사이 간격 동일 |
| space-around | 요소 양옆 간격 동일 |
7. position
position은 요소의 위치를 어떻게 배치할지 결정하는 속성이다.
| 단 | 설명 |
| static | 기본 위치 |
| relative | 원래 위치 기준 이동 |
| absolute | 특정 위치에 고정 배치 |
| fixed | 화면 기준 고정 |
| sticky | 스크롤 위치에 따라 고정 |