[생활코딩] CSS 배우기

1. CSS 등장 이전의 상황

HTML이 등장하여 문서를 만들 수 있게 된 이후, 많은 불평이 있었다. 

• 문서의 글꼴 변경하기,
• 문자의 크기와 색상 변경하기,
• 가운데 정렬하기,
• 문서에 배경 색상 넣기,
• ...

웹페이지를 아름답게 꾸미기 위해 사람들은 두 가지 갈림길에 들어섰다.

1. 쉽지만 한계가 있는 해결책
2. 어렵지만 근본적인 해결책

즉, HTML에 디자인과 관련된 새로운 태그를 추가하는 것과 디자인에 최적화된 새로운 언어를 만드는 것 중에서 고민했다. 둘 중에 전자의 방법이 더 쉬울 것이다. 하지만 전자의 방법을 해본 결과, 한계를 깨닫고 후자의 방법을 택하기로 한다. 이렇게 탄생한 것이 CSS이다.

전자의 방법으로 추가된 태그가 <font>이다. 이 글 이후로 CSS에 대해 배울 때에는 모두 기억을 지우면 된다.

 

<font>

만약 글자 색상을 빨간색으로 바꾸고 싶다고 한다면 아래와 같이 입력하면 된다.

<font color="red">HTML</font>

이전에는 검정색의 폰트만 나타낼 수 있었으나, font 태그가 생긴 이후로 다양한 색상의 폰트를 나타낼 수 있게 되었다.

 

문제점 1

하지만 font 태그는 웹에 대해서 어떠한 정보도 가지고 있지 않다. 오직 빨간색으로 표현해야 한다는 디자인에 대한 정보만 가지고 있다.

웹페이지 정보가 아닌, 디자인에 대한 정보가 섞이면서 웹페이지가 정보로써의 가치가 떨어지게 되었다.

 

문제점 2

또한 위 코드에서는 <a> 태그가 4개 있지만, 만약 <a> 태그가 1억개 있다고 가정해보자. 만약 이 <a>태그를 모두 파란색으로 변경하고 싶다면 일일이 코드를 입력하여 변경해야만 한다.

이러한 상황을 극복하게 해주는 것이 바로 CSS 이다!

 

2. CSS의 등장

태그를 추가하는 것보다 근본적인 해결책인 CSS가 등장하였다.

CSS 사용하기

이전 글에서는 font 태그를 이용하여 글자의 색상을 변경해보았다. 이를 CSS에서 변경해보자. 먼저 우리는 웹브라우저에게 CSS 코드를 작성할테니 작성되는 코드를 HTML이 아니라 CSS 문법에 따라 해석해야 한다고 알려주어야 한다. 즉, style 태그를 이용한다. style 태그는 html의 문법인 동시에 "style 속 내용은 CSS이니까 CSS 문법에 맞게 처리해!"라는 의미를 담고 있다.

아래 CSS 코드를 보고 얼마나 효율적으로 작성할 수 있는지 보자! 코드를 추가하면 font 태그를 추가하여 작성한 코드와 똑같이 동작하게 된다.

<style>
   a {
      color:red;
   }
</style>

 

CSS의 장점

만약 글자의 색상을 black으로 변경하고 싶다면 color:black;으로 변경해주면 모든 글자가 black으로 변경된다. 엄청 간편하다!

즉, CSS는 중복을 제거할 수 있게 된다.  중복을 제거하게 되면, 웹페이지의 사이즈를 줄일 수 있다.  또한 같은 성격의 태그들을 묶어 작성하게 되므로 코드의 가독성도 높아진다.

또한 이제 html의 코드 안에는 디자인과 관련된 코드들은 남아있지 않게 된다. 디자인과 관련된 코드들은 모두 <style> 태그에 들어가기 때문이다. 따라서 웹페이지를 해석하는 기계들은 <style>을 무시하고 정보만 가지고 있는 코드만 읽고 분석할 수 있게 된다.

즉, HTML이 정보에 전념하기 위해 디자인의 기능을 모두 앗아 온 것이 바로 CSS이다. 또한 CSS를 이용하여 웹을 디자인하는 것이 HTML보다 더 효율적이다.

 

3. CSS의 기본 문법

CSS를 이용해 웹페이지를 디자인하기 위해서는 웹브라우저에게 어느 범위까지가 CSS인지 알려주어야 한다. 두 가지 방법이 있는데,

1. <style> 태그를 이용하는 것이고,
2. style 속성을 이용하는 것이다.

 

style 속성 사용하기

아래와 같이 작성해보자.

<li><a href="2.html" style="color:red">CSS</a></li>

웹브라우저에서 style속성의 값은 CSS 문법에 따라 해석하고 style속성이 위치하고 있는 태그에 적용해준다.

<style> 태그의 방법을 이용하게 되면 속성을 특별한 어느 태그에만 적용하고 싶을 경우에 a { 코드에 추가적으로 작성하게 되는 불편함이 있다. 따라서 웹페이지에서 우리가 작성한 디자인을 누구에게 줄 것인지 선택한다는 점에서 선택자(selector)라고 부른다. 그리고 선택자에게 줄 디자인을 선언(declaration)이라 한다.

 

style 태그 사용하기

style 태그를 사용하여 위의 웹페이지 이미지와 같이 글자에 밑줄을 없애고 싶은 경우 아래와 같이 코드를 입력하면 된다.

    <style>
        a {
            text-decoration: none;
        }
    </style>

텍스트를 꾸미는 모든 디자인을 없애는 코드이다.

또한 CSS 코드 한 줄을 입력할 때마다 세미콜론(;)을 입력해야 한다. style속성에서도 마찬가지이다.

    <li><a href="2.html" style="color:red; text-decoration:underline;">CSS</a></li>

 

4. CSS 이론 정리

• Selector : 모든 a태그를 선택한다
• Declaration : 선택자가 지정한 태그들에 대해 줄 디자인
• Property : 속성
• Value : property의 값

 

5. CSS 속성을 스스로 알아내는 방법

h1의 글자 크기를 키우고 가운데 정렬을 하고 싶다. 먼저 css text size property 검색해보자.

CSS font-size property

font-size 속성을 이용하여 글자 크기를 조절할 수 있다.

다음은 css text center property 를 검색해보자.

css text center property - Google 검색

text-align 속성을 이용하여 글자를 정렬할 수 있다.

결과

이와 같이 원하는 디자인이 있을 때, 모든 property를 암기할 필요 없이 검색을 통해 쉽게 알아낼 수 있다. 또한 코드의 자동완성 기능을 통해 기계의 도움도 받을 수 있다.

 

 

6. CSS 선택자를 스스로 알아내는 방법

아래 기능들을 구현할 것이다.

• 웹페이지의 모든 링크는 검정색
• 사용자가 방문한 적이 있는 링크는 회색
• 현재 방문 중인 링크는 빨간색

 

class 선택자 (.)

두 태그에 class="saw"를 포함하고 이의 색을 gray로 설정하고 싶은 경우, saw는 웹페이지에 있는 모든 saw 이름의 태그를 디자인하는 것이다. 따라서 saw라고 입력하면 지정되지 않는다. class 이름이 saw인 태그들을 불러오고 싶은 경우 .saw와 같이 .을 붙이기로 약속되어 있다.

    <style>
    	a {
            color:black;
            text-decoration: none;
        }
        .saw {
            color:gray;
        }
    </style>



...



  <ol>
    <li><a href="1.html" class="saw">HTML</a></li>
    <li><a href="2.html" class="saw">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>

또한 우리는 현재 접속중인 CSS 페이지 글자를 빨간색으로 나타내고 싶다.  그런 경우 태그에 띄어쓰기를 이용해 여러 class를 입력하면 된다.

    <style>
        a {
            color:black;
            text-decoration: none;
        }
        .saw {
            color:gray;
        }
        .active{
            color:red;
        }
    </style>


...


<li><a href="2.html" class="saw active">CSS</a></li>

 

 

id 선택자 (#)

위 태그는 두 개의 클래스에 영향을 받고 있는데, 이는 좋은 방법이 아니다. 위의 태그가 빨간색으로 나타나는 이유는 코드가 순서대로 읽히기 때문이다. 즉, 더 가까이 있는 명령이 더 큰 영향력을 가진다는 것이다. 따라서 좀 더 우선순위를 둬보자.

id를 이용하면 우선순위를 둘 수 있다. 왜 id 선택자가 우선순위가 가장 높을까? id 선택자는 태그 하나에만 사용할 수 있다. 즉, 중복될 수 없는 유일무이한 것이다. 따라서 id 선택자가 class 선택자보다 더 좁고 구체적인 것이므로 우선순위가 높은 것이다.

현재 아래 코드는 #active 가 태그로부터 더 멀리 위치해 있지만, 결과는 빨간색으로 나온다.

    <style>
        a {
            color:black;
            text-decoration: none;
        }
        #active{
            color:red;
        }
        .saw {
            color:gray;
        }
    </style>
    
    
    ...
    
    
	<li><a href="2.html" class="saw" id="active">CSS</a></li>

• 우선순위 : id > class > 태그
• 동일한 선택자의 경우, 가장 마지막에 등장하는 선택자가 우선순위가 높다

 

스스로 공부해보기

이제 css selectors를 검색하여 선택자 종류에 대해 스스로 공부해보자!

CSS Selectors Reference

 

 

7. 박스모델

현재 웹페이지에서 h1 태그의 제목은 자동으로 줄바꿈이 되지만, p 태그에서 a 태그를 이용해 하이퍼링크를 넣는 경우에는 줄바꿈이 되지 않는다. 왜 그럴까? 이에 대해 자세히 보기 위해 h1 태그의 크기를 살펴보자.

아래와 같이 코드를 작성하고 결과를 보자. 추가한 코드는 h1와 a 태그의 크기를 보는 코드이다.

<!doctype html>
<html>
<head>
    <title>WEB1 - CSS</title>
    <meta charset="utf-8">
    <style>
        h1 {
            border-width:5px;
            border-color:red;
            border-style:solid;
        }
        a {
            border-width:5px;
            border-color:red;
            border-style:solid;
        }
    </style>
</head>
<body>
  <h1>CSS</h1>
  <p>
    Cascading Style Sheets (<a
    href="https://www.w3schools.com/css/">CSS</a>) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
  </p>
</body>
</html>

h1 태그는 화면 전체를 사용하여 부피를 차지하지만, a 태그는 화면 전체를 쓰지 않고 자신의 크기만큼 부피를 차지한다는 것을 알 수 있다.

따라서 html의 태그들은 일반적인 쓰임에 따라 화면 전체를 사용하는지, 자기 크기만큼 사용하냐에 따라 부피를 차지한다. 여기서 화면 전체를 사용하는 태그를 블럭(block), 즉 block level element이라 부르고, 자기 자신의 크기만큼 사용하는 태그를 inline element라 부른다.

하지만 inline element를 block처럼, block level element를 inline처럼 사용할 수 있다.

display:inline;
display:block;

즉, 이는 display의 기본값일 뿐, 이 기본값은 우리가 CSS를 통해 언제든지 변경할 수 있다. 필요에 따라 태그를 안보이게 하고 싶은 경우에는 display:none; 이라 작성하면 보이지 않게 된다.

현재 가장 위의 코드에서는 h1와 a 태그에 중복이 있다. 이런 경우 아래와 같이 콤마(,)를 이용하여 선택자의 중복 요소들을 줄일 수 있다.

    <style>
        h1, a{
            border-width:5px;
            border-color:red;
            border-style:solid;
        }
    </style>

또한 border-글자도 중복되고 있다. 위 코드를 아래로 작성하여 중복을 줄일 수 있다. 순서는 아무렇게나 작성하면 알아서 적용된다.

    <style>
        h1, a{
            border:5px solid red;
        }
    </style>

 

패딩(padding), 마진(margin)

현재는 content와 테두리 사이에 간격이 없다. 사이 간격을 주고 싶은 경우 padding 속성을 주면 된다.

<!doctype html>
<html>
<head>
    <title>WEB1 - CSS</title>
    <meta charset="utf-8">
    <style>
        h1{
            border:5px solid red;
            padding:20px;
        }
    </style>
</head>
<body>
  <h1>CSS</h1>
  <h1>CSS</h1>
</body>
</html>

테두리와 테두리 사이 간격을 줄이고 싶다면, margin을 이용하면 된다.

<!doctype html>
<html>
<head>
    <title>WEB1 - CSS</title>
    <meta charset="utf-8">
    <style>
        h1{
            border:5px solid red;
            padding:20px;
            margin:0px;
        }
    </style>
</head>
<body>
  <h1>CSS</h1>
  <h1>CSS</h1>
</body>
</html>

또한 현재 h1 태그는 display:block;이 기본값으로 설정된 상태이다.

여기서 width:100px; 를 주게 되면 100px의 크기만큼 태그의 크기가 변경된다.

<!doctype html>
<html>
<head>
    <title>WEB1 - CSS</title>
    <meta charset="utf-8">
    <style>
        h1{
            border:5px solid red;
            padding:20px;
            margin:20px;
            display:block;
            width:100px;
        }
    </style>
</head>
<body>
  <h1>CSS</h1>
  <h1>CSS</h1>
</body>
</html>

 

개발자 도구 이용하기

개발자도구 > Styles를 통해 h1 태그에 적용되고 있는 CSS 스타일의 속성들을 볼 수 있다. 나중에 복잡한 코드를 작성하게 되었을 때, 해당 태그가 어떤 CSS 스타일에 영향을 받고 있는지 알 수 있다. 이처럼 도구를 이용하여 다른 사람들이 만든 웹페이지도 잘 살펴볼 수 있다.

 

 

8. 그리드 기본 사용법

아무 의미 없는 태그

디자인 목적을 위해 아무 의미가 없는 태그

• div 태그
  • display: block;
• span 태그
  • display: inline;

 

grid

grid를 사용하면 동일한 column에 띄울 수 있다.

• display:grid;
• grid-template-columns: 150px 1fr;를 입력하게 되면 column으로 grid를 사용하게 된다는 것인데, 여러 태그를 동일한 column에 공간을 나눠 표현하겠다는 것이다.
  • 화면 전체를 사용하는 방법. 2fr 1fr로 지정하게 되면 화면 전체를 3fr로 가정하고 화면 비율을 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #grid {
            border:5px solid pink;
            display:grid;
            grid-template-columns: 150px 1fr;
        }
        div {
            border:5px solid gray;
        }
    </style>
</head>
<body>
    <div id="grid">
        <div>NAVIGATION</div> 
        <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque nemo ab inventore laboriosam iusto accusantium rerum distinctio aspernatur provident. Animi tenetur officiis aliquam vero adipisci illum, earum corporis cupiditate tempore!</div>
    </div>
</body>
</html>

결과

 

can i use

현재 웹브라우저들이 얼마나 기술을 채택하고 있는지 통계를 보여주는 서비스

Can I use... Support tables for HTML5, CSS3, etc

초록색이면 사용할 수 있다는 의미. Opera Mobile의 12~12.1 버전인 경우 사용할 수 없다. 현재 95.12% 웹페이지에서 사용 가능하다.

 

 

9. 반응형 디자인과 미디어 쿼리

반응형 디자인

화면의 크기에 따라 웹페이지의 각 요소가 반응하여 최적화된 모양으로 바뀌는 것

 

목표

화면 크기가 800px인 경우에 글자가 사라지는 웹페이지 만들기

 

미디어 쿼리

@media(조건) { 변경할 내용 } 형태로 입력하면 된다.

 

코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            font-size:60px;
            border:10px solid green;
        }
        /* screen width > 800px */
        /* @media(min-width:800px) {
            div{
                display:none;
            }
        } */
        /* screen width < 800px */
        @media(max-width:800px) {
            div{
                display:none;
            }
        }
    </style>
</head>
<body>
    <div>
        Responsive
    </div>
</body>
</html>

화면 크기가 800이하인 경우.

화면 크기가 800이상인 경우, 글자가 사라진다.

 

10. CSS 코드의 재사용

각 페이지의 중복되는 CSS 코드들을 줄일 수 있다. 모든 html 파일에서 <style> 태그를 제거하고, style.css 파일에 <style>태그 속 내용을 넣는다. 그리고 모든 html 파일 속 <style> 태그가 있던 위치에 아래와 같은 link 태그를 작성한다.

<link rel="stylesheet" href="style.css">

이렇게 작성하게 되면 웹페이지가 이전과 결과가 동일하다.

이제 파일이 몇개가 있던지 css파일만 수정하면 모든 페이지를 수정할 수 있다. 또한 코드의 양이 줄었으므로 웹브라우저에서 다운받는 파일의 크기가 적어져서 인터넷 사용료를 덜 낼 수 있다 !

 

캐시(Cache)

style.css 파일을 따로 두었다고 해서 style.css 파일을 다운로드 받지 않는다는 것은 아니다. 개발자 도구 > Network 를 보면, 현재 우리가 보고 있는 1.html 파일을 리로드했을 때 내부적으로 어떤 파일들을 웹서버에서 다운로드 받는지 보여준다.

보시다시피 1.html을 찾았고, 이의 웹브라우저가 해석하면서 link태그를 만나 style.css를 다운받아 웹페이지에 적용한 것이다. 이처럼 하나의 웹페이지에서 여러 개의 파일을 별도로 바깥에 두고 다운로드 받는 것과 그냥 웹페이지 안에 css 파일을 내장하는 것 중에서 네트워크 측면에서는 후자가 더 효율적이다.

하지만 캐싱이라는 것이 있다.

우리가 한 번 style.css를 다운로드 받았다면, css파일이 바뀌기 전까지 웹브라우저는 우리의 컴퓨터에 저장해놓았다가 style.css 파일을 요청할 때마다 저장된 결과를 가져온다. 네트워크를 쓰지 않기 때문에 속도를 높일 수 있고, 사업자는 네트워크 사용료를 적게 낼 수 있다. 따라서 전자의 방법이 더 효율적이다.

 

전체 코드

style.css

a {
    color:black;
    text-decoration: none;
}
h1 {
    font-size:45px;
    text-align:center;
    border-bottom:1px solid gray;
    margin:0px;
    padding:20px;
}
ol{
    border-right:1px solid gray;
    width:100px;
    margin:0px;
    padding:20px;
}
body {
    margin:0;
}
#grid{
    display:grid;
    grid-template-columns: 150px 1fr;
}
#grid ol{
    padding-left:33px;
}
#grid #article {
    padding: 25px;
}
/* screen width < 800px */
@media(max-width: 800px) {
    #grid {
        display:block;
    }
    ol {
    border-right:none;
    }
    h1 {
        border-bottom:none;
    }
}

1.html

<!doctype html>
<html>
<head>
    <title>WEB1 - CSS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <div id="grid">
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ol>
      <div id="article">
        <h2>HTML</h2>
        <p>
            HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
        </p>
      </div>
  </div>
</body>
</html>