기사 소개

이 기사에서는 간단한 CSS에대한 소개를 하겠습니다.

CSS는 페이지의 디자인을 설정하는 역할을 합니다.

저번 강의 까지는 HTML에대해 다루는 강의를 하였습니다.(만약, 아직 처음하는 HTML을 끝내지 않으신분은 처음하는 HTML강의를 끝낸후에 시작하여 주시기 바랍니다.)저번 강의 까지는 주로 내용의 강조나 본문들, 문서의 구조를 정의 하는 방법에 대하여 설명하였습니다. CSS는 페이지의 문자의 종류나 색깔등의 디자인을 설정하는 언어입니다. HTML의 모든 구역에서 작동하는 CSS에 대해서 학습을 해보도록 합시다.

Web페이지 디자인을 설정하는 역할

Web페이지 에서는 단지 문자를 표시하는것 뿐만 아니라, 문자의 서체나 색깔, 도형등의 배치나 색깔등, 유저가 보기 쉽게 디자인 하는 노력도 필요한 어플리케이션입니다. 옛날에는 이하와 같이 HTML의 태그 만으로 설정하기도 했습니다.

<!DOCTYPE html>
<html>
<body>
텍스트1
	<center>텍스트2</center>
	<font color="red">텍스트3</font>
	<font size="13">텍스트4</font>
</body>
</html>

완성소스

이와같이 HTML자체의 디자인에 관한 태그를 넣어버리면 그 문서에 여러가지 설정을 반영하는데 난황을 겪게 됩니다.

예를들어, 컴퓨터에서 표시할 예정의 커다란 화면을 예정했던 페이지가, 스마트폰에서는 예상한 대로의 디자인의 페이지를 표시하지 못하게 돼서 부자연스럽게 문자를 작게 하거나, 부자연스럽게 개행을 넣을 가능성이 있을수도 있다는 것입니다.

이와 같은 경우는 문장의 구조(장、단락, 강조등)와 디자인(색、문자의 크기、폰트등)을 “제외”한다면, 디자인 만을 수정하는 것도 가능하긴 합니다.

이때 도입된것이 디자인을 지정하기 위한 언어「CSS」입니다.

가장 알기 쉬운것이 제가 취미로 만든「프린세스 커넥트 유니언 버스트 재생기」입니다. 버튼의 디자인을 보기좋게 하기 위해서 스마트폰에서 접속할때와 PC에서 접속할때, 서로 버튼의 사이즈를 화면의 디자인과 맞춰서 버튼의 길이를 CSS로 조정하였습니다. 나중에 궁금하시면 확인해 보시는걸 추천합니다.

결과적으로, 이와같이 문서에서 디자인 부분을 분리해서 용도별로 CSS를 적용함으로써 기종별로 최적의 디자인을 표시하는것이 가능해 졌습니다.

Web-처음하는 CSS

프로그래밍 강좌 메인