WEB2 - CSS 8 — Taking an extra step

728x90

CSS(Cascading Style Sheets)

HTML에서 만들었던 예제에 디자인해보기

박스 모델

이전 HTML에서 만들었던 예제에 BOX.html 파일 추가

HTML의 기본적인 코드들에 예재를 넣어보자.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>empty space</h1>每个人心里都住着一个艺术家给自己一页空白<a href="https://livebyfaith117.tistory.com/">来表达</a>
  </body>
</html>

여기서 <h1>태그는 화면 전체를 쓰고 있다(줄 바꿈이 되었다).

그런데 <a>태그는 똑같은 태그임에도 불구하고 줄 바꿈이 되지 않고 다른 콘탠츠들과 같은 라인에 위치해 있다.

왜 이런 차이가 존재하는 것일까?

제목 태그인 <h1>태그는 화면 전체를 쓰는 것이 기본적으로 편리하기 때문이다.
그리고 링크가 화면 전체를, 링크 앞뒤에 있는 콘탠츠가 줄 바꿈이 된다면 상당히 불편하기 때문에 기본적으로 링크는 딱 자기 크기만큼을 쓴다는 것을 짐작할 수 있다.

이것을 짐작으로 말고 시각적으로 보자. <h1>과 <a>태그에 테두리를 그려보자.

border 테두리

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    h1{
      border-width:4px;
      border-color:green;
      border-style:solid;
    }
    a{
      border-width:4px;
      border-color:green;
      border-style:solid;
    }
  </style>
  <body>
    <h1>empty space</h1>每个人心里都住着一个艺术家给自己一页空白<a href="https://livebyfaith117.tistory.com/">来表达</a>
  </body>
</html>

그래서 HTML의 여러 가지 태그들은 그 태그의 성격과 일반적인 쓰임에 따라

화면 전체를 쓰는 것이 편한 것과 자기 크기만큼 부피를 갖는 것이 편한 것이 있다.

Tip. CSS에서 주석 달기

주석

어떤 태그는 화면 전체를 쓰고 ------------- block level element

어떤 태그는 부분을 쓴다. ------------- inline element

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    /*
    block level element
    */
    h1{
      border-width:4px;
      border-color:green;
      border-style:solid;
    }
    /*
    inline element
    */
    a{
      border-width:4px;
      border-color:green;
      border-style:solid;
    }
  </style>
  <body>
    <h1>empty space</h1>每个人心里都住着一个艺术家给自己一页空白<a href="https://livebyfaith117.tistory.com/">来表达</a>
  </body>
</html>

(살짝) Tip. --- 그다지 중요하지 않다.

block level element라고 하더라도 inline element처럼 자신의 부피만큼 쓰게 할 수 있다.

반대로 inline element도 block level element처럼 화면 전체를 쓰게 할 수 있다.

즉 block level element와 inline element는 display라는 속성의 기본값일 뿐 그 기본값은 CSS를 통해서 언제든지 바꿀 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    /*
    block level element
    */
    h1{
      border-width:4px;
      border-color:green;
      border-style:solid;
      display:inline;
    }
    /*
    inline element
    */
    a{
      border-width:4px;
      border-color:green;
      border-style:solid;
      display:block;
    }
  </style>
  <body>
    <h1>empty space</h1>每个人心里都住着一个艺术家给自己一页空白<a href="https://livebyfaith117.tistory.com/">来表达</a>
  </body>
</html>

한 가지 더 Tip.

display:none; 태그들을 안 보이게 하는 것(나중에 중요할 때가 온다.)

위에서 짠 코드를 컴팩트하게 압축해보자.

중복들이 존재한다.

h1과 a의 내용이 중복된다.

선택자에서 콤마(,)라는 선택자로 코드의 양을 획기적으로 줄일 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    h1,a{
      border-width:4px;
      border-color:green;
      border-style:solid;
    }
  </style>
  <body>
    <h1>empty space</h1>每个人心里都住着一个艺术家给自己一页空白<a href="https://livebyfaith117.tistory.com/">来表达</a>
  </body>
</html>

잘 보면 여전히 중복이 존재한다.

바로 border-부분이다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    h1,a{
      border:4px solid green;
    }
  </style>
  <body>
    <h1>empty space</h1>每个人心里都住着一个艺术家给自己一页空白<a href="https://livebyfaith117.tistory.com/">来表达</a>
  </body>
</html>

이렇게 줄여도 아까와 똑같은 뜻이 된다.

그리고 border: 에 있는 4px solid green의 순서는 중요하지 않고 아무 위치에나 놓아도 된다.
여러 가지 잔기술들을 알아보았다.

이제 진짜 중요한 얘기, 실제 박스 모델에 대해 알아보자.

[추천 검색어] CSS box model

width 폭
height 높이
padding 콘탠트와 바깥쪽에 있는 테두리 사이의 간격
margin 테두리와 테두리 사이의 간격

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    h1{
      border:4px solid green;
      padding:20px;
      margin:20px;
      display:block;
      width:200px;
    }
  </style>
  <body>
    <h1>empty space</h1>
    <h1>empty space</h1>
    <h1>empty space</h1>
    <h1>empty space</h1>
    <h1>empty space</h1>
  </body>
</html>

이 박스 모델 상 block level element가 생략되어 있는 상태인데 이 화면 전체를 사용하는 특징을 바꾸고 싶다면

width값을 준다.

추가적으로,

Web page에서 마우스 오른쪽 클릭 후 검사를 들어가면 (단축기 ctrl + shift + i)

아래 그림에서의 검은색 부분이 나타난다.

각 클릭하는 태그가 어떤 CSS 스타일의 영향을 받고 있는가를 일목요연하게 보여주는 굉장히 중요한 기능이다.

저작자표시

'youtube.com|user|egoing2 > WEB2 - CSS' 카테고리의 다른 글

WEB2 - CSS 11 (2)	2021.09.02
WEB2 - CSS 10 (10)	2021.09.01
WEB2 - CSS 9 (5)	2021.08.30
WEB2 - CSS 6 to 7 (2)	2021.07.05
WEB2 - CSS 1 to 5 (9)	2021.07.03

CSS(Cascading Style Sheets)

'youtube.com|user|egoing2 > WEB2 - CSS' 카테고리의 다른 글

티스토리툴바