1장. css 개념 이해

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

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

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

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

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

step-3> 파일 열기

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

step-4> 결과 확인

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

실행 결과

예제 1-2) css 작성과 실행하기

CSS 기본 작성법과 HTML문서에서의 위치와 동작원리등을 살펴보기위한 예제 입니다.

코드 설명

예제 1-3) css 포함 방법 3가지

내부, 외부, 인라인 3가지 방법을 이용해 css 를 html 문서에 포함하는 방법을 살펴봅니다.

코드 설명

2장. 셀렉터와 스타일 속성

예제 2-1) 기본 셀렉터

본 예제에서는 태그, 클래스, 아이디의 세가지 기본 셀렉터에 대해 실습 합니다.

코드 설명

예제 2-2) 기본 셀렉터 조합

셀렉터를 조합해 좀 더 정밀하게 특정 요소를 선택할 수 있습니다.

코드 설명

예제 2-3) 컬러 속성

컬러를 표현하기 위해 색상이름, HEX(#)코드, RGB코드로 나타내는 방식을 실습을 통해 알아 봅니다.

코드 설명

예제 2-4) 텍스트 및 폰트 속성

폰트, 글자크기, 글자 두께, 글자 모양, 글자 정렬등의 텍스트 및 폰트관련 속성 실습 예제 입니다.

코드 설명

예제 2-5) 텍스트 정렬 속성

텍스트를 정렬하는 text-align 속성과 vertical-align 속성을 이용해 이미지와 텍스트를 정렬하는 예제 이니다.

코드 설명

예제 2-6) 링크 속성

다양한 css속성을 사용한 하이퍼링크 실습 예제 입니다.

2-6.html

코드 설명

3장. 박스 모델과 포지셔닝

예제 3-1) CSS 단위

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

3-1.html

코드 설명

예제 3-2) 기본 박스모델

본 예제에서는 css의 박스모델에 대해서 알아봅니다. 파일을 생성하고 박스 모델을 이해하기위해 다음과 같이 padding과 margin값을 설정하여 코드를 작성합니다. 명확하게 확인할 수 있도록 border을 이용해 테두리선 또한 적용합니다.

3-2.html

코드 설명

개발자도구 실행

크롬 브라우저에서 키보드의 F12버튼을 클릭하여 개발자도구를 실행합니다.

박스모델 확인하기

Elements 탭에서 다음과 같이 박스모델을 확인합니다.

5-2결과

예제 3-3) position 설정을 통한 박스 배치

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

3-3.html

코드 설명

예제 3-4) float 속성

float 속성을 이용해 이미지의 높이 영역에 텍스트를 배치하는 예제 입니다.

3-4.html

코드 설명

예제 3-5) display 속성 변경

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

step-1> 소스 코드 작성

<!doctype html>
<html> 
    <head>
        <title>display example</title>
    </head>
    <body>
        <h1>Text-1</h1>
        <p>Text-2</p>
        <a>Text-3</a>
        <span>Text-4</span>
    </body>
</html>

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

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

실행결과

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

h1은 inline 으로 p는 inline-block, a는 block 으로 변경 합니다.

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

3-5.html

코드 설명

예제 3-6) display 속성을 활용한 박스 배치

display 속성으로 다양한 박스를 정의하고 배치하는 실습 예제 입니다.

3-6.html

코드 설명

예제 3-7) 다단 레이아웃 구성

화면의 콘텐츠를 다단으로 구성하는 경우 박스 요소들을 inline-block 으로 지정한 다음 width 의 비율을 조정해 적절하게 컬럼을 분할할 수 있습니다. 예제를 통해 화면 레이아웃 구현을 실습 합니다.

3-7.html

코드 설명

예제 3-8) 박스와 이미지 정렬

3-8.html

코드 설명

4장. 복합 셀렉터

예제 4-1) CSS상속

부모 요소와 자식 요소에 대해 이해하고 상속이 어떻게 이루어지는지 알아보는 예제 입니다.

4-1.html

코드 설명

예제 4-2) 셀렉터 조합

여러 셀렉터를 조합하는 예제를 통해 다양한 셀렉터 활용을 배웁니다. 실제 개발에는 이것보다 훨씬 복잡한 셀렉터 조합이 사용되므로 반드시 모든 소스의 내용을 이해하도록 실습합니다.

4-2.html

간단한 목록을 만들고 셀렉터 조합에 따라 어떻게 동작하는지 확인하도록 합니다.

코드 설명

예제 4-3) 가상 셀렉터

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

step-1> 소스 코드 작성

<!doctype html>
<html>
    <head>
        <title>Virtual Selector Example</title>
    </head>
    <body>

        <h1>Virtual Selector Example</h1>
        <h2>HTML Tutorial</h2>
        <h2>CSS Tutorial</h2>
        <h2>JavaScript Tutorial</h2>

        <div>Show Message - Mouse over..
            <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. 
        </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;
    }

4-3.html

코드 설명

예제 6-1) BS 기초 종합

CDN 을 이용해 Bootstrap css 및 필요한 JavaScript 라이브러리를 포함하고 기본 컴포넌트를 활용해 간단한 로그인 폼을 만들어 본다.

step-1> CDN으로 BS css 및 JavaScript 포함.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <title>BS Login</title>
  </head>
  <body>
    <h1>Bootstrap :: Login</h1>
  </body>
</html>

step-2> 로그인 양식 만들기

HTML form 태그를 이용해 아이디와 비밀번호를 입력하는 로그인 양식을 만듭니다.

  <div>
    <h1>Bootstrap :: Login</h1>
    <hr>
    <div>
        <div>
          <label>User ID</label>
          <input type="text" class="form-control" placeholder="Enter user id or email">
        </div>
        <div>
          <label>Password</label>
          <input type="password" class="form-control" placeholder="Enter password">
        </div>
        <button>Sign in</button>
        <button>Sign up</button>
    </div>
    <hr>
  </div>

step-3> BS 적용하기

먼저 전체 양식이 박스 형태로 나타날 수 있도록 컨테이너 설정을 합니다. 또한 폭을 75%로 설정하고 margin, padding, 배경색, 텍스트 가운데 정렬, 박스 그림자 설정을 하도록 합니다.

<div class="container w-75 my-5 p-5 bg-warning text-center shadow">
</div>

입력양식은 별도의 <div>로 묶여 있으며 다시 적절한 크기로 컨테이너 설정을 합니다. 입력 양식 텍스트는 왼쪽 정렬을 하도록 합니다.

<div class="container w-50 text-left">
</div>

다음 입력요소들은 form-group을 이용해 묶어 줍니다.

마지막으로 입력이 잘못된 경우 출력되는 경고메시지를 alert 을 이용해 만들어 줍니다. 경고메시지는 close 버튼으로 사라지도록 설정 합니다.

최종적으로 수정된 소스와 결과는 다음과 같습니다.

예제 6-2) BS로 레이아웃 잡기

BS Grid 및 유틸리티 클래스를 이용해 다양한 레이아웃을 연습 합니다. 기본 그리드 시스템을 이용해 상단배너, 중앙 왼쪽 메인콘텐츠, 중앙 오른쪽 사이드메뉴, 하단 바닥글로 구성된 레이아웃을 만들어 봅니다.

박스안의 텍스트 정렬은 text-center로 수평정렬을 하고 my-auto 로 top, bottom margin 을 설정해 수직정렬을 합니다. flex 를 사용할수도 있습니다.

Quiz-1) 소스코드 설명 페이지 만들기

이번 문제는 실행 결과와 같은 화면을 그대로 구현해 보는것을 목표로 합니다.

본문에 학과, 학번, 이름 등을 넣고 작성 합니다.

실행 결과

퀴즈1 결과

힌트 보기

  • 화면의 구성요소를 각각 box 로 구성할 수 있도록 클래스를 설계 한다.
  • 제목을 제외 하고 세개의 박스가 필요하며 Example 박스 안에 소스코드 박스가 들어가는 구조.
  • 소스 코드 부분은 <xmp> 태그를 활용.
  • margin, padding, border 등 박스 요소의 속성들을 충분하게 사용.

Quiz-2) 사이드 메뉴 웹페이지 구조 만들기

고정된 사이드 메뉴를 가지는 간단한 웹페이지 구조를 만드는 것이 목표 입니다. 실행결과를 보고 최대한 동일하게 만들어 보도록 합니다.

실행 결과

퀴즈2 결과

힌트 보기

  • 사이드 메뉴는 <ul>,<li> 의 목록으로 구성.
  • 문서 전체를 감싸는 컨테이너가 있어야 작업에 유리함.
  • 본문은 세개의 박스로 구성.
  • 사이드 메뉴를 고정시키기 위해서는 position: fixed 사용.
  • 콘텐츠가 겹칠때 레이어 우선순위 지정을 위해 z-index 사용.

Quiz-3) 부트스트랩 테이블 구조 만들기

부트스트랩의 container, table, button, pagnation등을 이용해 데이터 목록을 보여주는 화면을 만들어 봅니다.

실행 결과

퀴즈3 결과