CSS

HTML 문서의 스타일을 정의하는 CSS를 이해하고, 그 문법에 대해서 알아봅니다.
CSS


태그의 스타일 속성

CSSCSS

HTML 태그에 <tagname style="속성1:값1; 속성2:값2;">… 처럼 style 속성을 명시해 다양한 스타일 관련 효과를 설정 할 수 있습니다.

W3C CSS 레퍼런스 에서 전체 스타일 속성과 그 설명을 볼 수 있습니다.

위 링크의 레퍼런스에 모든 스타일 속성이 기술되어 있습니다. 하지만 이런 속성들은 단번에 공부하기 보다는 조금씩 써보면서 익혀가는게 배우기에 적합하다고 생각합니다. 참고하실 만한 책을 한권 소개합니다. 최신 HTML 태그 및 스타일 속성들을 사전처럼 정리해 둔 얇은 책입니다.

세르게이의 HTML5 & CSS3 퀵 레퍼런스세르게이의 HTML5 & CSS3 퀵 레퍼런스

아래에 주요한 스타일 속성들을 기술해 놓았으나, 실제 프로젝트와 별개로 무작정 암기하는 것은 아주 흥미롭지 않을 것입니다. 가볍게 눈에 담아두고 지나가시면 좋겠습니다.

주요 스타일 속성들

색상

속성설명
color텍스트의 색상color:red;
color:rgb(255,100,0);
color:rgba(255,100,200,0.5);
color:#FFCC00;
opacity태그의 불투명도opacity:1;
opacity:0.1;

배경과 외곽선

속성설명
background태그의 배경 색상 및 이미지background:#EEE;
background:url(‘./image/bg1.jpg’) no-repeat center center;
border태그의 외곽선border:none;
border:1px solid black;
border-bottom:2px dashed black;
border-right-color:red;
border-radius:10px;
border-radius:50%;
border-radius:10px 20px 30px 40px;
box-shadow태그의 외곽 그림자box-shadow:none;
box-shadow: 30px 10px 30px 5px #ccc;

박스 속성

태그의 박스 속성태그의 박스 속성

속성설명
display태그가 어떻게 보여질 지display:none;
display:block;
display:inline;
display:inline-block;
display:flex;
position태그가 어떻게 위치 할 지position:static;
position:relative;
position:absolute;
position:fixed;
top:30px;
eft:30px;
bottom:20px;
right: 20px;
margin태그의 바깥 여백margin: 10px 5px 20px 30px;
margin: 0 auto;
margin-top: 15px;
padding태그의 안쪽 여백padding: 10px 5px 20px 30px;
padding: 10px 15px;
padding-top: 15px;
width/height
min-width/min-height
max-width/max-height
태그의 너비와 높이width: 100%;
width: 50vw;
height: 200px;
height: 100vh;
visibility태그가 보일지visibility: visible;
visibility: hidden;
visibility: collapse;
overflow태그 내용이 넘칠 때overflow: hidden;
overflow: scroll;
overflow-x: hidden;
overflow-y: visible;
vertical-align태그 내용의 세로 정렬 방식vertical-align: 15px;
vertical-align: top;
z-index(position이나 opacity가 지정된) 태그의 쌓기 우선 순위z-index: 1;
z-index: 10000;

텍스트 속성

속성설명
text-align텍스트 정렬text-align: center;
text-align: right
word-spacing단어 간격word-spacing: 0.5em;
word-spacing: 5px;
letter-spacing글자 간격letter-spacing: -3px;
letter-spacing: 5px;
line-height줄 간격line-height: 200%;
line-height: 1.5;
line-height: 20px;
text-indent문단 들여쓰기text-indent: 15px;
text-transform영문 대문자/소문자 변형text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
white-space공백과 개행 방식white-space: normal;
white-space: pre;
white-space: nowrap;
word-break개행의 기준word-break: normal;
word-break: break-all;
text-overflow텍스트가 넘칠 때 (overflow: hidden; white-space: nowrap; 과 함께)text-overflow: clip;
text-overflow: ellipsis;
text-decoration텍스트 꾸미기text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
font폰트font: italic bold 12px/30px Georgia, serif;
font: normal 15px "맑은 고딕";
font-family: "Arial Black";
font-style: italic;
font-size: 200%;
font-weight: bold;
font-weight: 900;

크기를 표현하는 단위

단위설명예시
px/pt/in/cm/mm고정된 값으로 표현할 때의 단위width: 300px;
font-size:32pt;
em현재 태그의 계산된 font-size 값을 1로 보는 상대적인 단위width: 10em;
line-height: 1.8em;
rem루트 태그(HTML)의 font-size 속성을 1로 둔 상대적인 단위font-size: 2rem;
vh뷰포트(브라우저 창 크기) 높이의 1/100에 해당하는 상대적인 단위height: 30vh;
height: 100vh;
font-size: 5vh;
vw뷰포트(브라우저 창 크기) 너비의 1/100에 해당하는 상대적인 단위width: 30vw;
width: 100vw;
%기본값에 대한 비율, 또는 최대치에 대한 비율line-height: 200%;
width: 100%;
margin: auto 30%;

CSS 기초

위에서 처럼 태그에 직접 스타일 속성을 줄 수도 있지만, 이런 인라인 방식은 소스코드를 복잡하게 만들고 재사용성을 떨어뜨립니다.
CSS(Cascading Style Sheets)를 이용해 HTML 문서의 스타일 속성에 대한 정보만을 따로 작성 할 수 있습니다.

종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다…(위키백과)

HTML에 CSS를 적용하는 방법은 두가지가 있습니다.

1. style 태그 안에 CSS 작성

<style>
h1, h2, h3 {
    color: red;
    font-size: 2em;
}
.hello {
    color: rgba(100,50,50,0.5);
    line-height: 200%;
}
</style>

2. link 태그로 외부 CSS 파일을 참조

<link rel="stylesheet" type="text/css" href="./some/path/style.css">

CSS 문법

CSS는 스타일의 대상 { 스타일의 속성 및 값들 }의 정의가 반복되는 형식의 텍스트 파일입니다. 이 때 스타일의 대상을 선택자(셀렉터)라고합니다. 선택자는 어떤 요소들에게 스타일을 부여 할 지를 나타냅니다.

Overriding

CSS는 마치 폭포수가 떨어지 듯이 적용됩니다. 태그들은 기본적으로 상위 태그의 스타일 속성을 상속받습니다. 하위 태그에 설정된 중복되는 스타일 속성이 있다면 상위 태그의 내용을 덮어씁니다. 이때 CSS 파일의 뒤에 작성된 스타일일수록, 또 구체적인 선택자(태그명 < 클래스 < 아이디) 일수록 우선 순위가 높게 적용됩니다.

Combinators

위의 선택자들을 조합해서 조금 더 구체적인 태그를 명시 할 수 있습니다.

Attribute, Pseudo

태그의 상태(state)와 속성(attribute) 또한 선택자에 반영 할 수 있습니다.

특수 문법

/* 최상단에 작성하며 해당 CSS 파일의 인코딩을 선언한다. */
@charset "utf-8";

/* 다른 CSS 파일을 로드하는 구문으로 다른 규칙들 보다 먼저 작성해야 한다. */
@import url(../other-style-sheet.css);
@import url(http://some-site.com/other-style-sheet2.css);

/* 폰트 파일을 로드하며 해당 문서에서 사용 할 수 있는 웹폰트를 정의한다. */
@font-face {
    font-family: FontName;
    src: url(./fonts/font-file.ttf) format('opentype');
}

body {
    font-family: FontName, Arial, '돋움';
}

/* (미디어 쿼리) 웹 문서를 읽는 장치의 스크린 환경에 따라서 동적으로 스타일을 정의한다. */
@media (max-width: 500px) {
    background: green;
    ...
}

@media (min-width: 500px) and (max-width: 900px) {
    background: red;
    ...
}

@media (min-width: 900px) {
    background: blue;
}

media query에 대한 더 많은 예시

CSS 라이브러리

시각적인 요소를 바닥부터 직접 설계하는 것은 많은 비용을 필요로 합니다. CSS 라이브러리들을 활용하면 탄탄한 디자인을 손쉽게 구현 할 수 있습니다. 수십 수백의 수 많은 오픈소스 CSS 프레임워크들이 있습니다. 그 중 몇 가지를 아래에 소개합니다.

이름링크
Semantic UIhttps://semantic-ui.com/
Bootstraphttp://getbootstrap.com/
Flat UIhttp://designmodo.github.io/Flat-UI/
Material Design Litehttps://getmdl.io/

Open Source CSS Libraries

Bootstrap 이용해보기

개발자 도구

크롬 개발자 도구크롬 개발자 도구

CSS파일이나 style 속성을 변경할 때마다 웹 페이지를 새로고침하면서 스타일을 잡는 것은 매우 번거로운 작업입니다. 웹 브라우저들은 이러한 작업을 돕는 개발자 도구를 내장하고 있습니다. 크롬 개발자 도구에서는 요소(Element)를 선택하여 실시간으로 스타일 속성을 변경하고, 또 스타일 속성의 상속 관계를 파악 할 수 있는 기능을 제공합니다.

CSS 전처리기

HTML 태그들의 style 속성을 관리하기 위한 문서로 CSS를 도입했으나, CSS가 가진 불편함(작성의 비효율성) 때문에 또 다시 LESS, SASS, Stylus와 같은 문서 포맷이 등장합니다. 이러한 문서 포맷은 CSS 작성에 함수, 변수, 계산식과 같은 기능을 도입하여 코드량을 줄여주고, 또 스타일의 상속 관계를 구조화하기 쉽게 해줍니다. 물론 이러한 문서들도 결국엔 CSS 문서로 변환해야 HTML에서 사용 가능합니다. 이후에 6장 개발과 배포 파트에서 다시 다룹니다.

목차
3. 웹 프론트엔드
4. 웹 백엔드
저자

김동욱

개발 경력 약 10년, 전문 분야는 웹 및 각종 응용 소프트웨어 플랫폼입니다. Codeflow를 운영하고 있습니다.

2018년 04월 09일 업데이트

지원되지 않는 웹 브라우저거나 예기치 않은 오류가 발생했습니다.