코코아톡 클론코딩(3일차) -2

Posted Feb 2, 2024

By KIM YEONGBEOM

7 min read

오늘은 분량이 많은 관계로!

CSS 를 작성할 때, 2가지의 방법이 있음. -> (1) HTML 과 CSS 를 한 파일에 작성하는 방법 -> (2) .css 파일을 따로 생성해 작성하는 방법(추천)
CSS 를 통해 디자인(?)할 때, html tag 불러와서 속성을 부여하는 방식. 이때, 색상이나 크기 등 다양한 속성이 있음. 자세한 건 코드 참고

  
    <style>
      h1 {
        color: blue;
        font-size: 20px;
      }
    </style>

style tag 는 HTML 내에서 작성할 때 head tag 내부에 작성하면 됨. 그래서 속성을 부여하고 싶은 html tag 를 선택하고 속성을 통해 변경해주면 됨! 아래의 코드에서, style tag 내부의 h1 이나 address tag 는 “selector” 라는 이름을 가짐. 다양한 방법으로 html tag 를 지정할 수 있는데, 다음 기회에.

  
  /* in styles.css */
    body {
    background-color: blueviolet;
  }

  
  <link rel="stylesheet" href="styles.css" />
    <style>
      h1 {
        color: blue;
        font-size: 20px;
      }
      address {
        color: aqua;
      }
      body {
        background-color: black ;
      }
    </style>

CSS(Cascading Style Sheet), Cascading 은 연속되며 이어지는 것을 뜻함. 이것이 중요한 이유는, 브라우저가 css 를 읽는 방법에 관한 것 때문인데. 위에서 부터 순서대로 읽어들이기 때문임. 위 코드의 결과는 body tag 의 색은 black 이 됨!!! 제일 아래 있는 것이 적용됨. 그러니 잘 이해하고 있자. 이제 .css 파일에서만 설정할 것임!

  
  <!DOCTYPE html>
  <html lang="kr">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
      <link rel="stylesheet" href="styles.css" />
      <style>
        div {
          height: 150px;
          width: 150px;
          background-color: aquamarine;
        }
      </style>
    </head>
    <body>
      <div></div>
      <div></div>
      <div></div>
      <span>asdf</span>
      <span>asdf</span>
    </body>
  </html>

위 코드를 보면, style tag 내부에 div 에 대한 속성을 정의했는데 이는 모든 div 에 공통적으로 적용됨.
그리고, block 과 inline 이라는 것이 있는데 위 코드에서는 div 가 block, span 은 inline 임. 웹 페이지를 보면, block 은 한 줄에 다른 요소들이 올 수가 없음. 웹 페이지 상에서 div 는 3개가 세로로 붙어있는 것 처럼 보이지만, 요소 검사를 해보면 3개가 따로 떨어져 있고 span 의 내용은 함께 한 줄에 있음.

  
    <style>
      div {
        display: inline;
        height: 150px;
        width: 150px;
        background-color: aquamarine;
      }
    </style>
    <div>d</div>
    <div>i</div>
    <div>v</div>

물론, display 속성을 통해 block 인 div 를 inline 으로 만들어 줄 수 있지만. 이때, height 와 width 속성은 의미 없어짐. inline 은 어떠한 크기나 너비도 갖지 않기 때문에! 물론 div 에 content 를 적어준다면 background-color 는 글씨에 적용이 되긴 함.

  
    <style>
      html {
        background-color: aqua;
      }
      div {
        height: 150px;
        width: 150px;
        background-color: blue;
      }
    </style>

이렇게 적용하고 보게되면, div 가 페이지의 왼쪽에 간격을 일부 두고 생성되어있음. -> inline 과 달리 block 이 갖는 3가지 고유한 특성. (1) margin : block 의 border 에서 바깥 공간의 여백 (상하좌우 모든 방향, 각각 따로 설정도 가능; margin-left, margin-top 처럼)

  
  body {
  margin: 2px 3px 4px 5px;
  }

위 처럼 margin 을 4개 따로 설정할 수도 있는데, 위쪽부터 시계방향 연상하면 됨. 각각 상, 우, 하, 좌에 해당함. 경계(border)의 바깥 공간에 n px 만큼 여백을 만드는 것임.

-> collapsing margin 이라는 현상이 있는데, 수직 방향으로만 일어남. 서로 다른 요소의 위쪽 아래쪽의 경계가 만나면 하나로 합쳐진다는 것. 일단 지금 이해 안 되니, 나중에 다룰 기회가 생길 것이다. 웹사이트 만들 줄도 모르는데 저것부터 찾아본다고 좋진 않을 것 같은..!

(2) padding : block 의 border 에서 내부 공간의 여백에 해당. 경계(border)를 기준으로 n px 만큼 내부에 여백이 더 생김.

  
    <style>
        div {
        padding: 10px;
        height: 170px;
        width: 170px;
        background-color: blue;
        }
        #first {
        padding: 20px;
        }
    </style>

  <body>
    <div id="first">d</div>
    <div id="second">i</div>
    <div id="third">v</div>
  </body>

위를 보면, div 에 서로 다른 id 를 설정해주었고 여기서 원하는 id 를 선택해주고 싶다면 #id 형태로 selector 를 작성해주면 된다! 그러니 id 는 unique 해야 사용하기 편할 것!

(3) border : html tag 의 경계면. border 를 기준으로 바깥은 margin, 내부는 padding. 별로 쓸 일은 없음. 예쁜 속성이 없다! 그런데, inline 은 height 와 width 가 없다고 했는데 border 는 가질 수 있음!

일단 여기까지..! 12시 넘어가면 능률 급 저하..

Development, Web

This post is licensed under CC BY 4.0 by the author.

Trending Tags