| CSS와의 만남
디자이너인 저는 HTML을 진행하면서 CSS를 떼려야 뗄 수 없는 코드였습니다.
마치 이제까지 포토샵과 일러스트레이터를 가지고 디자인을 하던 저에게 새로운 디자인툴이 생긴 것과 같았습니다.
코드로 디자인을 할 수 있다니! 놀라울 따름이었습니다. HTML을 가지고 원하는 구조와 레이아웃을 만든다면
CSS로 세부적인 표현과 위치, 색상, 효과 등등 더욱 풍부해진 표현을 웹상에서 할 수 있는 신세계였습니다.
웹디자이너분이시라면 한 번쯤 공부해도 괜찮을 것이라고 생각됩니다.
그래서 앞으로 제가 공부했었던, 그리고 공부 중인 코드에 대해서 이 공간에 정리해볼까 합니다.
| CSS 개요
Cascading Style Sheets (CSS)는 documents가 사용자에게 어떻게 보일 것인가를 기술한 언어이며,
분리하여 별도로 유지관리 할 수 있도록 도와준다. 어떻게 보여질 것인지에 대한 것을 "스타일(Style)"이라 하며
이것은 document의 내용 정보와는 별도로 관리할 수 있다.
| CSS 사용법
CSS 내부적으로 사용되는 문법은 같으며, 어디에 기술하느냐에 따라 차이가 있다.
1. Html 태그 내에 Style 속성을 이용하여 기술
2. <style></style> 태그 사이에 작성하여 Html 문서 내에 기술
3. .css 파일로 분리되어 Html 문서와 연결
<!-- 1번 방법 -->
<div style="color: #aa0000;"> this is red text </div><!-- 2번 방법 -->
<html>
<head>
<style type="text/css">
.mText{ color: blue; }
</style>
</head>
<body>
<div class="mText">
this is blue
</div>
</body>
</html><style>태그의 type="text/css"는 필수가 아니므로 생략할 수 있습니다.
3번 파일로 분리하는 부분은 2번 방법의 <style>태그 안의 내용만 따로 분리하여 별도의 .css 파일로 저장을 하고,
그 파일을 Html 문서 내 <head>태그 부분에 <link>태그로 연결하여 사용합니다.
/* common.css파일 */
.mText{ color: blue; }<!-- 3번 방법 -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/common.css">
</head>
<body>
<div class="mText">
this is blue
</div>
</body>
</html>여기서 ".mText"는 선택자라 표현하고 괄호 {}안에 : 을 중심으로 왼쪽은 속성, 오른쪽은 값으로 이루어져 있다.
선택자는 3개로 이루어져 있으며 다음 포스팅엔 선택자에 대한 내용을 기록하겠습니다.
- 태그 선택자
- ID 선택자
- Class 선택자
'즐거움 넘치는 IT 세계 > 코드로 만드는 디자인' 카테고리의 다른 글
| [ CSS 입문 ] 가상 클래스 선택자 (0) | 2018.09.06 |
|---|---|
| [ CSS 입문 ] 다중 조건 선택자 (0) | 2018.09.05 |
| [ CSS 입문 ] 부모 자식 선택자 (0) | 2018.09.04 |
| [ CSS 입문 ] id, class 선택자 (0) | 2018.09.03 |
| [ CSS 입문 ] 태그 선택자 (0) | 2018.09.02 |
