CSS (Cascading Style Sheets)
CSS는 HTML이라는 정보로 이루어진 문서를 좀더 가시적으로, 디자인적으로 표현하기 위해 만들어진 언어입니다.
CSS의 필요성
초기의 웹은 HTML 로만 이루어진 문서에 불과했습니다. 흰 바탕에 검은 글씨만 있었죠. 사람들은 점점 더 자신들의 사이트를 조금 더 보기 편하게 그러면서 아름답게 보이길 원했습니다. 그렇게 해서 만들어진 언어가 바로 CSS 입니다. 지금의 웹 사이트들이 보기 좋은 것은 CSS 덕분입니다.
CSS는 웹페이지를 내용(HTML)과 스타일(CSS)로 분리해주는 계기가 되었습니다.
CSS 사용방법
CSS는 어떻게 사용하든 문법은 같습니다. 하지만 적용위치에 따라 사용방법이 약간 다릅니다.
1. Inline Style Sheets - HTML 태그 내부에서 사용
2. Internal Style Sheets - <head>사이에 <style> 태그에서 사용
3. External Style Sheets - 외부 파일 사용
각각 어떻게 사용하는 예를 들어 설명하겠습니다.
1. Inline Style Sheets - HTML 태그 내부에서 사용
HTML태그 내부에 style이란 속성을 주어 해당 문서의 스타일을 변경하는 방법입니다.
1 | <div style="color=red;">HTML 내부에서 사용하는 방법</div> | cs |
2. Internal Style Sheets - <head> 사이에 <style>태그 사용
1 2 3 4 5 6 7 8 9 10 11 | <head> <style> .css_color { color: red; } </style> </head> <body> <div class="css_color">head 태그 사이에 style 태그 사용</div> </body> | cs |
두번째 방법은 style태그를 이용한 방법입니다. 이 방법의 장점은 코드의 깔끔함이 있습니다. 문서의 본문에 해당하는 body 태그의 내용 중 style 속성을 주지 않아 내용의 간결함이 돋보입니다.
하지만 이 방법 역시 첫번째 방법보단 수월하지만 각각 페이지 문서에 style 태그를 작성해야 하는 번거로움이 있습니다.
3. External Style Sheets 외부 파일 사용
이 방법은 css 파일을 생성후 본문에 외부파일을 연결하는 방법입니다.
사용법은 아래와 같습니다.
(css/style.css 파일)
1 2 3 | .css_color { color: red; } | cs |
(index.html 파일)
1 2 3 4 5 6 7 | <head> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="css_color">외부 파일 사용</div> </body> | cs |
이 방법의 장점은 css 파일 하나만 만들어 놓으면 각 문서에 코드 한줄로 쉽게 적용이 됩니다. 재사용과 수정이 용이합니다. 현재 웹 개발에서 가장 많이 사용하는 방법입니다.
마무리
CSS의 기본적인 내용과 HTML문서에 적용시키는 3가지 방법에 대해서 알아보았습니다. Internal이나 External 방법을 사용하려면 css 선택자에 대한 내용을 알아야 사용할 수 있습니다.
이에 대해선 다음 포스팅에서 소개하도록 하겠습니다.~
'Programming' 카테고리의 다른 글
| null과 undefined 의 차이 이해하기 (0) | 2019.05.02 |
|---|---|
| CSS 박스모델 이해하기 (0) | 2019.05.01 |
| css 크기 단위 px, em, rem 의 차이점 (0) | 2019.04.24 |
| HTML 에 대해서 알아보자 (0) | 2019.01.26 |
| [자바스크립트 스터디] 자바스크립트 완벽 가이드 1부 2장 어휘구조 (0) | 2018.06.01 |
댓글