LGHV_3기_레이아웃을 구성하는 CSS 박스 모델_HTML/CSS(8.1)

Pepzera·2025년 3월 17일
LG 헬로비전 DX DATA SCHOOL 3기 공부 정리웹 개발

LGHV3기_공부정리

목록 보기
11/34
post-thumbnail

Chap 08-1 레이아웃을 구성하는 CSS 박스 모델

레이아웃을 구성하는 CSS 박스 모델

1. CSS와 박스 모델

블록 레벨 요소

특징

  • 한 줄을 전부 차지하며, 자동으로 줄 바꿈이 됨
  • 너비를 조정할 수 있으며 기본적으로 부모 요소의 전체 너비(100%)를 차지함.
  • 상하 마진을 지원하여 요소 사이에 간격을 둘 수 있음.
  • 일반적으로 큰 단락을 구성하는 데 사용되어 레이아웃 구조를 형성함.

대표적인 블록 레벨 요소

  • <div> : 가장 일반적인 블록 컨테이너로, 레이아웃을 만들 때 사용
  • <p> : 단락을 나타내는 요소로, 본문 텍스트를 구성할 때 사용
  • <h1> ~ <h6> : 제목 요소로, 각기 다른 크기를 나타냄
  • <ul>, <ol>, <li> : 목록을 구성하는 요소들
  • <header>, <footer>, <nav>, <section>, <article> : HTML5에서 추가된 레이아웃을 구성하는 요소들
  • 코드 예시 )
...
	<title>블록 레벨과 인라인 레벨</title>
	<style>
		body * {
			/* body 하위에 있는 모든 요소에 대해 */
			/* 블록 요소들이 차지하고 있는 부분들을 시각화 하기 위해 */
			border: 1px solid blue;
		}

		.accent {
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<h1>시간이란...</h1>
	<div>내일 죽을 것처럼 <p class="accent">오늘</p>을 살고 </div>
	<p>영원히 살 것처럼 <br>내일을 꿈꾸어라. </p>
</body>
</html>
  • 결과 )

인라인 레벨 요소

특징

  • 한 줄에 여러 요소가 나란히 배치될 수 있으며, 자동 줄 바꿈이 일어나지 않음
  • 기본적으로 콘텐츠의 너비만큼만 차지하며, 높이와 너비를 지정해도 반영되지 않음.
  • 인라인 레벨 요소는 블록 레벨 요소 안에 포함될 수 있으며, 주로 텍스트와 함께 사용됨.
  • 상하 마진은 적용되지 않고 좌우 마진만 적용.

대표적인 인라인 레벨 요소

  • <span> : 스타일링이나 텍스트 구분을 위해 사용되는 범용 인라인 컨테이너.
  • <a> : 하이퍼링크를 설정하는 요소
  • <img> : 이미지를 삽입하는 요소
  • <strong>, <em>, <b>, <i> : 텍스트를 굵게하거나 기울이는 등, 스타일링을 위한 요소.
  • <input>, <label> : 폼 입력 요소와 그 라벨
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>블록 레벨과 인라인 레벨</title>
		<style>
			body  * {  /* body 하위에 있는 모든 요소에 대해 */
				border:1px solid blue;
			}
			.accent {
				color:red;
				font-weight:bold;
			}
		</style>
	</head>
	<body>
		<h1>시간이란...</h1>
		<div>내일 죽을 것처럼 <span class="accent">오늘</span>을 살고 </div>
		<p>영원히 살 것처럼 <br>내일을 꿈꾸어라. </p>	  
</body>
</html>
  • 결과 )

박스 모델

  • 박스 모델 🙄
    • 요소의 레이아웃을 구성하는 CSS의 핵심 개념으로 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin) 영역으로 구성
    • 개발자 도구 창에서 박스 모델 확인 가능
      1. 웹 브라우저에서 웹 문서 열기
      2. 박스 모델 확인할 부분을 마우스 오른쪽 버튼으로 누른 뒤 [검사] 선택
      3. 개발자 도구 창 위에서 [Computed] 탭 클릭
      4. 해당 부분의 박스 모델이 그림으로 표시됨

크기 속성 (width, height 속성)

  • 요소의 콘텐츠 영역 크기를 설정하는 속성
  • 절대 크기로 고정할 수도 있고, 상대 크기로 설정해 반응형으로 만들 수도 있음.
종류설명
<크기>너비나 높이의 값을 px이나 em 단위로 지정함.
<백분율>박스 모델을 포함하는 부모 요소를 기준으로 너비값이나 높이값을 백분율(%)로 지정함.
auto박스 모델의 너비값과 높이값이 콘텐츠 양에 따라 자동으로 결정됨. (기본값)
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
    div {
      border: 1px solid #000;
      margin: 50px 20px;
      /* margin-bottom: 20px; */
      /* bottom 50, top 30 일 경우에는 50으로 잡힘 (겹쳐질 때 큰 값으로 잡힘) */
    }
    /* 박스 모델의 너비와 높이 지정하기 */
		.box1 {
			width:650px;        /* 고정 너비 */
			height:100px;       /* 고정 높이 */
		}
    .box2 {
      width:70%;          /* 가변 너비 */
      height:75px;       /* 고정 높이 */
    }
	</style>
</head>
<body>
  <div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, dignissimos. Impedit perferendis fugiat facere molestiae!</div>
  <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur laboriosam ullam, excepturi vitae ratione quos.</div>
</body>
</html>
  • 결과 )
    • px로 조정 시에는 너비와 높이가 바뀌지 않음!
    • %로 조정했을 시에는 웹 브라우저 창에 따라 크기가 달라짐!

box-sizing 속성

  • 실제 박스 모델의 너비를 계산할 때 어디까지 포함할지 결정하는 속성
    • border-box : 테두리까지 포함해서 너빗값을 지정함.
    • content-box : 콘텐츠 영역만 너빗값을 지정함. (기본값)

box-shadow 속성

  • 선택한 요소에 그림자 효과 내기
  • 기본형 : box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset
    • 수평 거리 : 그림자가 가로로 얼마나 떨어져 있는지를 나타냄. 양숫값은 요소의 오른쪽에, 음숫값은 요소의 왼쪽에 그림자를 만듦. 필수 속성
    • 세로 거리 : 그림자가 세로로 얼마나 떨어져 있는지를 나타냄. 양숫값은 요소의 아래쪽, 음숫값은 요소의 위쪽에 그림자를 만듦. 필수 속성
    • 번짐 정도 : 값을 생략하면 0을 기본값으로 하여 진한 그림자를 표시함. 이 값이 커질수록 부드러운 그림자를 표시하며, 음수값은 사용 불가
    • 색상 : 한 가지만 지정할 수도 있고, 공백으로 구분해서 여러 개의 색상을 지정할 수도 있음. 기본값은 현재 검은색.
    • inset : 키워드 사용 시, 안쪽 그림자로 그려짐.
  • 코드 예시 )
...
	<title>박스모델</title>
	<style>    	
		.button-1 {
			font-size: 2em;
			background: #fff;
      padding:15px 30px;
			margin:15px;				
      border: 1px solid #222;	
			/* 박스 모델에 그림자 추가하기 */
      /* 오른쪽 아래에 그림자 효과*/
			box-shadow: 2px 2px 5px 5px #475AFF;
			margin-right: 40px;
		}	
		.button-2 {
			border: 1px none black;
			border-radius: 15px;
			padding: 30px 50px;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 20px;
			box-shadow: 0px 0px 15px 10px rebeccapurple;
			background-color: aqua
		}
	</style>
</head>
<body>
	<div>
		<button class="button-1">Hello</button>
		<button class="button-2">Buy</button>
	</div>
</body>
</html>
  • 결과 )

2. 테두리 스타일 지정하기

박스 모델의 값 지정 방향

  • 4개 방향의 값을 한꺼번에 지정할 때는 방향 순서를 지켜야 함.
  • top → right → bottom → left

border-style 속성

  • 기본 값이 none → 화면에 테두리 표시안됨

  • 테두리를 그리기 위해서는 맨 먼저 테두리 스타일부터 지정

  • 기본형 : border-style : none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid

    종류설명
    none테두리 없음 (기본값)
    solid테두리를 실선으로 표시
    dotted테두리를 점선으로 표시
    dashed테두리를 짧은 직선으로 표시
    double테두리를 이중선으로 표시
    groove테두리를 창에 조각한 것처럼 표시
    ridge테두리를 창에서 튀어나온 것처럼 표시
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		div {
			width:200px;
			height:100px;
			display:inline-block;
			margin:15px;
			text-align: center;
			font-size:20px;
			/* 가운데 정렬 */
			line-height:100px;
			border-width:5px;  /* 테두리 굵기 */
		}
		/* 테두리 스타일 지정하기 */
		  /* 실선 */
		.box1 {
			border-style: solid;
		}
		  /* 점선 */
		.box2 {
			border-style: dotted;
		}
		  /* 짧은 점선 */
		.box3 {
			border-style: dashed;
		}
	</style>
</head>
<body>
	<div class="box1">실선 테두리 </div>
	<div class="box2">점선 테두리 </div>
	<div class="box3">점선 테두리</div>
</body>
</html>
  • 결과 )

border-width 속성

  • 테두리 두께 지정
  • 기본형 : border-width : <크기> | thin | medium | thinck
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		div {
			width:200px;
			height:100px;
			display:inline-block;
			margin:15px;			
			border-style:solid;  /* 테두리 스타일 - 실선 */
		}
		/* 테두리 두께 지정하기 */
    .box1 {
      border-width: 5px;  /* 네 방향 모두 2px */ 
    }
    .box2 {
      border-width: thick tㅔ hin;  /* top & bottom - thick, left & right - thin */
    }
    .box3 {
      border-width:thick thin thin thin;  /* top - thick, right - thin, bottom - thin, left - thin */ 
    }
    .box4 {
      border-width:10px 5px 5px 10px;  /* top - 10px, right - 5px, bottom - 5px, left - 10px */
    }
	</style>
</head>
<body>
	<div class="box1"></div>
  <div class="box2"></div>	
	<div class="box3"></div>
	<div class="box4"></div>	  
</body>
</html>
  • 결과 )

border-color 속성

  • 테두리 색상 지정

  • 코드 예시 )

...
	<title>박스모델</title>
	<style>
		div {
			width:200px;
			height:100px;
			display:inline-block;
			margin:15px;			
			border-style:dashed;  /* 테두리 스타일 - 선으로 된 점선 */
			border-width:5px; /* 테두리 굵기 - 2px */
		}
		/* 박스 모델의 테두리 색상 지정하기  */
		.box1 { 
				 /* 전체 테두리 - 빨강 */
			border-color: red;
		}
		.box2 { 
       /* 위쪽 테두리 - 파랑 */
			border-top-color: blue;
        /* 왼쪽 테두리 - 빨강 */
			border-left-color: red;
				/* 하단 테두리 - 초록 */
			border-bottom-color: green;
    } 
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>	
</body>
</html>
  • 결과 )

✨ border 속성

  • 테두리 스타일과 두께, 색상 등을 묶어 표기
  • border-top 이나 border-right처럼 방향을 함께 써서 4개 방향의 스타일을 따로 지정할 수 있음
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		/* 테두리 스타일 묶어서 지정하기 */
		h1 {
			padding: 10px 0px;
			border-bottom: 3px solid blue; /* 아래쪽 테두리만 3px짜리 파란 실선*/
			border-top: 3px solid red; /* 위쪽 테두리만 3px짜리 빨강 실선 */
		}
		p {
			padding: 10px;
			border: 5px dotted blue; /* 모든 테두리를 3px짜리 파란 점선 */
		}
	</style>
</head>
<body>
	<h1>박스 모델</h1>
	<p>박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있습니다. </p>	
</body>
</html>
  • 결과 )

border-radius 속성

  • 박스 모델의 테두리를 둥글게 처리
  • 박스 모델의 꼭짓점 부분에 원 (반지름 r)이 있다고 가정해서 둥굴게 처리
  • border와 radius 사이에 위치를 나타내는 예약어를 사용하면 꼭짓점마다 다르게 처리 가능
  • 기본형 : border-radius : <크기> | <백분율>
  • 코드 예시 ) - 1
...
	<title>박스모델</title>
	<style>
    /* 이미지 꼭짓점을 둥글게 처리하기 */
		.round {
        /* 네 방향 꼭짓점을 둥글게 */
			border-radius: 25px;
    }    
	</style>
</head>
<body>
  <img src="images/cat.jpg">
	<img class="round" src="images/cat.jpg">
</body>
</html>
  • 결과 ) - 1
  • 코드 예시 ) - 2, 원으로 만들기
...
	<title>박스모델</title>
	<style>
    /* 이미지를 원형으로 표시하기 */
		.circle {
			  /* 테두리를 원으로 */
			border-radius: 50%;
		}    
	</style>
</head>
<body>
	<img src="images/photo.jpg">
	<img class="circle" src="images/photo.jpg">
</body>
</html>
  • 결과 ) - 2
  • 코드 예시 ) - 3, 예약어 사용
...
	<title>박스모델</title>
	<style>
    div {
      width:200px;
      height:150px;
      border: 2px solid blue;
    }
    /* 원하는 꼭짓점만 둥글게 처리하기 */
		.corner {
      /* 왼쪽 위 꼭짓점만 둥글게 */
      border-top-left-radius: 20px;
      /* 오른쪽 위 꼭짓점만 둥글제 */
      border-top-right-radius: 10px;
    }    
	</style>
</head>
<body>
  <div class="corner"></div>
</body>
</html>
  • 결과 ) - 3
profile
Pepzera
Hi
이전 포스트

LGHV_3기_텍스트를 표현하는 다양한 스타일_HTML/CSS(7.2)

다음 포스트

LGHV_3기_레이아웃을 구성하는 CSS 박스 모델_HTML/CSS(8.2)

0개의 댓글