[코드 연습장] margin, padding, left-top등 박스 모델과 레이아웃 제어

코딩/CSS 실습

[코드 연습장] margin, padding, left-top등 박스 모델과 레이아웃 제어

haehaee 2026. 3. 19. 13:59

마진

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>박스모델 - 마진</title>
  <style>
   div {
      width: 200px;
      height: 100px;
      display: inline-block; /* <- 얘가 박스 옆에 붙여버림 */
      border: 1px solid #222;
    }

    #margin1 {
      margin: 50px;
    }

    #margin2 {
      margin: 30px 50px;
    }

    #margin3 {
      margin: 30px 20px 50px;
    }

    #margin4 {
      margin: 30px 50px 30px 50px;
    }

    #margin5 {
      margin-right: 20px;
    }
  </style>
</head>
<body>

  <div id="margin1"></div>
  <div id="margin2"></div>
  <div id="margin3"></div>
  <div id="margin4"></div>
  <div id="margin5"></div>

</body>

</html>

마진 중첩

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델 - 마진 중첩</title>
	<style>
    * {
      box-sizing:border-box;
    }
    div {
        width: 200px;
        height: 100px;
        margin: 30px;
    }
    #box1 {
        background: rgb(0, 77, 243);
    }
    #box2 {
        background: rgb(255, 72, 0);
    }
    #box3 {
        background: rgb(18, 219, 0);
    }
    </style>
    </head>
    <body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

    </body>
    </html>

패딩 (h 태그의 경우 텍스트지만 기본적으로 블록의 형태를 가지고 있어서 패딩을 주면 변형이 된다)

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>박스모델 - 패딩</title>
  <style>
    h1 {
      display: inline-block;
      border: 1px solid#000;
    }

    #padding1 {
      padding: 20px 30px 40px 50px;
    }

    #padding2 {
      padding: 20px 30px;
    }

    #padding3 {
      padding: 20px;
    }
     </style>
</head>

<body>
  <h1>레드향</h1>
  <h1 id="padding1">레드향</h1>
  <h1 id="padding2">레드향</h1>
  <h1 id="padding3">레드향</h1>
  </body>
  </html>

박스 모델 버튼

버튼 예쁘게 만드는 방법

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>박스 모델</title>
  <style>
    #wrapper { /* <- 범위를 모르겠다면  background-color:로 확인 가능*/
        width: 210px;
        margin: 10px auto;
    }
    button { 
        padding: 10px 20px;
        margin: 10px;
        border: 1px solid #ccc;
        border-radius: 25px;
    }
  </style>
  </head>
  <body>
<div id="wrapper">
    <button>버튼 1</button>
    <button>버튼 2</button> /* 바로 옆에 붙기 때문에 인라인(E) 박스 레벨이면 안붙음 */
</div>

  </body>
  </html>

디스플레이

ul작성시 주의 - nav태그로 감싸줘야함 (웹 접근성)

ul은 적절한 사용 타이밍과 사용법이 중요함!

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS display 속성</title>
  <style>
    /* Do it! li 요소를 가로로 나란히 배치하기 */
    nav ul {
      list-style:none;      /* 불릿이나 숫자 번호 없앰 */
    }
    nav ul li {
      display:inline-block;      /* 블록 레벨 요소 성격을 가지면서 가로로 배치 */
      width: 100px;  /* 너비 - 100px */
      height: 40px;  /* 높이 - 40px */    
      line-height: 40px;   /* 세로로 중앙 배치 */
      text-align: center;  /* 가로로 중앙 배치 */
      margin:10px;                /*  마진 - 10px */
      border:1px solid #222;    /*  테두리 - 1px 검은 실선 */  
    }
    a {
      text-decoration: none;     /* 텍스트 링크 밑줄 없애기 */
    }
  </style>
</head>
<body>
   <nav>
     <ul>
      <li><a href="#">메뉴 1</a></li>
      <li><a href="#">메뉴 2</a></li>
      <li><a href="#">메뉴 3</a></li>
      <li><a href="#">메뉴 4</a></li>
     </ul>
   </nav>
</body>
</html>

left-top

absolute - 부모를 기준으로 절대값을 가진다

페이지는 외곽에서 중앙쪽으로 중력이 있다고 치면 중앙쪽을 향하면 + 외곽쪽을 향하면 -

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 위치 속성</title>
  <style>
    *{
      margin:0;  /* 마진 초기화 */
      padding:0;  /* 패딩 초기화 */
    }
    p {
      width:300px;  /* 너비 - 300px */
      border:1px solid #ccc;  /* 테두리 - 1픽셀 회색 실선 */
      padding:10px;  /* 네방향 패딩 10px */
    }
    #pos1{
      position:absolute;  /* 포지셔닝 - absolute */
      left:50px;  /* 왼쪽에서 50px 떨어지게 */
      top:50px;   /* 위쪽에서 50px 떨어지게 */
    }
    #pos2 {
      position:absolute;  /* 포지셔닝 - absolute */
      right:100px;  /* 오른쪽에서 100px 떨어지게 */
      top:100px;  /* 위쪽에서 100px 떨어지게 */
    }
    #pos3 {
      position: absolute;  /* 포지셔닝 - absolute */
      left:100px;   /* 왼쪽에서 50px 떨어지게 */
      bottom:100px;  /* 아래쪽에서 100px 떨어지게 */
    }
  </style>
</head>
<body>  
   <p id="pos1">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
   <p id="pos2">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
   <p id="pos3">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>

relative - 가장 가까운 요소를 기준으로 이동한다

static - 디폴트

fixed - 쇼핑몰의 상단으로 가는 버튼처럼 위치가 고정되어있는

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS position 속성</title>
  <style>
    p {
      width:500px;
      height:200px;
      background-color:#eee;
      border:1px solid #ccc;
      line-height:2;
    }
    #static {
      position:static;
    }
    #relative-1{
      position:relative;
    }
    #relative-2 {
      position:relative;   /* 포지셔닝 - relative */
      left:100px;  /* 왼쪽에서 100px 떨어지게 */
      top:-50px;   /* 위쪽에서 -50px 떨어지게 (위로 이동) */
    }
    #fixed {
      width:100px;
      height:100px;
      background-color:#222;
      position:fixed;  /* 포지셔닝 - fixed */
      right:30px;  /* 오른쪽에서 30px 떨어지게 */
      top:30px;  /* 위쪽에서 30px 떨어지게 */
    }
  </style>
</head>
<body>
   <p id="static">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Pariatur fugiat voluptate ea non amet cupidatat. </p>
   <p id="relative-1">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Magna Lorem excepteur occaecat cupidatat sunt proident tempor do nostrud labore cillum non exercitation voluptate. </p>
   <p id="relative-2">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Velit id duis enim reprehenderit eu dolor Lorem excepteur excepteur. </p>
   <p id="fixed"></p>
</body>
</html>

요소의 위치 조절

마크업에서 부모 자식 관계 설정
부모한테 포지션 relative
자식한테 포지션 absolute
원하는 포지션을 컨트롤 한다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS float 속성</title>
  <link rel="stylesheet" href="css/position-2.css">
</head>
<body>
    <div id="contents">
      <h1>CSS3</h1>      
    </div>
</body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;  
}

#contents {
  background: url('../images/bg.jpg') no-repeat;
  background-size: cover;
  width: 800px;
  height: 500px;
  margin: 0 auto;
}
h1 {
  color: #fff;
  font-size: 120px;
  text-shadow: 2px 3px 0 #000;
}

'코딩 > CSS 실습' 카테고리의 다른 글

[코드 연습장]CSS: 다양한 고급 선택자를 활용한 폼(Form)과 리스트 디자인 (0)	2026.03.25
[코드 연습장] CSS: Flexbox 기초 정렬 실습 및 반응형 프로필 카드 만들기 (0)	2026.03.23
[코드 연습장]CSS: 상대 단위(em/rem)와 유동적 이미지(Fluid Image) 기초 실습 (0)	2026.03.23
[코드 연습장] CSS 배경 꾸미기 (background-size, linear-gradient 등) (0)	2026.03.20
[코드 연습장] CSS 박스 만들기 (border, border-radius 활용) (1)	2026.03.18

현재글[코드 연습장] margin, padding, left-top등 박스 모델과 레이아웃 제어

haehaee 님의 블로그

haehaee 님의 블로그 입니다.

반응형웹, 가상요소, 코드연습장, css, 가상클래스, 미디어쿼리, 코딩공부, CSStransform, CSS함수, 플렉스박스, Til, 웹퍼블리싱, CSS레이아웃, ui구현, flexbox, rem단위, 프론트엔드, 반응형이미지, 속성선택자, CSSTransition,

Today :
Yesterday :

haehaee 님의 블로그