'All about WEB/All about CSS' 카테고리의 글 목록
hemahero.tistory.com
① CSS는 Cascading Style Sheets(종속형 시트)의 약자이다
② CSS는 페이지의 내용이 어떻게 표현되었는지 서술하는 방법을 알려준다.
㉠ CSS를 이용해 작업량을 줄여주며, 웹 페이지의 여러 개의 레이아웃을 한 번에 제어할 수 있다.
㉡ CSS는 웹 페이지의 레이아웃의 서식을 설정하는데에 사용한다.
㉢ CSS를 이용하면 색상, 폰트, 글자 크기, 요소 간의 공백, 요소의 배치 및 배치 방식, 배경사진 또는 배경색, 기종 별 표시 화면과 화면 크기 등을 설정할 수 있다.
㉣ 'cascading'이란 단어는 계단식이란 의미를 갖는다. 이 의미를 이해하기 위해 그림을 통한 예시를 보자.
ⓐ 위 계단에서 물을 흘리면 아래 계단까지 젖는 것을 볼 수 있다.
ⓑ 위의 예시처럼 위 계단을 부모 요소(parent element)라고 하며, 그 계단 아래에 있는 계단 들을 자식 요소(childeren elements)라고 한다.
ⓒ 만약 부모 요소의 글씨 색상을 빨간색으로 지정한다면 특별한 설정을 하지 않는 한 자식 요소들 또한 빨간색이 된다.
③ CSS는 HTML과 완전히 다른 언어이다.
㉠ HTML과 CSS는 다른 기능을 수행한다.
ⓐ HTML는 구조를 표현하는 데 사용된다.
ⓑ CSS는 스타일을 표현하는 데 사용된다.
④ CSS의 문법은 다음과 같다.
⑤ CSS를 HTML 문서에 적용하는 방법은 3가지(Inline, Internal, External)가 존재한다.
㉠ 인라인 스타일시트는 HTML 요소들의 내부에 직접 style 속성을 부여하는 방식이다.
ⓐ 인라인 스타일시트은 단일 HTML 요소에 적용할 때 주로 사용한다.
ⓑ HTML 요소의 고유 속성을 사용한다.
ⓒ 다음 예시를 들 수 있다.
제목은 회색
설정 안 한 달락
파란색으로 설정한 달락
㉡ Internal CSS 방식은 <head> 요소를 선언할 때 같이 <head> 요소 내부에 선언하는 방식이다.
ⓐ Internal CSS 방식은 <head> 부분의 안에 <style> 요소를 이용해 정의한다.
ⓑ 다음 예시를 들 수 있다.
제목은 회색
설정 안 한 달락
보라색으로 설정한 달락
㉢ External CSS 방식은 <link> 요소를 사용해 외부 CSS 파일을 불러오는 방식이다.
ⓐ Extenal CSS 방식은 여러개의 HTML 페이지에 스타일을 적용하기에 용이하다.
ⓑ 각 HTML 페이지의 <head> 부분에 링크시켜줘야 한다.
ⓒ 다음 예시를 들 수 있다. 위 코드는 html 파일이고, 아래 코드는 style.css 파일이다.
제목은 회색
설정 안 한 달락
보라색으로 설정한 달락
ⓓ Internal CSS 방식에서 <style> 요소 안의 내용을 CSS 파일로 저장하면 매번 긴 같은 내용의 스타일 요소를 입력할 필요 없이 링크 요소를 이용해 미리 저장된 내용을 간편하게 불러올 수 있다.
⑥ 사용할 수 있는 CSS 속성의 종류는 다음과 같다.
| CSS 속성 | 기능 |
| color | 글자색 설정 |
| font-family | 폰트 설정 |
| font-size | 글자 크기 설정 |
| border | 글자 테두리 설정 |
| padding | 글자 테두리 내부 여백 |
| margin | 글자 테두리 외부 여백 |
㉠ color 속성은 글자의 색을 지정한다.
주홍 글씨
㉡ font-family 속성은 폰트의 종류를 지정한다.
abcdefg
hijklmn
㉢ font-size 속성은 글씨의 크기를 지정한다.
abcdefg
hijklmn
㉣ border 속성은 글자 테두리를 지정한다.
abcdefg
hijklmn
㉤ padding 속성은 글자 테두리 내부 여백을 지정한다.
abcdefg
hijklmn
㉥ margin 속성은 글자 테두리 외부 여백을 지정한다.
abcdefg
hijklmn
'All about WEB > All about HTML' 카테고리의 다른 글
| 15. HTML Links (0) | 2021.07.17 |
|---|---|
| 14. HTML 색(Colors) (0) | 2021.07.17 |
| 12. HTML 스타일(style) (0) | 2021.06.15 |
| 11. HTML 주석(Comments) (0) | 2021.06.15 |
| 10. HTML 인용구 요소(Quotation and Citation Elements) (0) | 2021.06.15 |
