STS 122::CSS 기초

1. CSS 개념이해


본 강좌에서는 CSS의 기본 개념과 구조, 문법등을 다룹니다. CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술로 잘 설계된 css 는 재활용이 가능하며 나아가 테마, 템플릿의 형태로 확장할 수 있습니다. 또한 자바스크립트와 연계해 콘텐츠의 내용이나 디자인을 동적으로 처리할 경우에도 유용하게 사용됩니다.

이 강의를 통해 왜 CSS를 사용하는지 이해하고 HTML에서 CSS를 사용하기 위한 세가지 포함 구조를 자유롭게 활용할 수 있습니다.


01: CSS 란?

CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념입니다. HTML이 텍스트나 이미지, 표 같은 각 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면 CSS는 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당합니다.

css_1-1

동영상 강좌

참고 자료

퀴즈

1) CSS는 무엇의 약자인가요?

해답보기

  • Cascading Style Sheet

2) HTML에 CSS를 추가할 때, 웹 페이지에서 달라지는 점은 무엇입니까?

해답보기

  • 레이아웃
  • 디자인



02: 사용 이유

내용과 디자인이 구분되어 있기 때문에 웹 페이지의 내용을 수정해야 할 때도 디자인에 전혀 영향을 미치지 않고 내용만 수정할 수 있습니다. 또한, 기존 HTML 문서는 웹 브라우저 화면을 기본으로 하기 때문에 각 기기에 맞는 브라우저에 적합하게 문서를 만들어야 했습니다. 하지만 CSS는 내용은 그대로 두고 대상 기기에 맞게 CSS만 바꾸어 주면 같은 내용을 여러 기기에 맞추어 볼 수 있습니다.

css_1-2

동영상 강좌

참고 자료

퀴즈

1) CSS를 사용하는 이유는 무엇입니까?

해답보기

해상도가 다른 화면과 장치들의 웹 페이지에 레이아웃을 구성하고, 스타일을 입히기 위해서



3. 기본 문법

CSS는 선택자와 선언부로 구성됩니다. 선택자는 스타일을 지정할 HTML 요소를 가리킵니다. 선언에는 CSS 속성 이름과 값이 포함됩니다. 속성이 여러 개일 경우, 한 줄로 나열해도 상관없지만 여러 줄에 걸쳐 작성하는 것이 좋습니다.

css_1-3

동영상 강좌

참고 자료

퀴즈

1) h1 태그 색상을 초록색으로 설정하는 CSS코드를 쓰시오.

해답보기

h1 { color: green; }

2) 1번 코드에 폰트가 ‘Gothic’인 스타일을 추가하시오.

해답보기

h1 {
    color: green;
    font-family: Gothic;
}



04: CSS 포함 방법

HTML 문서에 CSS를 포함하는 방법에는 내부 스타일시트, 외부 스타일시트, 인라인 스타일 등 총 3가지 방법이 있습니다.

css_1-4

1) 내부 스타일시트

<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>

2) 외부 스타일시트

<link rel="stylesheet" type="text/css" href="mystyle.css">

3) 인라인 스타일

<h1 style="color:blue; margin-left:30px;">This is a heading</h1>

동영상 강좌

참고 자료

퀴즈

1) CSS포함방법 3가지를 쓰시오.

해답보기

  • 내부 스타일시트
  • 외부 스타일시트
  • 인라인스타일

2) 외부 스타일시트의 장점은 무엇입니까?

해답보기

외부 스타일 시트를 사용하면 하나의 파일만 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다.

05: 실습 예제

기본 실습은 통합실습페이지에서 한꺼번에 다루고 있습니다. 아래의 링크를 클릭하면 새창(탭)이 열리고 해당 예제로 이동하게 됩니다.

06: 참고 자료