Skip to content

Latest commit

 

History

History
231 lines (211 loc) · 10.9 KB

4.css_bootstrap.md

File metadata and controls

231 lines (211 loc) · 10.9 KB
Raw

CSS와 Bootstrap

CSS

CSS?

지난 시간 여러분들은 처음으로 html을 사용해서 웹 페이지의 뼈대를 만들어보았습니다.
하지만 바로 네이버나 트위치 같은 잘 꾸며진 형태를 기대하고 실망하신 분들도 있으리라 생각되는데요.
오늘 CSS를 배우시고 나면 어느정도 해결되지 않을까 생각합니다.

처음 html이 개발되었을 때에는 단순 정보 전달용으로 웹 문서를 만들고 공유했습니다.
얼마 안 가 사람들은 자신들의 페이지가 좀더 매력적으로 보일 필요성을 느꼈습니다.
그들에게는 2가지 선택지가 있었는데요,

  1. 디자인적인 요소를 담당하는 태그를 만드는 것
  2. 새로운 디자인 전용 언어를 만드는 것

처음에는 1번을 선택했습니다. 이에 따라 <strong>, <bold>, <red> 등의 태그들이 생겨났습니다.
하지만 사람들은 곧 이 방식이 코드를 난잡하게 만들고 오히려 웹페이지를 작성할 때 효율을
떨어뜨린다는 사실을 깨닫게 되었습니다.
그래서 처음의 방향을 바꾸어 새로운 디자인 전용 언어인 CSS 를 만들어
디자인적인 부분을 담당하도록 만들었습니다.

CSS 어떻게 써야 하나?

CSS도 하나의 언어이기에 고유의 문법이 있습니다.
이 문법에 맞춰 CSS 파일을 작성해야 합니다. 하지만 너무 걱정하지 마세요! CSS 문법은 정말 간단합니다.
선택자와 선언부분으로 나뉘어지는데요, 밑의 코드 블럭을 보면 바로 이해가 갈거라 생각합니다. 밑의 코드는 a태그의 색깔을 검정색으로하고, 텍스트 꾸밈(밑줄에 해당)을 없애는 코드입니다.

a{                              #선택자 : 무엇에 효과를 줄 것인지
    color : black;              #선언 : 어떤 효과를 줄 것인가 ( 속성 : 값; )으로 이루어짐.
    text-decoration : none;
}

이처럼 선택자를 통해 무엇에 효과를 줄 것 인지 정한 뒤,
선언부에서 속성의 값을 지정해 어떤 효과를 줄 것 인지 설정합니다.
여러가지 속성이 있으니 전부 외우진 않더라도 대표적으로 어떤 것이 있으니 한번은 알아보기 바랍니다.

선택자?

위의 예시에서 여러분은 CSS의 선택자 부분에 태그가 올 수 있음을 알게 되었습니다.
그런데 만약 같은 태그를 여러번 썼는데, 각 다른 효과를 주고 싶으면 어떻게 해야할까요?
혹은 같은 태그들을 그룹으로 나누어 효과를 주고 싶은 경우는 어떻게 해야할까요?
답은 tag에 class 와 id 를 지정해 선택자로 사용하면 됩니다.

<div class="black" id="alpha">div 박스 1</div> 
<div class="red" id="omega">div 박스 2</div>

위와 같이 태그 별로 class와 id를 설정 할 수 있습니다.
class의 경우 한 문서에 여러번 등장할 수 있지만,
id의 경우 하나의 고유한 이름을 한 문서에 오직 한 번만 쓸 수 있습니다. 이들의 이름은 자유롭게 지을 수 있지만 숫자로 시작하면 안됩니다.

CSS는 다음과 같이 적용합니다.
선택자에서 class는 .(class 이름), id는 #(id 이름)과 같이 지정합니다.
위의 코드 블럭을 이용해 예시를 들면,

.black{
    color: black;
}

.red{
    color: red;
}

#alpha{
    font-size: 35px;
}

#omega{
    font-size: 20px;
}

이렇게 설정할 수 있습니다.

HTML에 적용하자

CSS를 HTML에 적용하는 방법에는 크게 3가지 방법이 있습니다.

  1. Inline Style Sheet (태그의 style 속성에 CSS 코드 넣기) 
    <div style="color: blue">야호!</div>
  2. Internal Style Sheet (문서 안의 <style> 태그 안에 CSS 코드 넣기) 
    <style>
   div{
       color: blue;
   }
</style>
  3. Linking Style Sheet (외부에 별도의 CSS 파일을 만들고 <link> 태그를 이용해 연결하는 방법) 
       <link rel="stylesheet" href="style.css">

본인이 생각하기에 상황에 알맞는 방법을 쓰면 되지만 보통 재사용 가능하고 유지, 보수가 쉬운 3번을 선호합니다.
다음 실습을 같이 진행해봅시다 :)

Bootstrap

Bootstrap이 뭐지?

여러분은 CSS를 배움으로 이제 웹페이지를 예쁘게 꾸밀 수 있는 능력을 갖추게 되었습니다!
하지만 아직 익힌지 얼마 안된 CSS를 자유자재로 사용하여 대형포털 사이트처럼 예쁘게 꾸미는 것은 어렵지 않을까요?
혹은 버튼의 세세한 디자인 하나하나 만들어가는 것은 귀찮지 않을까요?
이런 문제를 인식했다면 부트스트랩(Bootstrap) 의 사용을 고려해봅시다!

부트스트랩은 웹사이트를 쉽게 만들 수 있게 돕는 프론트엔드 프레임워크들 중 하나입니다.
하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하며 다양한 기능을 제공하여 사용자가
쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와줍니다.

부트스트랩에 대한 자세한 설명은 부트스트랩 홈페이지를 참조하세요!
이 문서에서는 부트스트랩을 어떻게 사용하고 어떤 기능을 쓸 수 있는지 간단하게 알아볼겁니다.

Bootstrap을 사용해보자!

부트스트랩을 직접 다운받을 수도 있지만 저희는 더 간편하게 부트스트랩 CDN을 활용하여 실습을 진행하겠습니다. CDN은 멀리 있는 사용자에게 컨텐츠를 더 빠르게 제공할 수 있는 기술인데요, 사용자가 Origin Server로부터
Content를 다운받는 대신, 사용자와 가까운 곳에 있는 Cache Server로부터 Content를 가져오는 방법입니다. 보다 자세한 설명은 여기를 참고하세요
아래의 코드를 파일에 추가하면 부트스트랩이 제공하는 CSS를 사용할 준비가 끝나게 됩니다

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

저희는 부트스트랩에서 제공하는 navbar와 버튼들을 한번 살펴보도록 하겠습니다.

먼저 모바일 지원을 위해 viewport에 대한 설정을 해줍니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

Navbar 만들기

먼저 navbar부터 만들어 보겠습니다. div의 class를 navbar navbar-default, navbar navbar-inverse등으로 설정하여 navbar의
형태를 잡을 수 있습니다. 그리고 내부에 container를 만들어 그 안에 내용물을 집어 넣습니다.
container는 부트스트랩에서 사이트 콘텐츠를 감싸고 반응형 레이아웃을 만들기 위한 요소입니다.
안의 내용물이 사용자 기기의 화면에 따라 다르게, 반응형으로 제공됩니다.

<body>
    <div class="navbar navbar-inverse">
        <div class="container">
        
        </div>
    </div>
</body>

container 안에 로고를 넣을 navbar-header를 div 태그로, 메뉴를 나타낼 부분을 ul 태그로 지정합니다.

<body>
    <div class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header"></div>
            <ul class="nav navbar-nav"></ul>
        </div>
    </div>
</body>

<a>태그를 이용하여 브랜드 이미지나 이름을 누르면 다른 홈페이지로 이동하게 만들어봅니다.
브랜드 이미지는 부트스트랩에서 제공하는 아이콘을 사용해보겠습니다.
더 다양한 아이콘을 여기를 참고해주세요
메뉴는 <ul> 태그 안에 <li>와 <a>를 조합하여 만들어둡니다.
하나의 <li>에는 active를 클래스로 주어 현재 해당 메뉴에 있는 느낌이 나게 해 보았습니다.

<body>
    <div class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <a href="http://haedal.io/" class="navbar-brand">
                    Haedal Programming
                    <i class="glyphicon glyphicon-cloud"></i>
                </a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">메뉴1</a></li>
                <li><a href="#">메뉴2</a></li>
                <li><a href="#">메뉴3</a></li>
                <li><a href="#">메뉴4</a></li>
            </ul>
        </div>
    </div>
</body>

Button 만들기

navbar 밑에 버튼들을 구현해보겠습니다. container를 하나 만들고 그 안에 버튼들을 구현합니다. Bootstrap에서 제공하는 버튼들은 class명으로 btn btn-default등의 형태로 구현 가능합니다.

<div class="container">
    <button class="btn btn-default">Default</button>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-danger">Danger</button>
</div>

Bootstrap 실습 코드 전체입니다.
해당 강의는 정말 맛보기만 진행한 것이고 이 외에 다양한 기능들을 제공하니,
관심 있으신 분들은 Bootstrap 홈페이지를 보시고 더 배워가는 것도 좋다고 생각합니다 :)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Pr</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
    <div class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <a href="http://haedal.io/" class="navbar-brand">
                    Haedal Programming
                    <i class="glyphicon glyphicon-cloud"></i>
                </a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">메뉴1</a></li>
                <li><a href="#">메뉴2</a></li>
                <li><a href="#">메뉴3</a></li>
                <li><a href="#">메뉴4</a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <button class="btn btn-default">Default</button>
        <button class="btn btn-primary">Primary</button>
        <button class="btn btn-success">Success</button>
        <button class="btn btn-info">Info</button>
        <button class="btn btn-warning">Warning</button>
        <button class="btn btn-danger">Danger</button>
    </div>
</body>
</html>