👁‍🗨 들어가며

웹이 태어난 직후에 HTML에는 디자인을 위한 코드가 대거 추가됩니다. 무분별하게 추가된 디자인 기능은 정보로서의 웹이라는 가치를 오히려 퇴보시킵니다. 이를 극복하기 위해서 웹을 만드는 사람들은 디지털 정보의 세계를 완전히 바꿔놓을 기술을 궁리하기 시작하는데...

CSS의 등장, 어떤 효용이 있을까?

1. 중복의 제거라는 폭발적인 효과가 일어난다. 거대한 기업의 경우 중복된 코드가 있느냐, 없느냐는 중요한 문제가 될 수 있다.
2. 코드가 의미있게 정돈된 것이므로, 유지보수에도 좋고 가독성이 생긴다.
3. 정보를 표현하는 html과 디자인을 위한 css가 분리되어 있다.

👩‍🏫

1. CSS 삽입 방법

1.1. style 태그

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

style 태그 안에 들어가는 것이 css 코드라는 것을 html 문법으로 설명한 것이다. 어디에 적용할 것인가를 나타내주는 선택자(Selector)가 필요하고, 안에 효과(Declaration)가 들어간다. 효과를 지정한 다음에는 세미콜론으로 마무리한다.

1.2. style 속성

<a href="http://naver.com" style="color:red; text-decoration:underline">NAVER</a>

style이라는 속성을 쓰면 속성의 값을 웹브라우저는 css의 문법에 따라 해석해서 그 속성이 위치한 태그에 적용한다. 이 경우, 선택자가 필요없다. style 속성 안에는 css 효과가 들어와야 한다.

CSS의 property와 다양한 selector를 검색을 통해 알아가는 과정을 살펴보자!

2. CSS 속성 알아내기

🔎 css text size property

🔎 css text center property

<style>
	h1 {
        font-size: 45px;
        text-align: center;
      }
</style>

자, 이래도 모든 property와 value를 외울 것인가? 뇌를 혹사하지 않은 시대다.

⚡ 재미있지 않나요? 재미없으면 자기 손해예요.

3. CSS 선택자

클래스

그룹핑하다. 하나로 묶는다는 뜻이 있다. 학창시절 반을 나누던 걸 떠올리면 쉽다. 의도에 따라 같은 성격을 가진 요소들을 그룹핑하는 것이다.

#active {
      color:red;
    }
    .saw {
      color:gray;
    }
    a {
      color:black;
      text-decoration: none;
    }

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

• 클래스 속성에는 여러 개의 값이 들어올 수 있고 띄어쓰기로 구분한다.
• 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다. 종류가 같다면 보다 가까이에 있는 명령이 더 큰 영향력을 갖는다.(순서) class="saw active"를 넣었을 때, 그 차이를 알 수 있다.

ID 선택자 > 클래스 선택자 > 태그 선택자

id의 값은 단 한번만 등장해야 한다. 고유한 값이다. 그러므로 ID선택자가 더 구체적이다. 포괄적인 것보다 구체적인 것의 우선순위를 높였다. 전체적인 디자인을 하고 예외적인 것은 ID로 선택해서 하는 것이 더 효율적이라고 생각했기 때문이다.

🔎 Css selector

선택자를 표현하는 다양한 방식에 대해서 나온다.
.class #id * element element, element element element element>element 이렇게나 다양하다. 이걸 보니 html에서 내가 쓰려는 콘텐트들을 어떤 태그로 묶어주느냐도 굉장히 중요할 것 같다. 아직은 좀 막막하다.

4. Box model

제목 태그는 화면 전체를 쓰고, a 태그는 자기 콘텐트 크기만큼만 쓴다. 시각적으로 한 번 확인해볼까? 부피를 확인하기 위해 페인트를 투명인간에 던진다고 상상해보자.

  h1, a{
<!--
border-width:5px;
border-color:red;
border-style:solid;
중복을 없애서 간단하게 사용해보자 -->
  
border:5px solid red;
display:inline;
}

block level element vs inline element

화면 전체를 쓰는 태그와 자기 크기 만큼의 콘텐트를 쓰는 것이 다르다.
어떤 것은 화면 전체를 쓰고 어떤 것은 부분을 쓴다는 것 정도만 알아두면 된다. 이 값들은 각 태그들의 display 기본값이지만, css display를 통해서 언제든지 그 값을 바꿀 수 있다. 태그를 안 보이게 하고 싶으면 display:none;을 할 수도 있다.

box model

h1{
        border:5px solid red;
        padding:20px;
        margin:20px;
        display:block;
        width:100px;
      }

콘텐트와 보더사이에 여백을 주고 싶다면? 패딩padding이다.
테두리와 테두리 사이에 간격은? 마진margin이다.
화면 전체를 쓰는 태그의 콘텐트 크기를 조정하고 싶다면? 폭은 width 높이는 height 값을 지정하면 된다.

더 좋은 도구가 있다. 웹페이지에서 오른쪽 버튼을 눌러서 검사를 누르면 된다. 그림과 수치들을 함께 확인할 수 있다. 심지어 수치를 바꿔서 미리볼 수도 있다. 나중에 CSS와 HTML이 복잡해졌을 때, 하나의 태그가 어떤 css의 영향을 받는지를 확인할 때, 아주 중요한 개발자 도구다.

태그를 박스로 취급한다. 그리고 박스 모델로 부피감을 결정한다는 것은 디자인에 아주 중요한 요소라는 것을 알 수 있다.

예제 적용

h1 {
      font-size:45px;
      text-align: center;
      border-bottom:1px solid gray;
      margin:0;
      padding:20px;
    }
    ol{
      border-right:1px solid gray;
      width:100px;
      margin:0;
      padding:20px;
    }

1. WEB 아래쪽에 테두리 만들어주기
2. 검사 버튼을 눌러서 개발자 도구를 이용해보자. 참고해서 디테일하게 padding과 margin값 조정해주기
3. ol 오른쪽에 테두리 만들어주고, 콘텐트/마진/패딩 크기 조절해주기
4. 마지막에 body 태그에 전체적인 margin 없애주기

개발자 도구에서 값을 조정해서 미리볼 수 있고, 심지어 property와 value 값을 보여주니 매우 편리하다.

5. 그리드

코드를 통해 레이아웃을 짜는 것에 웹은 굉장히 어려움을 많이 겪었는데, 그리드는 최신에 등장한 기술이다. (2017' 강의다) 최신 css 기능을 사용하기 위해서는 사용해도 되는지 데이터에 근거해서 판단해야 한다.
👉 Can I use 이 사이트를 꼭 참고하기를 바란다. css/html/javascript를 통해서 웹브라우저들이 그 기술을 채택하고 있는가 통계로 보여준다.

무색무취의 태그

디자인의 목적을 위해서 어떤 의미도 존재하지 않는 태그를 사용해야 한다.
<div> 이건 block level element이다. <span> 이건 inline element다.

#grid{
        border:5px solid pink;
        display:grid;
        grid-template-columns: 150px 1fr;

/* 혹은 1fr 2fr 이렇게 표현해줄 수도 있다. */

      }
      div{
        border:5px solid gray;
      }

<div id="grid">
      <div>NAVIGATION</div>
  <div>Lorem ipsum dolo blah blah blah </div>

• 두 개의 div 태그를 사용하고 그 다음에 디자인의 목적을 위해 부모 태그 div를 한 번 더 만들었다.
• 부모 div 태그에 아이디 값을 주었다.
• 이제 그 아이디 값을 셀렉해서 css로 만져준다.
• 참고로, column은 행이고 row는 열이다.

예제 적용

전체 html 태그를 가져와봤다.

<!doctype html>
<html>
<head>
  <title>WEB - CSS</title>
  <meta charset="utf-8">
  <style>
    body{
      margin:0;
    }
    a {
      color:black;
      text-decoration: none;
    }
    h1 {
      font-size:45px;
      text-align: center;
      border-bottom:1px solid gray;
      margin:0;
      padding:20px;
    }
    ol{
      border-right:1px solid gray;
      width:100px;
      margin:0;
      padding:20px;
    }
    #grid{
      display: grid;
      grid-template-columns: 150px 1fr;
    }
    #grid ol{
      padding-left:33px;
    }
    #grid #article{
      padding-left:25px;
    }
  </style>
</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>CSS</h2>
        <p>
          Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] 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>
      </div>
  </div>
  </body>
  </html>

1. h2와 p를 div태그를 활용해 하나로 묶어주었다.
2. ol과 위의 div태그를 div로 한 번 더 묶어주었다.
3. 검사에서 수치를 주는 것뿐만 아니라, 움직여볼 수도 있구나.
4. ol태그에서 padding 값을 전체적으로 주고 그 뒤에 padding-left 값을 한 번 더 디테일하게 짚어주었다. 이 때, 순서가 중요했던 것 같고 강의해서는 뒤 쪽에 아예 selector를 다시 넣어주었다.
5. 추가로 강의에서는 div태그에 아이디 값을 한 번 더 줘서 간격을 조정해주었다. (나는 그리드 값을 만져주었는데)
6. ol은 다양하게 사용될 수 있는 태그인데 그 소속을 밝혀주었다. 웹페이지의 모든 ol중에 부모가 grid인 태그를 선택한다는 뜻의 선택자 #grid ol을 사용해주었다.

6. 미디어쿼리

반응형 웹/디자인

화면의 크기에 따라 웹페이지의 각 요소들이 최적화된 모양으로 바뀌는 것을 일컫는다. 웹은 수많은 형태의 화면에서 동작해야 하니, 개발에 어려움이 많았다. 여러가지 화면에 대응되는 웹페이지를 만들기 위한 기술을 발전시켜왔고, 반응형 디자인이라는 흐름까지 오게 되었다.

미디어쿼리

개발자 도구에서 화면의 크기를 알 수 있다. 800px를 기준으로 디자인을 다르게 적용하려고 한다.

 @media(max-width:800px) {
        div{
          display:none;
        }
      }

max-width:800px 는 screen < 800px와 같은 말이다! 약간 헷갈렸는데 이제는 이해가 되는 것 같다.

예제 적용

먼저, 검사를 열어서 스크린 기준을 정한다.

 @media(max-with:800px){
        #grid{
          display:block;  //그리드 없애기
        }
        #h1{
          border-bottom:none;
        }
        #ol{
          border-right:none;
        }
      }

기존에 있던 css에서 변경사항만 기재하는구나. 미디어 쿼리가 어떤 것인지 개념을 배우고 아주 간단한 예제만 적용해보았다.

7. 코드의 재사용

1. style 태그를 카피해서 다른 파일에도 적용을 시켜보았다.
2. split right으로 해서 비교하면서 다른 부분을 동일하게 만들어 주었다.

근데 우리가 가진 웹페이지가 1억개라고 한다면? 이걸 어떻게 하나 하나 다 해주나? 중복의 제거는 좋은 코드의 핵심이다.

style.css 라는 별도의 파일을 만든다. 그리고 이런 코드를 덧붙인다.

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

• 별도의 파일을 다운로드 받는 것과 내장하는 것 중 어떤 것이 더 적은 트래픽을 사용할까? 내장하는 것이 그 자체로는 더 효율적이다. 하지만! 캐싱이라는 것이 있다.
• 캐싱은 저장한다는 거다. 한 번 다운받았다면, 저 파일이 바뀌기 전까지는 저장된 결과를 불러온다. 그렇게 트래픽을 줄이고 사업자는 돈을 덜 쓸 수 있다.
• 중복을 제거하고 재사용성을 높이면, 가독성을 높이고 유지보수를 편리하게 한다. 이게 정말 중요한 포인트다.

⚡ 하지만 여전히, 손수 바꿔주어야 하는 디테일들이 있었다. css를 적용하기 위해 건들인 id값이나 class값들 말이다. 애초에 틀을 먼저 만들고 그 템플릿은 복사해서 쓰는 편이 나을 것 같다.

🤔 수업을 마치며

CSS를 지탱하는 두 개의 뿌리는 선택자(selector)와 속성(property)이다. 이 둘이 가장 중요하다. 선택자와 속성을 많이 알수록, 더 풍부하고 정확하게 표현할 수 있을 것이다.

가장 중요하게, 그동안 배운 것을 써먹으십시오!