728x90
저번 시간까지 HTML을 이용하여 웹의 뼈대를 구성하는 방법에 대해 배웠다.
이번 시간부터는 표현을 하기위한 CSS에 대해 배워볼 것인데 개인적으로는 글을 읽으며 실습을 하는 것을 추천한다!
Cascading Style Sheets = CSS
우리가 자주 사용하는 Naver의 경우 CSS가 없다면 보기가 정말 불편하고 이용하고 싶은 마음이 뚝 떨어진다. CSS를 배우지 않았지만 얼마나 중요한 것인지 알 수 있다.
이처럼 CSS는 스타일을 지정하기 위한 언어이다.
- 선택자를 통해 스타일을 지정할 HTML 요소를 선택
- 중괄호 안에서는 속성의 값, 하나의 쌍으로 이루어진 선언을 진행
- 각 쌍은 선택한 요소의 속성, 속성에 부여할 값을 의미
- 속성 (Property) : 어떤 스타일 기능을 변경할지 결정
- 값 (Value) : 어떻게 스타일 기능을 변경할지 의미
대충 어떻게 생겼는지 알아두기만 하고 본격적으로 사용하는 방법에 대해 알아보자!!
- CSS를 어떻게 정의 해줄까?
1. 인라인
해당 태그에 직접 style 속성을 활용한다.
2. 내부 참조
<head> 태그 내에 <style>에 지정
3. 외부 참조
외부 CSS 파일을 <head> 내 <link>를 통해 불러오기
위 3가지를 봤을 때 어떤 방법이 제일 좋은 것 같은가?
- 인라인 방법의 경우 실수가 잦아질 수 있다 (내부에 직접 존재하므로 중복도 있을 것이고, 찾기가 어려워서)
- 내부 참조의 경우 <style> 태그에 정의해주므로 코드가 너무 길어지는 단점이 있다.
- 이미 눈치 챘을 수도 있지만 외부 참조의 방식을 가장 많이 이용한다!
CSS를 본격적으로 배우기 전에 인터넷 창에서 F12를 누르면 개발자 도구가 튀어 나온다. 이를 활용해서 사용된 CSS를 확인해보자.
이렇게 CSS의 기본 구성에 대하여 배워보았다. 다음 시간엔 선택자, 상속 등 세부 내용을 다뤄보며 CSS를 깊게 파헤쳐보자!
728x90
'Front-end > HTML,CSS' 카테고리의 다른 글
| CSS 기본 스타일 (0) | 2022.08.06 |
|---|---|
| CSS 선택자 (0) | 2022.08.06 |
| HTML 문서 구조화 (0) | 2022.08.06 |
| HTML 구조-2 (0) | 2022.08.06 |
| HTML 구조-1 (0) | 2022.08.06 |