WEB | CSS 정리

30077 단어 CSSCSS

CSS의 등장

a 태그로 링크가 연결된 폰트들의 색을 변경하려고 한다.

CSS 도입 이전에는 아래 코드에 font 태그를 추가해 색을 변경했다. 하지만 font 태그는 h1, a 태그처럼 Nutrition을 설명하는 정보를 담고 있지 않고 디자인을 나타낼 뿐이다. 디자인 자체는 정보가 아니다. 

<h1><a href="WEB2_3.html">Nutrition</a></h1>
  <ul>
    <li><a href="WEB2_3_1.html">Carbohydrate</a></li>
    <li><a href="WEB2_3_2.html">Protein</a></li>
    <li><a href="WEB2_3_3.html">Fat</a></li>
  </ul>

위 문제를 해결하기 위해 style 태그가 등장한다.

style 태그

style 태그는 HTML의 문법이면서 웹브라우저가 style 태그 안쪽에 있는 코드를 CSS 문법으로 해석하도록 한다.

<head>
  <title>WEB - Nutrition</title>
  <meta charset="utf-utf-8">
  <style>
    a {
      color: red;
    }
  </style>
</head>

style 태그 안 코드의 의미는 a 태그를 가진 모든 폰트의 색을 red로 지정한다는 것이다.
모든 폰트에 하나하나 font라는 태그를 작성하지 않고도 손쉽게 폰트의 색을 변경할 수 있다.

CSS의 등장 이유

  1. HTML이 정보 전달에 전념하게 하기 위해 디자인에 대한 기능을 CSS로 빼앗아온다.
  2. CSS를 통해 웹페이지를 디자인하는 것이 훨씬 효율적이다.

CSS를 사용하려면 웹브라우저가 어디서부터 어디까지가 CSS 코드인지 알게 해줘야 한다. style 태그가 그런 역할을 하는데 또 다른 방법이 있다.

style 태그가 아닌 속성 이용하기

<h1><a href="index.html" style="color:green; text-decoration:underline;">Nutrition</a></h1>

style=""이 위치하고 있는 태그에게만 효과를 준다.
style=""은 HTML 속성이고 속성값으로 반드시 CSS의 효과가 들어온다.

선택자, 속성, 속성값

style 태그로 css 코드를 작성하면 반드시 작성해야 하는 선택자, 속성, 속성값.

 a {
   color: red;
   text-decoration: none;
 }

a : selector, 선택자
효과를 누구에게 줄 것인가 선택하기 때문에 선택자이다.
color : property, 속성
red : property value, 속성값

class

<li><a href="carbohydrate.html" class="visited">Carbohydrate</a></li>
<li><a href="protein.html" class="visited">Protein</a></li>
<li><a href="fat.html" class="visited" id="active">Fat</a></li>

class는 하나로 묶는다. visited라는 class 값을 갖는 태그 2개를 공동으로 제어할 수 있다.
style 태그 안 선택자로 이용해 visited를 class값으로 갖는 모든 태그에 대해 효과를 적용할 수 있다.
class를 선택자로 사용하는 방법은 class명 앞에 '.'을 붙이는 것이다.

<style>
  .visited {
    color: gray;
  }
</style>

id

id도 class와 같이 여러개의 태그를 공동으로 제어할 수 있다. id를 선택자로 사용하는 방법은 id명 앞에 '#'을 붙이는 것이다.

<style>
  #active {
    color: green;
  }
</style>

id는 단 한 번만 등장해야 한다. 주민등록번호와 같은 개념으로 중복되어서는 안 된다.

우선순위

<li><a href="fat.html" class="visited" id="active">Fat</a></li>

위와 같이 class, id 값을 동시에 가지고 있는 태그가 있다.

<style>
  .visited {
    color: gray;
  }
  #active {
    color: green;
  }
</style>

위와 같이 CSS 코드를 작성하면 gray는 무시되고 green이 적용된다. 이유는 class와 id의 우선순위가 다르기 때문이다.

id 선택자는 class 선택자보다 우선순위가 높다.
class 선택자는 태그 선택자보다 우선순위가 높다.

즉,
id seletor > class selector > tag selector
만약 우선순위가 모두 같으면 가장 마지막에 선언되는 선택자가 우선순위가 높다.

구체적인 id가 포괄적인 class보다 우선순위가 높고, id 선택자를 통해 예외를 두는 것이 훨씬 더 효율적이다.
원하는 효과를 적절하게 타겟팅할 수 있기 때문이다.

https://www.w3schools.com/cssref/css_selectors.asp

box model

<style>
   h1 {
     border-width: 5px; /* 테두리 두께 */
     border-color: red; /* 테두리 색 */
     border-style: solid; /* 테두리 스타일, solid는 단선 */
   }
   a {
     border: 5px solid red; /* 한 번에 선언할 수 있다. 순서는 상관X */
   }
</style>

h1 태그와 a 태그에 위와 같이 효과를 주면

h1 태그와 같이 화면 전체를 쓰는 태그를 block level element, a 태그와 같이 자기 자신의 콘텐츠만큼의 크기를 갖는 태그는 inline element라고 한다.

페이지에서 우클릭 -> 검사 -> 태그를 클릭해보면 아래와 같은 그림을 확인할 수 있다.

padding, border, margin 값들을 조정하면서 디자인을 해나갈 수 있다.
style 태그 안 border의 속성값을 5px로 했기 때문에 5로 설정되어 있는 것을 확인할 수 있다.

<style>
   h1 {
     border-width: 5px solid red;
  	 display: inline;
   }
</style>

위와 같이 display의 속성값을 inline으로 설정하면 block level element가 기본인 h1 태그를 inline element로 변경시킬 수 있다.

grid

grid를 사용하면 콘텐츠를 화면에 적절하게 배치할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>grid</title>
    <style>
      div {
        border: 5px solid gray;
      }
      #grid {
        border: 5px solid pink;
        display: grid;
        grid-template-columns: 150px 1fr; /* NAVIGATION 150px 고정, ARTICLE은 나머지 영역, 화면 크기 조정되면 알아서 크기 변한다.*/
        /* fr: 자동으로 조정되는 단위 */
      }
    </style>
  </head>
  <body>
    <div id="grid">
      <div>NAVIGATION</div>
      <div>ARTICLE</div>
    </div>
  </body>
</html>

display 속성값을 grid로 설정하고 grid-template-columns 속성값으로 두 개 태그의 배치 비율을 설정하면 된다. grid-template-columns는 column 방향으로 배치하겠다는 뜻이다. row 방향으로도 배치할 수 있다.

위 코드는 NAVIGATION은 150px로 고정하고 나머지 화면은 ARTICLE이 쓰도록 하겠다는 뜻이다.

화면의 크기가 달라지면 ARTICLE 영역만 크기가 알아서 변하고 NAVIGATION 영역의 크기는 고정이다.
만약 아래처럼 선언하면

grid-template-columns: 2fr 1fr;

화면 전체를 3fr로 봤을 때, 2:1로 화면이 설정된다.

div, span

두 태그는 아무 의미가 없고 디자인 용도로 쓰이는 태그이다.
div는 block level element, span은 inline element이다.

아래 링크에서 grid나 여러 가지 기술이 얼마나 사용되는지 알 수 있다.
https://caniuse.com/

반응형 디자인

화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것은 반응형 웹, 반응형 디자인, Responsive Web이라고 한다.
Web은 수많은 형태의 기기에서 동작해야 하기 때문에 중요한 요소이다.
media query를 사용한다.

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

min-width:800px 조건이 만족되면 아래에 있는 코드가 실행되는 구조이다.
위 코드는 화면의 크기가 800px보다 클 때 실행되는 코드이다.

화면의 크기가 800px보다 크다. == 화면이 최소 800px이다. == min-width:800px

그 반대의 경우는
화면의 크기가 800px보다 작다. == 화면이 최대 800px이다. == max-width:800px

CSS 분리

html 문서 안 style 태그를 통해 디자인을 해왔다. 이를 모든 웹페이지에 적용하려면 지금까지 배운 방법으로는 복사해서 모든 문서에 붙여넣기 하는 방법밖에는 없다.

만약 웹페이지가 1억개 있고 1억개의 웹페이지 안 h1 태그의 폰트색을 변경하려면 1억개의 웹페이지를 하나하나 수정해야 하고 이는 굉장히 비효율적이다.

이를 해결하기 위해 CSS 파일을 생성한다.
style.css라는 파일을 생성하고 지금까지 작성했던 style 태그 안 디자인을 모두 style.css에 작성한다.

CSS 파일 연결

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

html 문서 안에 위 한 줄만 있으면 style.css에 저장된 코드를 가져와 읽게 할 수 있다.
디자인에 대한 변경사항이 있다면 style.css 파일에서만 수정하면 된다.
연결된 모든 html의 디자인을 욀괄적으로 바꿀 수 있다.
중복을 제거하고 재사용성이 굉장히 높아진다.

CSS 코드 분리의 이점

웹브라우저는 웹페이지를 열 때 css 파일을 우리의 컴퓨터에 다운받는다. 이를 캐싱이라고 하는데 css 파일이 변경되기 전까지는 컴퓨터에 저장된 css 가져와서 웹페이지를 읽는 속도를 높인다.
컴퓨터에 저장된 css를 가져오는 것은 네트워크를 쓰지 않기 때문에 네트워크 측면에서도 도움이 된다.

Docker registry 웹 속눈썹 Tanker 소개
Next.js 파일 기반 라우팅(동적 경로 및 탐색)(2부)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage