CSS란 무엇일까?
HTML이 집의 뼈대를 세우는데 사용하는 언어였다면, CSS는 집을 멋지게 꾸며주는 언어입니다.
뼈대 없이는 집을 지을 수 없듯이, HTML을 공부하지 않았다면 HTML 먼저 공부하고 CSS를 공부하시기 바랍니다.
HTML이란?
1. HTML이란? - 홈페이지 만들기를 '집 짓기'로 비유해보겠습니다. - HTML은 집의 뼈대를 만드는 것과 같습니다. 바닥을 다지고, 철근 및 콘크리트로 집의 기본 구조를 잡는 것이지요. 2. HyperText Markup
makinghome.tistory.com
1. CSS란 무엇일까?
- CSS란 'Cascading Style Sheets'의 줄임말입니다.
- Cascading은 '종속의', '위에서 아래로 흐르는'을 뜻합니다.
- Style은 우리가 흔히 말하는 그 '스타일'로 이해하면 됩니다.
- Sheets는 '종이', '기록', '얇은 판'을 뜻합니다.
- 따라서 'Cascading Style Sheets'는 '종속적 특성을 가진 스타일 기록장(?)' 정도로 해석할 수 있습니다.
- 그러나 일단은, CSS란 HTML로 만들어진 웹 문서에 색깔, 크기, 글꼴 등을 설정해주는 언어로 이해하면 되겠습니다.
2. 내부 스타일 시트
- 위 예시는 '내부스타일시트.html'이라는 파일에 내부 스타일 시트를 작성한 것입니다.
- 내부 스타일 시트는 <head>와 </head> 사이에 <style> 태그를 넣어 사용합니다.
- 위 예시에서 적용한 스타일은 'p태그의 색깔을 빨강색으로 하라'입니다.
- 위 내용을 CSS로 표현할 때, p { color: red; }와 같이 표현합니다.
- 'p'는 '선택자(selector)'라고 부릅니다. 어느 부분에 스타일을 적용할 지 선택해주는 역할을 합니다.
- '{ }' 중괄호 안쪽에 적용할 스타일 속성과 속성 값을 작성해줍니다.
- 'color:'는 '스타일 속성'이라고 부릅니다. 어떤 스타일을 적용할지 정해주는 역할을 합니다. color는 글자의 색깔을 정해줍니다.
- 'red;'는 '속성 값'이라고 부릅니다. 앞서 정한 스타일 속성을 어떻게 표현할지 정해주는 역할을 합니다. 즉, 위 예시에서는 글자색을 빨강색으로 정한 것입니다.
3. 외부 스타일 시트
- 외부 스타일 시트는 <head>와 </head> 사이에 <link> 태그를 넣어 사용합니다.
- link는 말 그대로 스타일 시트를 외부 링크로 연결해준다는 뜻입니다.
- 따라서 어디로 링크를 걸어줄지 알려주어야 합니다.
- 스타일 시트로 사용할 파일의 주소를 href 속성 값에 입력해줍니다.
- 위 예시에서는 style.css라는 CSS파일을 만들고 link 태그로 연결해주었습니다.
- 보통 HTML과 CSS를 분리하기 위해 내부 스타일 시트보다 외부 스타일 시트를 많이 활용합니다.
4. 스타일 표기 방법
- 위 예시는 'style.css'라는 외부 스타일 시트에 스타일을 작성한 예시입니다.
- 이처럼 외부 스타일 시트를 작성할 때는 내부 스타일 시트와 같이 <style> 태그를 삽입하지 않고, 바로 적용할 스타일들을 작성합니다.
- ①②③은 모두 같은 의미를 나타냅니다. 띄어쓰기만 다를 뿐입니다. 작성자가 보기 편하도록 작성하면 됩니다.
- 위 예시에서는 p태그에 두 가지 스타일 속성이 적용되었습니다.
- 색깔을 빨강색으로 하고, 글자 크기를 40px로 하였습니다.
- 이처럼 한 태그 안에 여러 스타일 속성을 지정할 때가 많기 때문에, 꼭 스타일 속성 값 뒤에 ';' 세미 콜론을 붙여 스타일 속성을 구분을 해주어야 합니다.
- 끝으로, 스타일에는 영향을 주지 않지만 CSS 작성자가 메모를 남길 것이 있으면 /*와 */ 사이에 텍스트를 입력해 주석을 달아 줄 수 있습니다.
5. 인라인 스타일
- 내부 스타일 시트, 외부 스타일 시트 외에 '인라인 스타일'이 있습니다.
- HTML 태그의 속성 중 style을 활용하는 것입니다.
- 위 예시처럼 style="속성: 속성 값;"과 같이 작성하면 됩니다.
- 인라인 스타일은 아주 간단한 스타일 적용할 때 주로 사용합니다.
'홈페이지 만들기 > 2단계. CSS' 카테고리의 다른 글
| CSS 텍스트 스타일: text-shadow white-space letter-spacing word-spacing (0) | 2020.11.16 |
|---|---|
| CSS 텍스트 스타일: color text-decoration text-transform (0) | 2020.11.12 |
| CSS 폰트 스타일: font-size font-weight font-style font (0) | 2020.11.09 |
| CSS 폰트 스타일: font-family, 웹 폰트(web font) (1) | 2020.11.05 |
| CSS 선택자(selector): 전체 선택자, tag 선택자, class 선택자, id 선택자 (0) | 2020.11.04 |
댓글