본문 바로가기
LEARN/HTML | CSS

[CSS] 8~9 박스 모델 display block , inline / margin padding

by 아이엠제니 2022. 1. 27.

 

 

생활코
딩 [WEB2 - CSS] STUDY 기록

8. 박스 모델

box.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
        <h1>서시</h1> 죽는 날까지 <a href="https://ko.dict.naver.com/#/entry/koko/53c16c2b001d4beb9fe9c67ccd8d9064">하늘</a>을 우러러한 점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다.별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지.그리고 나한테 주어진 길을걸어가야겠다.오늘 밤에도 별이 바람에 스치운다.
  </body>
</html>

h1태그는 화면 전체를 쓰고 있음.

줄바꿈이 되고 있다.

a태그는 줄바꿈 없이 같은 줄에 쓰고 있다.

이 2개를 더 확실하게 알 수 있는 방법은!

박스 모양을 주기.

 

 

<!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;
      }
      /*
      inline element
      */
      a {
        border-width:5px;
        border-color:red;
        border-style:solid;
      }
    </style>
  </head>
  <body>
        <h1>서시</h1> 죽는 날까지 <a href="https://ko.dict.naver.com/#/entry/koko/53c16c2b001d4beb9fe9c67ccd8d9064">하늘</a>을 우러러한 점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다.별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지.그리고 나한테 주어진 길을걸어가야겠다.오늘 밤에도 별이 바람에 스치운다.
  </body>
</html>

h1 제목 태그는 전체를 쓰고 있고, a태그는 자신의 콘텐츠만큼 사용하고 있다.

h1 태그는 block level element

a 태그는 inline element

 

 

    <style>
      /*
      block level 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>

h1 stlye 속성으로 display: inline 을 주면 inline element처럼 사용이 가능하다.

a style 속성으로 display: block 을 주면 block level element처럼 사용이 가능하다.

 

 

 

위 코드 중복 제거하기

    <style>
      h1, a {
        border-width:5px;
        border-color:red;
        border-style:solid;
      }
    </style>

위처럼 간단하게 적을 수 있다.

h1이랑 a를 같은 줄에 적고, 콤마로 구분!

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

더 간단하게 줄일 수도 있다.

 

 

 

<!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>서시</h1>
        <h1>서시</h1>
  </body>
</html>

 

google 검색
css box model

 

 

웹페이지에서 오른쪽 마우스 버튼 클릭하고 검사!

단축키는 ctrl + shift + c

 

 

 

9. 박스 모델 써먹기

2.html

<!doctype html>
<html>

<head>
  <title>별 헤는 밤</title>
  <meta charset="utf-8">
  <style>
a {
  color: black;
  text-decoration: none;
}
.saw {
color: gray;
}
#active {
  color: red;
}
h1 {
  font-size: 45px;
  text-align: center;
  border-bottom: 1px solid gray;
  margin: 0;
  padding: 20px;
}
ol{
  border-right: 1px solid gray;
  width: 100px;
}
  </style>
</head>

<body>
  <h1><a href="index.html">윤동주 시인 시</a></h1>
  <ol>
    <li><a href="1.html" class="saw">서시</a></li>
    <li><a href="2.html" class="saw" id="active">별 헤는 밤</a></li>
    <li><a href="3.html">쉽게 쓰여진 시</a></li>
  </ol>

  <h2>별 헤는 밤</h2>
  <h4><a href="https://m.search.naver.com/search.naver?ie=UTF-8&query=%EC%9C%A4%EB%8F%99%EC%A3%BC&sm=chr_hty" target="_blank" title="윤동주 시인 검색 결과">윤동주</a></h4>

  <img src="star.jpg" width="100%">
  <p style="margin-top: 40px;">계절이 지나가는 하늘에는가을로 가득 차 있습니다.나는 아무 걱정도 없이가을 속의 별들을 다 헬 듯합니다.가슴 속에 하나 둘 새겨지는 별을이제 다 못 헤는 것은쉬이 아침이 오는 까닭이요내일 밤이 남은 까닭이요아직 나의 청춘이 다 하지 않은 까닭입니다.별 하나에 추억과별 하나에 사랑과별 하나에 쓸쓸함과별 하나에 동경과별 하나에 시와별 하나에 어머니, 어머니,어머님, 나는 별 하나에 아름다운 말
    한마디씩 불러 봅니다. 소학교 때 책상을 같이 했던 아이들의 이름과 패, 경, 옥, 이런 이국 소녀들의 이름과, 벌써 아기 어머니된 계집애들의 이름과, 가난한 이웃 사람들의 이름과, 비둘기, 강아지, 토끼, 노새, 노루, '프랑시스 잠', '라이너 마리아 릴케' 이런 시인의 이름을 불러 봅니다.이네들은 너무나 멀리 있습니다.별이 아스라이 멀 듯이.어머님,그리고 당신은 멀리 북간도에 계십니다.나는 무엇인지 그리워이 많은 별빛이 내린 언덕
    위에 내 이름자를 써 보고흙으로 덮어 버리었습니다.딴은 밤을 새워 우는 벌레는부끄러운 이름을 슬퍼하는 까닭입니다.그러나 겨울이 지나고 나의 별에도 봄이 오면무덤 위에 파란 잔디가 피어나듯이내 이름자 묻힌 언덕 우에도자랑처럼 풀이 무성할거외다.</p>
</body>

</html>

 

 

 

<!doctype html>
<html>

<head>
  <title>별 헤는 밤</title>
  <meta charset="utf-8">
  <style>
  body {
    margin: 0;
  }
a {
  color: black;
  text-decoration: none;
}
.saw {
color: gray;
}
#active {
  color: red;
}
h1 {
  font-size: 45px;
  text-align: center;
  border-bottom: 1px solid gray;
  margin: 0;
  padding: 20px;
}
ol{
  border-right: 1px solid gray;
  width: 100px;
  margin: 0;
  padding: 20px;
}
  </style>
</head>

<body>
  <h1><a href="index.html">윤동주 시인 시</a></h1>
  <ol>
    <li><a href="1.html" class="saw">서시</a></li>
    <li><a href="2.html" class="saw" id="active">별 헤는 밤</a></li>
    <li><a href="3.html">쉽게 쓰여진 시</a></li>
  </ol>

  <h2>별 헤는 밤</h2>
  <h4><a href="https://m.search.naver.com/search.naver?ie=UTF-8&query=%EC%9C%A4%EB%8F%99%EC%A3%BC&sm=chr_hty" target="_blank" title="윤동주 시인 검색 결과">윤동주</a></h4>

  <img src="star.jpg" width="100%">
  <p style="margin-top: 40px;">계절이 지나가는 하늘에는가을로 가득 차 있습니다.나는 아무 걱정도 없이가을 속의 별들을 다 헬 듯합니다.가슴 속에 하나 둘 새겨지는 별을이제 다 못 헤는 것은쉬이 아침이 오는 까닭이요내일 밤이 남은 까닭이요아직 나의 청춘이 다 하지 않은 까닭입니다.별 하나에 추억과별 하나에 사랑과별 하나에 쓸쓸함과별 하나에 동경과별 하나에 시와별 하나에 어머니, 어머니,어머님, 나는 별 하나에 아름다운 말
    한마디씩 불러 봅니다. 소학교 때 책상을 같이 했던 아이들의 이름과 패, 경, 옥, 이런 이국 소녀들의 이름과, 벌써 아기 어머니된 계집애들의 이름과, 가난한 이웃 사람들의 이름과, 비둘기, 강아지, 토끼, 노새, 노루, '프랑시스 잠', '라이너 마리아 릴케' 이런 시인의 이름을 불러 봅니다.이네들은 너무나 멀리 있습니다.별이 아스라이 멀 듯이.어머님,그리고 당신은 멀리 북간도에 계십니다.나는 무엇인지 그리워이 많은 별빛이 내린 언덕
    위에 내 이름자를 써 보고흙으로 덮어 버리었습니다.딴은 밤을 새워 우는 벌레는부끄러운 이름을 슬퍼하는 까닭입니다.그러나 겨울이 지나고 나의 별에도 봄이 오면무덤 위에 파란 잔디가 피어나듯이내 이름자 묻힌 언덕 우에도자랑처럼 풀이 무성할거외다.</p>
</body>

</html>

margin padding 값들을 줘서 조정함!

다음에는 아래쪽에 있는 텍스를 목록 옆으로 옮기는 작업을 배울 예정.

300x250

'LEARN > HTML | CSS' 카테고리의 다른 글

[CSS] 14~15 코드의 재사용 style.css 파일 생성 실습 끝  (0) 2022.01.28
[CSS] 10~13 그리드 , 미디어 쿼리  (0) 2022.01.27
[CSS] 6~7 id class 선택자  (0) 2022.01.26
[CSS] 4~5 style 속성 , a 태그  (0) 2022.01.11
[CSS] 1~3 WEB2 생활코딩 시작! style 태그  (0) 2022.01.01

관련글

티스토리툴바