STS 122::CSS 기초

실습::CSS 기초 통합 실습


이 페이지는 프론트엔드 웹 프로그래밍의 기본이 되는 [STS-122] CSS 기초 강좌의 예제 학습 페이지 입니다. 동영상이 포함된 강좌는 [STS-122][] 에서 보실수 있습니다. 이곳에서는 각 챕터별 예제들과 간단한 프로젝트형식의 종합예제를 정리해서 제공하고 있습니다. 각각의 예제는 github 리파지토리에서 받아가실수 있으며 첨부된 설명에 따라 학습을 진행하면 됩니다. 실습을 위한 모든 환경설정은 공통기초->[STS-103]개발도구 에서 다루었습니다. 따라서 해당학습을 진행하지 않았다면 반드시 먼저 살펴보고 실습을 진행하기 바랍니다.

1. css 개념 이해

예제 1-1) HTML에서 CSS제거해 보기

본 예제에서는 HTML과 CSS의 관계를 이해하고 css를 사용하는 이유를 알아보기 위해 웹 페이지의 소스코드 저장하여 html로만 이루어진 사이트와 css가 적용된 사이트를 비교하여봅니다.

step-1> 웹브라우저 실행하여 url 입력하기

웹 브라우저를 실행하고 상단의 URL 창에 다음 주소를 입력하고 엔터를 칩니다.
- http://www.naver.com

step-2> 소스 코드 다운받기

웹 브라우저 화면에서 오른쪽 버튼을 눌러 다른 이름으로 저장을 선택하여 적당한 곳에 저장합니다.

1-2결과

step-3> 파일 열기

저장을 한 폴더에 가서 확인을 해보면 NAVER_files과 NAVER.html 두 개의 파일이 저장되어 있습니다. 
이 중 NAVER_files을 삭제한 뒤, NAVER.html 파일을 실행시킵니다.

step-4> 결과 확인

html로만 이루어진 NAVER화면과 CSS가 적용되어 있던 기존 NAVER화면을 비교해봅시다.

1-1결과

예제 1-2) css 기본 문법

본 예제에서는 css의 기본적인 문법을 알아보고, html 파일에 적용시켜 스타일을 변경해봅니다.

step-1> 예제 파일 생성 (css-1.html)

다음과 같이 css-1.html 파일을 작성 합니다.

<!doctype html>
<html> 
    <head>
        <style>
            h2 {color: blue;}
        </style>
        <title>css-1.html</title>
    </head>
    <body>
        <h2>css-1.html</h2>
        <hr>
        example css-1.html
    </body>
</html>

step-2> css 소스 코드 작성

다음과 같이 css 코드를 작성합니다. css를 html파일 안에 포함시키기 위해 <head>태그 안에 <style>태그를 넣어주고 그 안에 아래와 같이 코드를 작성하여 <h2>태그의 색깔을 파랑색으로 변경해봅니다. blue가 아닌, 원하는 다른 색으로 넣어주어도 무방합니다.

<head>
    <style>
        h2 {color: blue;}
    </style>
</head>

step-3> 실행결과 확인

브라우저에서 실행결과를 확인 합니다.

1-1결과

예제 2-2) css 포함 방법

본 예제에서는 css를 포함하는 3가지 방법에대해 알아봅니다.

step-1> 소스 코드 작성 (css-2.html)

css-2.html 파일을 생성하고 다음과 같이 소스코드를 작성하여 스타일을 적용 할 문서를 생성합니다.

<!doctype html>
<html>
    <head>
        <title>css-2.html</title>
    </head>
    <body>
        <h2>Inline stylesheet</h2>
        <hr>
        <h2>Embedded stylesheet</h2>
        <hr>
        <h2>External stylesheet</h2>                                 
    </body>
</html>

step-2> 인라인 스타일

인라인 스타일 방식으로 css를 적용시키기위해, 위에서 작성한 css-2.html의 코드를 아래처럼 수정합니다.

<h2 style="color: fuchsia">Inline stylesheet</h2>

step-3> 실행결과 확인

브라우저에서 실행결과를 확인 합니다.

1-1결과

step-4> 내부 스타일시트

내부 스타일시트 방식으로 css를 적용시키기위해 css-2.html의 코드를 아래처럼 수정합니다.

<head>
    <style>
        h2 {
            color: darkorange;
        }
    </style>
</head>

step-5> 실행결과 확인

브라우저에서 실행결과를 확인 합니다.

1-1결과

step-6> css 코드 작성 (css-2.css)

외부 스타일시트 방식으로 포함을 시킬 css파일을 만들기위해, css-2.css파일을 생성하고 다음과 같이 코드를 작성합니다.

h2 {
    color: red;
}

step-7> 외부 스타일시트

css-2.css파일을 외부 스타일시트 방식으로 html 파일에 포함시키기 위해 css-2.html의 코드를 아래처럼 수정합니다.

<head>
    <style>
        h2 {
            color: darkorange;
        }
    </style> 
    <link rel="stylesheet" type="text/css" href="css-2.css">
</head>

step-8> 실행결과 확인

브라우저에서 실행결과를 확인 합니다.

1-1결과

2. 셀렉터와 컬러

예제 2-1) 셀렉터

본 예제에서는 기본적인 셀렉터에 대해 알아봅니다.

step-1> 소스 코드 작성 (css-3.html)

css-3.html파일을 생성하고 id와 class를 이용하여 셀렉터를 사용하기위해 다음과 같이 코드를 작성합니다.

<!doctype html>
<html>
    <head>
        <title>css-3.html</title>
        <style>
            h2 {
                color: darkorange;
            }
            .blue_text{
                color: blue;
            }
            #red_text{
                color: red;
            }
        </style>
        
    </head>
    <body>
        <h2>Embedded stylesheet</h2>   
        <hr> 
        <h2 class="blue_text">Embedded stylesheet - class</h2>                
        <HR>
        <h2 id="red_text">EEmbedded stylesheet - id</h2>                               
    </body>
</html>

step-2> 실행결과 확인

브라우저에서 실행결과를 확인 합니다.

1-1결과

예제 2-2) 색상과 배경색 설정하기

본 예제에서는 css에서 색상을 색상이름, HEX(#)코드, RGB코드로 나타내는 방식을 알아봅니다. 이를 통해 글자의 색과 배경색을 변경해봅니다.

step-1> 소스 코드 작성 (css_4-1.html)

css_3-1.css파일을 생성하고 빨간색을 색상이름, HEX코드, RGB코드의 각 방식으로 적용시키기위해 다음과 같이 코드를 작성합니다.

<!doctype html>
<html>
    <head>
        <title>css_4-1.html</title>
        <style>
            #text1{
                color: red;
            }
            #text2{
                color: #FF0000;
            }
            #text3{
                color: rgb(255,0,0);
            }
        </style>
        
    </head>
    <body>
        <h2 id="text1">Color Name</h2>   
        <hr> 
        <h2 id="text2">HEX(#)</h2>                
        <HR>
        <h2 id="text3">RGB</h2>                               
    </body>
</html>

step-2> 실행결과 확인

브라우저에서 실행결과를 확인 합니다.

1-1결과

step-3> 소스 코드 수정

배경색을 지정하기 위해 css_4-1.html의 코드를 아래처럼 수정합니다.

<style>
    #text1{
        color: red;
        background-color: black;
    }
    #text2{
        color: #FF0000;
        background-color: #000000
    }
    #text3{
        color: rgb(255,0,0);
        background-color: rgb(0,0,0)
    }
</style>

step-4> 실행결과 확인

브라우저에서 실행결과를 확인 합니다.

1-1결과

3. 박스모델

예제 3-1) CSS 단위

본 예제에서는 css에서 사용하는 단위에 대해 알아봅니다. px와 em, rem을 통해 절대 단위와 상대 단위의 차이를 이해합니다.

step-1> 소스 코드 작성 (css-5.html)

css-5.html 파일을 생성하고 css에서의 절대 단위와 상대 단위의 차이를 알아보기위해 다음과 같이 코드를 작성합니다.

<!doctype html>
<html>
    <head>
        <title>css-5.html</title>
        <style>
            #text1{
                font-size: 35px;
            }

            #text2{
                font-size: 2em;
            }

            #text3{
                font-size: 2rem;
            }
        </style>
        
    </head>
    <body>
        <h2 id="text1">px</h2>   
        <hr> 
        <h2 id="text2">em</h2>                
        <HR>
        <h2 id="text3">rem</h2>                               
    </body>
</html>

step-2> 실행결과 확인

브라우저에서 실행결과를 확인 합니다.

5-1결과

step-3> 브라우저 글씨 크기 조정

절대단위와 상대단위의 차이를 알아보기위해 브라우저의 글꼴 크기를 조정합니다.

5-1결과

step-4> 실행결과 확인

브라우저에서 실행결과를 확인 합니다. 아래 결과와 같이 브라우저 글꼴 크기의 변화에 따라 절대단위(px)의 크기는 변하지 않지만, 상대단위(em, rem)의 크기는 변하는 것을 확인 할 수 있습니다.

5-1결과

5-1결과

예제 3-2) 박스모델

본 예제에서는 css의 박스모델에 대해서 알아봅니다.

step-1> 소스 코드 작성 (css-6.html)

css-6.html 파일을 생성하고 박스 모델을 이해하기위해 다음과 같이 padding과 margin값을 설정하여 코드를 작성합니다. 명확하게 확인할 수 있도록 border을 이용해 테두리선 또한 적용합니다.

<!doctype html>
<html>
    <head>
        <title>css-6.html</title>
        <style>
            .box1 {
                width: 100px;
                border-color: purple;
                border-width: 10px;
                border-style: solid;
                padding: 20px 20px;
                margin: 20px 20px;
            }
            .box2 {
                border-color: powderblue;
                border-width: 20px;
                border-style: solid;
                padding: 50px 50px;
                margin: 100px 100px;                
            }
        </style>
        
    </head>
    <body>
        <div class="box1">hello world!</div>
        <div class="box2">hello world!</div>                               
    </body>
</html>

step-2> 실행결과 확인

브라우저에서 실행결과를 확인 합니다.

5-2결과

step-3> 개발자도구 실행

키보드의 F12버튼을 클릭하여 개발자도구를 실행합니다.

step-4> 박스모델 확인하기

ctrl+shift+c를 눌러 요소 선택할 수 있는 기능을 실행합니다. 그 후 박스를 클릭하여 박스모델을 확인합니다.

5-2결과

4. 복합셀렉터

예제 4-1) 상속

본 예제에서는 부모 요소와 자식 요소에 대해 이해하고 상속에 대해 알아봅니다.

step-1> 소스 코드 작성 (css-7.html)

css-7.html 파일을 생성하고 부모 요소와 자식 요소 사이의 상속에 대해 알아보기위해 다음과 같이 코드를 작성합니다.

<!doctype html>
<html> 
    <head>
        <title>css-7.html</title>
        <style>
            div{
                background-color: grey;
                color: whitesmoke;
                padding: 100px;
                font-size: 35px;
                border: 3px solid black;
            }
        </style>
    </head>
    <body>
        <div>
            <p>hello world</p>
        </div>
    </body>
</html>

step-2> 실행결과 확인

브라우저에서 실행결과를 확인 합니다. 아래와 같이 배경색, 글자색, 글씨 크기 등은 상속이 되었지만, padding과 border는 상속되지 않은 것을 확인 할 수 있습니다.

5-1결과

예제 4-2) 조합(연결) 선택자

본 예제에서는 조합 선택자가 무엇인지 알아보고, 여러가지 조합선택자를 사용하며 익혀봅니다.

step-1> 소스 코드 작성 (css-8.html)

예제 4-2는 동네 소식을 담은 뉴스입니다. CSS속성을 적용하기 전에, css-8.html파일을 다음과 같이 작성합니다.

<!doctype html>
<html> 
    <head>
        <title>css-8.html</title>
    </head>
    <body>
        <h1>News</h1>
        <h2>Today 2018.08.21</h2>
        <div>
            <p>Weather</p>
            <p>Sun</p> 
        </div>
        <div>
            <h2>Today Sale</h3>
            <ul>
                <li>Apple</li>
                <li>Milk</li>
                <li>Wallet</li>
            </ul>
        </div>
    </body>
</html>

step-2> 후손 선택자

선택자A 선택자B를 할 경우, 선택자A의 후손인 선택자B가 선택됩니다. 이를 확인해보기위해 css-8.html파일을 다음과 같이 수정합니다.

<style>
    body h1{
        font-weight: bold;
        font-size: 3em;
    }
</style>

step-3> 실행결과 확인

브라우저에서 실행결과를 확인 합니다. 아래와 같이 body아래 있는 h1의 속성이 변경된 것을 확인 할 수 있습니다.

5-1결과

step-4> 자손 선택자

선택자A > 선택자B를 할 경우, 선택자A의 자손인 선택자B가 선택됩니다. 이를 확인해보기위해 css-8.html파일을 다음과 같이 수정합니다.

body > h2{
        color: gray;
    }

step-5> 실행결과 확인

브라우저에서 실행결과를 확인 합니다. 아래와 같이 body의 자손 h2의 속성이 변경된 것을 확인 할 수 있습니다.

5-1결과

step-6> 인접 형제 선택자

선택자A + 선택자B를 할 경우, 선택자A의 가장 가까운 형제요소인 선택자B가 선택됩니다. 이를 확인해보기위해 css-8.html파일을 다음과 같이 수정합니다.

h2+div{
    font-weight: bold;
    border: 2px solid black;
}

step-7> 실행결과 확인

브라우저에서 실행결과를 확인 합니다. 아래와 같이 h2다음에 오는 첫번째 div의 속성만 변경된 것을 확인 할 수 있습니다.

그림 교채해야함. 5-1결과

step-8> 일반 형제 선택자

선택자A ~ 선택자B를 할 경우, 선택자A의 다음에 오는 모든 선택자B가 선택됩니다. 이를 확인해보기위해 css-8.html파일을 다음과 같이 수정합니다.

h2~div{
    background-color: silver;
}

step-9> 실행결과 확인

브라우저에서 실행결과를 확인 합니다. 아래와 같이 h2 다음에 오는 모든 div의 속성이 변경된 것을 확인 할 수 있습니다.

그림 교채해야함. 5-1결과

예제 4-3) 가상 선택자

본 예제에서는 가상 선택자가 무엇인지 알아보고, 여러가지 가상 선택자를 사용하며 익혀봅니다.

step-1> 소스 코드 작성 (css-9.html)

예제 4-3은 가상 선택자를 이용해 다양한 동적 속성을 부여하는 예제 입니다.. css-9.html파일을 다음과 같이 작성합니다.

<!doctype html>
<html>
    <head>
        <title>css-9.html</title>
    </head>
    <body>

        <h1>css-9.html</h1>
        <h2>HTML Tutorial</h2>
        <h2>CSS Tutorial</h2>
        <h2>JavaScript Tutorial</h2>

        <div>Show Message..
            <p><b>Note:</b>This message will show when mouse over "Show Message.."</p>
        </div>
        <hr>

        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </body>
</html>

step-2> before 가상선택자

먼저 before 가상선택자를 이용해 해당 요소 앞에 콘텐츠와 번호를 추가하도록 합니다. 여기서는 h1 태그 앞에 ### 을 추가해 보고 h2 태그에는 태그앞에 Section 1과 같이 순차적으로 증가하는 번호를 넣어 봤습니다.

    body {
        counter-reset: section;
    }

    h1::before { 
        content: '###';
    }
    
    h2::before {
        counter-increment: section;
        content: "Section " counter(section) ": ";
    }

step-3> hover 가상선택자

hover 가상선택자는 특정 요소 위에 마우스가 올려지면 동작할 수 있는 스타일을 지정할 수 있습니다. 이를 이용해 디자인을 변경하거나 콘텐츠를 동적으로 숨기거나 보여줄 수 있습니다. 여기서는 p 태그에 대해 기본적으로 보여지지 않게 display:none 으로 지정하고 div 태그에 마우스가 올라가면 p 를 보여지도록 했습니다.

    p {
        display: none;
    }

    div:hover p {
        display: block;
    }

step-4> 기타 콘텐츠 제어 가상선택자

이번에는 다양한 가상선택자를 활용해 봅니다. 먼저 selection 은 마우스로 콘텐츠를 블럭으로 지정할때 동작하는 스타일을 지정할 수 있습니다. first-letter, first-line 등을 사용해 특정 위치의 텍스트에만 속성이 반영되도록 할 수도 있습니다.

    ::selection { 
        color: red;
        background: yellow;
    }

    .content::first-letter { 
        color: #ff0000;
        font-size: xx-large;
    }

    .content::first-line { 
        color: #0000ff;
        font-variant: small-caps;
    }

step-5> 실행결과 확인

브라우저에서 실행결과를 확인 합니다.

그림 교채해야함. 5-1결과

5. 레이아웃, 인라인블럭

예제 5-1) 인라인 블럭

본 예제에서는 html 요소들의 인라인 레벨과 블록 레벨에 대해 이해하고, 인라인 레벨 및 블록 레벨로 변경하는 방법을 알아봅니다.

step-1> 소스 코드 작성 (css-10.html)

css-10.html파일을 생성하고 각 태그들의 인라인 레벨 및 블록 레벨을 알아보기 위해 다음과 같이 코드를 작성합니다.

<!doctype html>
<html> 
    <head>
        <title>css-10.html</title>
    </head>
    <body>
        <h1>hello world</h1>
        <p>hello world</p>
        <a>hello world</a>
        <span>hello world</span>
    </body>
</html>

step-2> 브라우저에서 확인하기

브라우저에서 실행 결과를 확인 합니다. F12를 눌러 개발자 도구를 실행시키고, 각 요소들에 커서를 가져다대서 요소들이 영역을 어떻게 차지하는지 확인합니다. 아래 결과와 같이 h태그와 p태그는 한 줄을, a태그와 span태그는 각 요소의 너비만큼의 영역을 차지합니다.

7-2결과

step-3> 인라인, 블록 레벨 변경

선택자A 선택자B를 할 경우, 선택자A의 후손인 선택자B가 선택됩니다. 이를 확인해보기위해 css-10.html파일에 다음과 같이 css 를 추가 합니다.

<style>
    h1{
        display: inline;
    }
    p{
        display: inline-block;
    }
    a{
        display: block;
    }
</style>

step-3> 실행결과 확인

브라우저에서 실행결과를 확인 합니다. 아래와 같이 h1, p, a태그의 블록, 인라인 레벨이 변경된 것을 확인 할 수 있습니다.

7-1결과

예제 5-2) 정렬

본 예제에서는 요소들을 정렬하는 방법인 align 속성 및 글자를 정렬하는 text-align 속성 등 요소들을 정렬하는 속성을 알아봅니다.

step-1> 소스 코드 작성 (css-11.html)

css-11.html파일을 생성하고 글자의 정렬과 요소의 배치 지정을 해보기 위해 다음과 같이 코드를 작성합니다.

<!doctype html>
<html> 
    <head>
        <title>css-11.html</title>
        <style>
            p{
                text-align: center;
            }
            img{
                float: left;
            }
        </style>
    </head>
    <body>
        <img src="/assets/img/exam/sample.png">
        <p>lorem50Lorem, ipsum dolor sit amet consectetur ...</p>
        
    </body>
</html>

step-2> 실행결과 확인

브라우저에서 실행 결과를 확인 합니다. 아래 결과와 같이 p태그의 글씨들이 가운데로 정렬되고, 이미지가 다른 요소의 왼쪽에 배치된 것을 확인 할 수 있습니다.

7-2결과

예제 5-3) 포지셔닝

본 예제에서는 position을 통해 html 요소들의 위치를 지정하고 레이아웃을 구성하는 방법을 알아봅니다.

step-1> 소스 코드 작성 (css-12.html)

css-12.html파일을 생성하고 각 요소들에 다른 position 속성을 적용시키기위해 다음과 같이 코드를 작성합니다.

<!doctype html>
<html> 
    <head>
        <title>css-12.html</title>
        <style>
            .position1{
                position: static;
                background-color: orangered;
            }

            .position2{
                position: relative;
                background-color: orange;
                left: 50px;
            }

            .position3{
                position: absolute;
                background-color: olive;
                left: 50px;
            }

            .position4{
                position: fixed;
                background-color: orchid;
                top: 0px;
            }
        </style>
    </head>
    <body>
        <div class="position1">Static</div>
        <div class="position2">Relative</div>
        <div class="position3">Absolute</div>
        <div class="position4">Fixed</div>
    </body>
</html>

step-2> 실행결과 확인

브라우저에서 실행 결과를 확인 합니다. 아래 결과와 같이 p태그의 글씨들이 가운데로 정렬되고, 이미지가 다른 요소의 왼쪽에 배치된 것을 확인 할 수 있습니다.

그림 추가 필요

7-2결과

예제 5-4) 다단구성

화면의 콘텐츠를 다단으로 구성하려고 할때 박스 요소들을 inline-block 으로 지정한 다음 width 의 비율을 조정해 적절하게 컬럼을 분할할 수 있습니다.

step-1> 소스 코드 작성 (css-13.html)

여기서는 3개의 컬럼으로 구성할 것이므로 먼저 div 로 구분된 3개의 콘텐츠 영역을 만듭니다.

    <body>
        <H2>3 column example</H2>
        <HR>
            
        <div class="row">
            <div class="column">
                <h2>Title-1</h2>
                Lorem ipsum dolor sit amet.....
            </div>     
            
            <div class="column">
                <h2>Title-2</h2>
                Lorem ipsum dolor sit amet.....

            </div>     
            
            <div class="column">
                <h2>Title-3</h2>
                Lorem ipsum dolor sit amet.....
            </div>     
        </div>
    </body>

step-2> css 작성

각각의 div 영역을 inline-block 으로 지정해 인라인 속성을 가질 수 있도록해서 나란히 배치할 수 있도록 합니다. 모든 요소들에 대해 박스 크기 계산을 위해 border-box 로 통일하고 각각의 컬럼은 전체 화면 크기의 30% 씩을 차지하도록 설정합니다. @media.. 부분은 화면 크기에 따라 동적으로 디자인을 적용하기 위한 반응형 설정으로 여기서는 600px 이하가 되면 각각의 컬럼의 크기를 100%로 조정해 위아래로 배치될 수 있도록 조정했습니다.

    * {
        box-sizing: border-box;
    }

    .row {
        width: 100%;
    }

    .column {
        display: inline-block;
        width: 30%;
        padding: 15px;
    }

    @media screen and (max-width:600px) {
        .column {
            width: 100%;
        }
    }

step-3> 실행결과 확인

브라우저에서 실행 결과를 확인 합니다.

그림 추가 필요

7-2결과