CSS_03_box model

charl hi·2021년 7월 8일

CSS html

CSS

목록 보기

3/6

별거없는 tip.

<html> 을 치기만 하면 기본형태가 한번에!

중복처리 : 콤마(,)와 나란히 쓰면 됨!

마우스 오른쪽을 클릭하여 검사를 해보자!!

border

경계선/박스를 만들기 위한 속성

border-width : 두께 (5px;)
border-color : 색깔 (red;)
border-style : 선 종류 (solid;)

block level element

전체 부피를 갖는 태그를 가리키는 말

보통 <h1>태그 등이 그러함

inline element

자기 자신만의 부피를 갖는 태그를 가리키는 말

inline -> block / block -> inline 으로 바꾸려면; 속성 display 를 사용

속성 display

display:inline;

요소를 inline처럼 표시 = 앞뒤로 줄바꿈 x

display:block;

요소를 block처럼 표시 = 앞뒤로 줄바꿈

display:none;

요소를 생성하지 않음 = 어떠한 공간도 차지하지 않고 사라짐. 화면출력 x

  <head>
    <style>
      /*block line element*/
      h1 {
        border-width:5px;
        border-color:red;
        border-style:solid;
      }
      /*inline element*/
      a {
        border-width:5px;
        border-color:red;
        border-style:solid;
      }
    </style>
  </head>
  <body>
  <h1>CSS</h1>

Cascading Style Sheets (<a href="https://www.w3schools.com/cssref/css_selectors.asp">CSS</a>) 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 an![](https://velog.velcdn.com/images%2Flecharl%2Fpost%2F2fc329ab-e170-44a5-9f92-e792d85b605b%2Fimage.png)y XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media.
  </body>

block->inline / inline->block 으로 바꾸면

    <style>
    <head>
      /*block line element*/
      h1 {
        border-width:5px;
        border-color:red;
        border-style:solid;
        display:inline;
      }
      /*inline element*/
      a {
        border-width:5px;
        border-color:red;
        border-style:solid;
        display:block;
      }
    </style>
  </head>
  <body>
  <h1>CSS</h1>

Cascading Style Sheets (<a href="https://www.w3schools.com/cssref/css_selectors.asp">CSS</a>) 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.
  </body>

중복처리 해보자!

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

Cascading Style Sheets (<a href="https://www.w3schools.com/cssref/css_selectors.asp">CSS</a>) 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.
  </body>

속성 padding

테두리 안쪽 내용과 테두리 사이의 간격 : (4px;)

속성 margin

테두리 바깥쪽 테두리와 그 외 사이의 간격 : (30px;)

속성 width / height

내용(content)의 너비와 높이

  <head>
    <style>
      h1 {
        border:5px red solid;
        padding:5px;
        margin:70px;
      }
    </style>
  </head>
  <body>
  <h1>CSS</h1>
  <h1>CSS</h1>
  </body>