CSS 기초적인 내용 정리, 쉽게 이해해보자!
웹문서는 크게 3가지로 구성되어 있습니다. 기본적인 틀들의 배치와 형태를 결정하는 HTML 태그와 문서의 디자인과 스타일을 결정하는 CSS, 웹문서가 동작할 수 있도록 여러 기능들을 결정하는 JS가 있는데요.
웹프로그래밍을 배울때 이 셋중 하나라도 빠진다면 완전한 웹페이지라고 말할 수 없을 것입니다. 이번 포스팅에서 다룰 것은 CSS가 무엇인지, 기본적으로 어떻게 구성되어 있는지 등의 기초적인 내용입니다. 코드 작성부터 배우는 것보다 기본적으로 배우는 것이 무엇인지를 알아야겠죠?
CSS란 무엇일까?
Css는 웹문서에 생기를 더해줍니다. Css가 없는 웹 문서는 그저 딱딱한 문서에 불과하죠. 보기 좋은 음식이 먹을때도 좋은 듯이 아무리 훌륭한 내용을 포함한 문서라도 가독성이 떨어지거나 보기에 괴상하면 좋다고 말할 수 없을 것입니다.
Css는 웹문서에서 스타일을 담당하고 있습니다. 미리 약속한 스타일 속성들을 통해 웹문서에 작성하면 이에 따라 웹문서가 디자인되어 화면에 표시되죠. 웹문서에서 스타일은 글꼴, 색상, 정렬, 배치 방법 등 여러가지가 있습니다. 겉모습을 결정시키는 요소들이죠.
CSS 적용 방법
<link href="style_portal.css" rel="stylesheet" type="text/css">
Css 파일을 만드는 법은 htnl과 같이 단순히 확장자를 css로 지정하면 됩니다. 웹문서에 해당 css파일을 가져오고 싶은 경우 link 태그를 사용합니다. 위 코드와 같이 경로와 타입, 스타일 시트임을 표시하면 웹문서에 바로 스타일을 적용할 수 있습니다.
<style>
p {text-align: center;color:red; }
</style>꼭 파일로 웹문서의 스타일을 가져오지 않아도 됩니다. Html 웹문서 내에 <style> 태그를 사용하여 코드를 작성할 수 있습니다. 이를 내부 스타일 시트라고 하는데요. 주로 간단히 스타일을 적용하고 싶거나 임시로 사용하는 경우 사용합니다. 하지만 스타일과 htlm 문서는 분리된 편이 유지/보수에 효율적입니다.
<p style="color:yellow">인라인 스타일 시트</p>
내부 스타일 시트보다 더 간단하게 스타일을 적용할 수 있는 방법입니다. 바로 인라인 스타일인데요. 인라인 스타일은 태그 속성으로 스타일을 지정합니다. 이 경우는 정말 임시로 스타일을 지정하거나 해당 태그만이 필요한 스타일일 경우에만 사용됩니다.
HTML로 웹사이트의 내용을 입력한다면 CSS는 이 내용 사이사이에 스타일을 조절하여 웹문서를 화면에 표시합니다. 스타일 영역을 CSS로 굳이 분리한 이유는 사이트 내용을 수정할 때 스타일에 영향을 미치지 않고 온전히 내용만 수정하기 위함입니다. 이외에도 웹문서를 관리할 때 영역을 분리하여 운영하는 것이 효율적인 이유도 있죠.
CSS 구성 요소
p {text-align: center; color: red;}
스타일 형식은 위의 예시 코드와 같이 3가지 구성요소를 가지고 있습니다. 선택자는 어떤 태그 혹은 아이디,클래스에 해당 스타일을 적용시킬지 지정합니다. 스타일 속성은 미리 약속된 규약으로 어떤 스타일을 변경할 것인지를 결정합니다. 속성 값은 해당 스타일을 이 값으로 결정한다는 의미입니다.
자 쉽게 활용해볼까요? H4태그 모두 글자 색을 파란색으로 설정하고 싶습니다. 글씨 크기 14px 가 적당하겠군요. 그러면 코드를 어떻게 작성해야 할까요? Style_portal.css 파일에 다음과 같이 작성해보세요.
h4 {columns: blue; font-size: 14px;}
그리고 html 웹 문서에 다음과 같이 작성합니다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
<style>
p {text-align: center;color:red; }
</style>
<link href="style_portal.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>내부 스타일 시트</p>
<h4>외부 스타일 시트</h4>
</body>
</html>
결과는 어떨까요?
사진과 같이 내부 스타일 시트는 텍스트 가운데 정렬과 빨간색 글씨로 표시되며 외부 스타일 시트는 파란색 글씨에 14px 크기로 표시됩니다. 이처럼 우리가 css를 활용한다면 웹페이지를 원하는 디자인으로 만들 수 있는 것이죠.
마무리
웹페이지 디자인을 위해서 기본적인 이론 내용을 알아야겠죠? Css에서 공부할 것은 선택자, 스타일 속성, 속성값 세개입니다. 모두 외우는데에는 무리가 있을것이라 생각됩니다.
공부하면서 이런게 있구나라고 넘어가시고 나중에 필요하다면 구글링으로 찾는 것이 효율적이겠죠. 이제부터 css에 대해서 차례대로 정리해볼까 합니다. 모두 잘 숙지하셔서 원하는 웹 디자인을 하셨으면 좋겠습니다.
포스팅 읽어주셔서 감사합니다.
이전 시리즈
'개발 > HTML_CSS' 카테고리의 다른 글
| Css 속성 우선 순위 정리, 간단히 알아보자 (0) | 2020.01.19 |
|---|---|
| Css 기본 선택자 정리 및 사용법 정리, 자주 쓰이는 것 위주로 (0) | 2020.01.18 |
| HTML 강좌 input 태그 총정리 (0) | 2020.01.13 |
| HTML 강좌 form 구조에 대해서 (0) | 2020.01.13 |
| HTML 강좌 9 링크 관련 태그(a,map,area) (0) | 2020.01.12 |
