본문 바로가기
cording/생활코딩

[CSS] 박스 모델 그리고 응용하기

효기롭다 2022. 3. 1. 17:14

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      /*
      block level element
      */
      h1{
        border-width:5px;
        border-color:red;
        border-style: solid;
        diplay: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://developer.mozilla.org/ko/docs/Web/CSS">CSS</a>)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정합니다.
  </body>
</html>

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      /*
      block level element
      */

/* */ : 주석을 달때 사용


      h1{
        border(테두리)-width:5px;
        border-color:red;
        border-style: solid;(테두리를 하나의 직선으로 그림)
        diplay:inline;
      }

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

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      h1, a{
        border-width:5px;
        border-color:red;
        border-style: solid;
      }
    </style>
  </head>
  <body>

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      h1, a{ 

* , 로 이어줌
        border-width:5px;
        border-color:red;
        border-style: solid;
      }
    </style>
  </head>
  <body>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      h1, a{
        border:5px solid red;
      }
    </style>
  </head>

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      h1, a{
        border:5px solid red;
      }

반복문을 border:5px solid red; 로 간결하게 바꿔줌 *solid red 뒤에 와도 상관없음


    </style>
  </head>

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      h1{
        border:5px solid red;
        padding: 20px;
        margin: 20px;
        display: block;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <h1>CSS</h1>
    <h1>CSS</h1>
  </body>
</html>

 

*padding : 테두리 안쪽 여백 설정

margin : 박스 바깥쪽 여백 설정

 

css box model

 

 

 

 

 <style>
  body{
    margin: 0;
  }
   a {
     color:black;
     text-decoration: none;
   }
   .saw {
     color: pink;
   }
   #active {
     color: blue;
   }
   h1 {
     font-size: 45px;
     text-align: center;
     border-bottom: 1px solid gray;
     margin: 0;
     padding: 20px;
   }
   ol{
     border-right: 1px solid gray;
     width: 160px;
     margin: 0;
     padding: 20px;
   }
 </style>
</head>
<body>
 <h1><a href="index.html">SEVENTEEN</a></h1>
 <ol>
   <li><a href="1.html" class="saw">HIPHAP TEAM</a></li>
   <li><a href="2.html" class="saw" id="active">VOCAL TEAM</a></li>
   <li><a href="3.html">PERPOMONCE TEAM</a></li>
 </ol>

 

저작자표시 비영리 동일조건 (새창열림)

'cording > 생활코딩' 카테고리의 다른 글

[CSS] 미디어 쿼리 적용해보기  (0) 2022.03.02
[CSS] Grid 그리드 활용하기  (0) 2022.03.01
[CSS] 선택자의 기본  (0) 2022.03.01
[CSS] 기본문법과 속성 알아내기  (0) 2022.03.01
[HTML] 생활코딩 정리 1  (0) 2022.02.28

'cording/생활코딩' Related Articles

티스토리툴바