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

CSS 시작하기

최초 작성일
최종 수정일
이번 시간에는...
일단 CSS를 시작해보기 위해, 기초적인 CSS 문법을 이용하여 기본 HTML 파일에 기본적인 스타일을 넣어 봅니다. CSS 기초 문법과 상속, 기초적인 속성들 font-size, font-weight, color, background-color을 간단히 살펴 봅니다.

이제 CSS를 살짝 살펴볼 차례입니다. 아주 간단히 살펴보겠습니다.

먼저 CSS를 맛보기 전에 아래의 HTML파일을 만들도록 합시다.(복사하셔서 갖다 붙이셔도 됩니다.) 아직 각 태그의 의미는 살펴보지 않았기 때문에 모르는 태그들이 보여도 넘어가시기 바랍니다.

다 작성하셨으면 원하시는 이름의 html파일로 만듭니다. (예: 'abc.html') 그런 다음에 해당 파일을 웹 브라우저로 열어주세요. 예상대로 하얀 바탕에 검은색 글씨가 나열된 모습일 것 입니다.

그럼 이제 새로운 CSS파일을 만들도록 하겠습니다.

아래의 내용으로 임의의 CSS파일을 만들어 주세요. (예: 'test.css')

일단 위의 코드만 봐도 어떻게 바뀔지 감이 오지 않으신가요? 자 위의 CSS파일을 원하시는 이름으로 지으시고 방금 저장하신 html 파일이 있는 같은 위치 폴더에 css파일로 저장을 합니다.

이제 html 파일과 css 파일을 연결하도록 하겠습니다.

아까 저장하셨던 html파일의 head 태그 안에 아래와 같은 코드를 삽입합니다. (5번째 줄)

그리고 저장을 한 뒤, html파일을 웹 브라우저에서 다시 새로 고침을 해보세요. 변화가 생겼습니까? 만약 지금까지 제대로 진행했다면, 여러분의 웹 페이지는 어두운 회색 바탕에 하얀 글씨로 바뀌었을 것 입니다. 혹시 아무런 변화가 없다면 코드를 삽입할 때에 파일 명을 제대로 적었는지, 어디 오타는 없는지 확인해 보세요.

지금까지 순조롭게 진행하셨다면, 이제 CSS가 어떤 방식으로 작성되는지 살펴보겠습니다. 아까 만들었던 CSS 파일을 다시 살펴보도록 하겠습니다.

위에 body 라고 써있는 부분은 body 태그를 가리킵니다. body 태그에 스타일을 주겠다는 뜻으로, 이 부분을 '선택자(Selector)'라고 부릅니다. 이 단락에 나오는 용어는 꼭 기억해두세요. 그리고 {}이 괄호 사이에는 body 태그에 들어갈 스타일 들을 적는 것입니다. 괄호 안에 'background-color:'와 같은 부분은 '속성(Property)'라고 부릅니다. 그러니까 'color:'라고 적힌 부분은 'color 속성'인 것입니다. 그리고 속성의 콜론(:) 오른쪽에는 해당 속성에 대한 값이 들어갑니다. '#333333'이라는 것은 색상에 대한 코드입니다. 그러니까 'background-color' 속성에 '#333333'이라는 색상 코드를 할당한다고 생각하시면 됩니다. 그리고 속성 값의 마지막에는 세미 콜론(;)이 붙어서 다음 속성 값과 구분합니다. 그 다음 'color:white' 역시 글자 색 속성에 'white'라는 하얀색의 값을 할당한 것입니다. (물론 #333333과 같이 색상 코드로도 쓸 수 있습니다. 하얀색의 색상 코드는 #ffffff입니다.)

그럼 위의 코드를 정리하면 아래와 같습니다.

또한 HTML과 같이 임의의 공백이나 줄 바꿈에 대해 자유롭습니다. 때문에 위의 코드는 아래와 같이 쓸 수도 있습니다.

이제 그럼 다른 태그에도 스타일을 줘보도록 하겠습니다.

p태그에 스타일을 주려면 어떻게 해야 할까요. 당연히 아래와 같이 추가 하시면 됩니다.

이렇게 넣으면 p태그의 글자 색이 빨간색으로 바뀌게 됩니다. 그럼 맛보기로 몇 개의 속성을 알아보겠습니다.

글자 속성도표
속성 속성 내용
background-color 배경 색
color 글자 색
font-size 글자 크기
font-weight 글씨 굵기

그럼 이번에는 h1태그에 스타일을 넣어보도록 하겠습니다.

이렇게 넣으면 h1 태그의 글씨는 40px크기의 보라색을 띄고, 두꺼웠던 글씨가 보통 굵기로 변화됩니다. 만약 글씨를 두껍게 하고자 한다면 'font-weight'의 값을 'bold'로 넣어주면 됩니다.

이제 '선택자'에 대해 조금만 살펴보고 이 맛보기는 끝내도록 하겠습니다.

여러분이 만든 html 소스를 보면 p 태그가 body 태그 바로 안에 있는 태그가 있고, div 태그 안에 있는 p 태그가 있는 것을 발견하실 수 있을 겁니다. 현재 모든 p 태그는 빨간 글씨입니다. 만약 여러분이 이 둘을 다르게 스타일을 주고 싶다면 어떻게 해야 할까요. 다음의 코드를 보세요.

선택자를 위와 같이 적어주면 div 안에 있는 p를 찾아서 글자색을 파란색으로 바꿔줍니다. 이렇게 선택자 안에서 띄어쓰기는 해당 태그 안에 태그를 선택하게 됩니다. 이러한 띄어쓰기로 상속관계을 표현하는 것은 앞으로 자주 사용하게 될 것입니다.

이제 HTML, CSS를 맛보는 것은 여기서 마무리를 짓고요, 이제 다음 강의 부터 본격적으로 HTML의 기초부터 시작하도록 하겠습니다. 다음 강의에서 뵈요.

CSS 맛보기 결과물
/attach/demo/intro/intro-css.html
모바일의 경우 새창열기로 확인 가능합니다.
새창열기

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