본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

CSS 초급 정리

최초 작성일
최종 수정일
이번 시간에는...
CSS 초급 과정에서 배운 기초 CSS 선택자와 속성들을 토대로 기초적인 HTML 웹 디자인 템플릿을 만들어 봅니다.

이번 시간에는 그 동안 CSS 초급으로 배워왔던 것을 마무리하고, 정리하는 차원에서 간단한 예제를 만들어 보는 시간을 가지겠습니다. 이번 시간을 통해서 그 동안 배웠던 부분들을 복습하고, 실제로 간단한 페이지 하나를 만들어 보면서 생각지 못했던 부분들도 발견하리라 봅니다. 그리고 소스와 예시를 제공하지만, 여러분들이 직접 작성해서 여러분만의 페이지를 만들어 보는 것이 더 좋으리라 생각됩니다.

우리가 작업할 페이지는 디자인이나 코딩에서 임의로 콘텐츠 내용을 채우기 위해 사용하는 로렘 입숨(Lorem ipsum)에 관한 위키피디아 내용 일부 입니다.

마크 업만 되어있는 모습
이렇게 마크 업만 되어있는 페이지에 CSS를 입힐 것입니다.
CSS가 적용된 모습
이 모습을 완성하는 것이 이번 강의 목표입니다.

예제 준비

일단, 여기 마크 업이 되어있지 않은 원본 페이지를 열어 보세요.

브라우저에서 페이지를 열고 소스 보기를 한 뒤, 전체 소스를 복사하여 여러분의 에디터로 새로운 .html파일을 만듭니다.

마크 업 소스를 강의에 담기에는 소스 분량이 많은 듯 하여, 마크 업 소스를 따로 보여드리진 않습니다. 하지만 전의 HTML 초급도 복습할 겸, 소스를 보고 마크 업이 어떻게 되어있는 지 확인해 보시기 바랍니다.

HTML 파일을 만드셨으면, 연결할 CSS 파일을 만들고 HTML 문서 안에 link 요소로 연결 시킵니다.

CSS 적용

이제 본격적으로 CSS를 작성해 봅시다.

속성을 주는 요소는 보통 다른 요소들을 감싸는 가장 큰 요소와, 공통으로 사용하는 요소를 먼저 주는 것이 작업 상 편합니다.

일단, 이 문서에서 가장 큰 요소는 html과 body 일 것입니다. 저는 body 요소부터 스타일을 주도록 하겠습니다.

일단 브라우저마다 body에 margin이나 padding이 기본으로 들어가는 경우들이 있기 때문에, margin과 padding을 선언했습니다. 또한 font 속성을 이용해서 글씨체와, 크기, 줄 높이를 지정해 주었습니다. 이런 font 속성은 거의 대부분의 요소가 부모로부터 상속을 받기 때문에, body 요소에만 적용해도 대부분의 요소들이 적용됩니다. 여기서 저는 글씨 크기를 px단위로 넣었지만, 100%와 같은 %로 넣기도 합니다.

그 다음으로 전체를 감싸는 div.article 요소에 (article 클래스를 가진 div 요소를 CSS 선택자로 표현했습니다. 앞으로도 이런 식의 표현을 자주 마주치게 될 것입니다.) 스타일을 주도록 하겠습니다.

전체 테두리를 주고 안에 10px의 여백을 주었습니다.

가변적인 디자인을 위해 너비를 주지 않았습니다만, 여러분이 원하는 적당한 너비를 width로 주셔도 좋습니다.

그 다음 div.header에 이미지 패턴을 배경으로 깔겠습니다. 이미지가 로딩되지 못했을 때를 대비하여 비슷한 색상을 같이 넣어줍니다.

그런데 여기까지 하고 나면, 예상치 않은 상,하단의 바깥 여백이 생깁니다. 심지어 div.header에 margin을 0으로 줘도 여백이 있는데요, 이는 안에 div.header 안에 h1 요소가 브라우저에서 기본적으로 margin 값이 할당 되어있기 때문입니다. margin은 이와 같이 바깥 요소가 padding이 0인 상태에서 내부 요소가 margin을 가지고 있을 경우, 마치 바깥 요소의 margin인 것처럼 보여주는 특징이 있습니다.

이를 해결하기 위해서 안에 h1 요소의 margin을 없애고, 글씨 스타일도 주면서 div.header에 padding도 좀 늘리도록 하겠습니다.

여기서 h1의 글자 크기를 em단위로 주었는데요, 크기를 px로 주셔도 상관 없습니다. em은 부모 요소의 글자크기에 따라 상대적으로 변하기 때문에 가변적인 변화를 주기에 좋지만, 그 만큼 글자의 실제 크기를 계산하기는 어렵습니다. px는 반대로 실제 크기를 쉽게 적용하지만, 글씨 크기를 가변적으로 하고자 할 때, 어려워질 수 있습니다.

그 다음 출처는 오른쪽 정렬하고, 글씨 크기를 좀 줄이겠습니다. 다음 실제 본문과의 간격도 좀 더 주고요.

그 다음 출처 링크(a 요소)의 스타일을 주겠습니다.

보통 기본적으로 링크에 대해서는 브라우저가 text-decoration을 할당하여 밑줄로 보여집니다. 하지만 여기서는 text-decoration을 none으로 지우고 대신 border로 처리하여 점선으로 바꿔줬습니다. 이런 식으로 인라인 요소에 border를 활용할 수 있습니다.

그 다음은 시작하는 이미지를 border를 이용해서 마치 액자처럼 보이도록 표현해 보겠습니다.

일단 html에서 img 요소를 div.frame-image 요소로 한 번 감싼 것은 이미지를 가운데 정렬하기 위함입니다. 다른 방법으로도 가운데 정렬을 할 수 있으나, 일단 우리가 배운 부분을 활용해서 하도록 하겠습니다.

일단 div.frame-image에 가운데 정렬과 하단 여백을 추가 했고요, img 요소에 border와 padding을 줘서 마치 액자처럼 보이게 했습니다. 또한 width:200px를 줘서 크기를 조금 줄였는데요, 만약 마크 업에서 img 요소에 width, height 속성이 없을 경우, css로 width만 지정해도 높이는 자동으로 비율에 맞게 계산이 됩니다. 만약 마크 업에서 height 속성 등이 지정되어 있는 경우에는 'heigth: auto'를 주면 됩니다.

그 다음 lorem 원문 부분을 스타일 주도록 하겠습니다. 일단 html 파일에서는 해당 영역들을 div.example로 작성 했습니다.

배경색으로 약한 회색을 깔고, 안에 10px 정도의 여백을 만든 뒤, 글씨체를 'Times New Roman'체로 변경했습니다.

다음은 '유래'라고 적힌 h2 요소입니다.

글씨 크기를 조절하고, 아래 border를 주고, 이전의 본문 간의 간격을 margin으로 줬습니다.

그 아래에 유래 원문이 담긴 또 다른 div.example이 있습니다. 그런데 저는 이 요소는 가운데 정렬을 하고 싶습니다.

그럴 경우에는 해당 요소에 클래스를 더 추가해주시면 됩니다. 다음과 같이요

이와 같이 띄어 쓰기를 이용해서 클래스를 하나 추가 한 뒤, 다음과 같이 css를 넣으면 됩니다.

이렇게 하면, 이 요소는 example의 스타일도 받고, example-origin의 스타일도 받게 됩니다. 이런 식의 클래스 추가는 여러분이 앞으로 작업하면서 자주 있게 될 일입니다.

그 다음으론 나머지 원문 출처 문에 굵게 처리하고, 아래 번역문의 글씨 크기를 조금 줄이는 것으로 마무리 하겠습니다.

그렇게 완성된 페이지가 다음 모습입니다. 모바일이나 페이지가 원활하게 보이지 않으시면 새 창 열기를 통해 확인해 주세요.

CSS 적용 결과
/attach/demo/css-1/article-style.html
모바일의 경우 새창열기로 확인 가능합니다.
새창열기

마무리

이것으로 CSS 초급 챕터를 마무리 하겠습니다. 아직 2열 이상의 레이아웃 배치는 못 하고 순차적인 스타일이긴 하지만, 이것 만으로도 이제 여러분의 페이지의 본문 정도는 꾸밀 수 있게 되셨을 것 입니다.

이 강의가 HTML과 CSS를 교차적으로 다루기로 한 관계로, 이제 다음 챕터로 HTML 중급을 다루면서 보다 깊이 있는 내용으로 찾아 뵙겠습니다.

이 글이 유용하셨다면 친구들에게 공유 해주세요.