Learn & Record
HTML CSS (box요소, display, 레이아웃, float 속성, float-clear, 중첩박스, box-sizing 속성, 연습문제, lsit style, inline, block, overflow, display, scroll box, 목록 스타일) 본문
HTML CSS (box요소, display, 레이아웃, float 속성, float-clear, 중첩박스, box-sizing 속성, 연습문제, lsit style, inline, block, overflow, display, scroll box, 목록 스타일)
Walker_ 2024. 3. 20. 17:051. box 요소
- border : 테두리굵기, 스타일, 색상
- margin : 바깥쪽 여백
- padding : 안쪽 여백
- 박스 block 속성
- 마진 margin 속성 : 박스의 바깥쪽 여백, 주로 박스 간의 간격 설정에 주로 사용
- 패딩 padding 속성 : 박스의 안쪽 여백, 박스 안쪽의 콘텐츠 간격을 설정할 때 주로 사용
- 박스의 실제 넓이와 높이 공식
- 한개의 박스에 margin * border * padding값이 모두 적용되었다는 가정
- width 속성과 height 속성은 텍스트가 들어가는 영역(contents)의 넓이와 높이를 지정
- 전체넓이 : width + 2 * (margin + border + padding)
- 전체높이 : height + 2 * (margin + border + padding)
- 전체넓이 : 200 + (20 + 40) + (10 + 10) + (30 + 30) = 340
- 전체높이 : 150 + (10 + 30) + (10 + 10) + (30 + 30) = 270
- 박스넓이 : 200 + (10 + 10) + (30 + 30) = 200
- 박스높이 : 150 + (10 + 10) + (30 + 30) = 230
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Box</title>
<style>
* {
margin:0;
padding: 0;
}
.box1 {
width: 200px;
height: 150px;
border: 10px solid #6666; /* 테두리 굵기, 스타일, 색상 */
margin : 10px 20px 30px 40px; /* 바깥쪽 여백 */
padding: 30px; /* 안쪽 여백 */
}
</style>
</head>
<body>
<div class="box1">
<h2>TITLE-1</h2>
<p>
Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text
</p>
</div>
</body>
</html>
2. display
- display 속성을 이용한 화면 배치
- 요소를 어떤 성격을 보여줄지 결정하는 속성
- display 속성을 사용하면 상황에 따라 블럭 요소를 인라인 요소로,
- 인라인 요소를 블록 요소로 변환하여 사용할 수 있음
- 1) block
- 박스가 아래로 쌓이는 성격과 부모 요소의 넓이를 100% 사용하는 성격을 가짐
- div, h, p, table, ul, ol
- 2) inline
- 글자와 같이 나열되는 성격과 내용물에 따라 넓이가 결정되는 성격을 가짐
- 해당 요소와 넓이만큼만 영역을 가짐
- a, span, i, em
- 3) inline-block
- 4) none
3. 레이아웃
- html 초기 형태는 레이아웃 (예를 들어 다단 편집)의 활용에 신경을 쓰지 않을 때라서
- table 태그가 레이아웃을 잡는 용도로 사용
- html4 부터는 레이아웃 용도로 table 태그 대신 div에 float 속성을 부여하는 방향으로 사용
- html5 이후 부터는 display 속성에 flex, grid 추가 하여 레이아웃에 사용
- float 속성
- float의 사전적 의미는 '떠오르다', '떠다니다'
- 웹 페이지에서는 float을 왼쪽이나 오른쪽에 배치할 때 사용하며
- 배치를 하지 않을 경우 'none'으로 표현
- 삽화 사용뿐 아니라, 레이아웃(block)을 나열할 때 많이 사용
- 기본적으로 레이아웃을 형성시에 가장 많이 사용하는 태그
- left : 문서의 왼쪽으로 배치. 블록 박스를 왼쪽으로 부터 나열하고 싶을 때 사용
- right : 문서의 오른쪽으로 배치. 블록 박스를 오른쪽으로부터 나열하고 싶을 때 사용
- none : 배치하지 않음. 정렬하지 않음
- left와 right를 통해 나열 속성을 지정하면 display의 개념은 무시됨 (none은 제외)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
*/
.camera {
float: left;
}
</style>
</head>
<body>
<img src="./img/camera01.png" class="camera" alt="camera01">
<h2>TITLE-1</h2>
<p>
Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text
</p>
</body>
</html>
4. float 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 300px;
border: 2px solid black;
}
.box1{
float: left; /* 해당 요소를 왼쪽으로 배치 */
}
.box2{
float: left; /* 해당 요소를 왼쪽으로 배치 */
}
.box3{
float: left; /* 해당 요소를 왼쪽으로 배치 */
}
</style>
</head>
<body>
<div class="box1">01</div>
<div class="box2">02</div>
<div class="box3">03</div>
</body>
</html>
5. float - clear
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
float 속성으로 박스를 배치하면 이어지는 요소들도 동일한 속성이 적용
float 속성이 더 이상 필요하지 않으면 기존 속성을 해제하기 위한 clear 속성을 사용
* clear
float 나열에 대한 값을 지우고, 문서의 흐름을 제거하기 위해 사용하는 태그
float: left를 이용해 왼쪽으로 배치했다면 clear: left로 종료
float: right를 배치했다면 clear: right로 속성을 해제
두 개를 동시에 해제하거나, left인지 right인지 확인하기 어려우면 clear: both로 지정하여 float 정렬을 취소할 수 있음
clear: left - 왼쪽으로 붙는 float 정렬을 취소
clear: right - 오른쪽으로 붙는 float 정렬을 취소
clear: both - 왼쪽, 오른쪽으로 붙는 float 정렬을 취소
clear: none - clear 속성을 설정하지 않은 것과 같음
*/
div {
width: 300px;
height: 300px;
border: 2px solid black;
}
.box1 {
float: left
}
.box2 {
float: left
}
.box3 {
float: left
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box1">01</div>
<div class="box2">02</div>
<div class="box3">03</div>
<div class="clear">04</div>
<div>05</div>
<div>06</div>
<div>07</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.banner {
width:740px;
height: 120px;
background-color: burlywood;
float: left;
}
.login {
width: 333px;
height: 120px;
background-color: beige;
float: left;
margin-left: 8px;
/* 로그인 박스 기준에서 간격을 주고자 왼쪽 바깥쪽 여백을 지정하였으며,
배너 박스 기준일 때 바깥쪽 여백은 margin-right가 됨
*/
}
.main{
width: 1081px; /* 배너 박스와 로그인 박스를 더한 값 */
height: 120px; /* 두 개 박스의 고정 높이 */
margin: 0 auto;
/* margin 값이 2개일 때 top bottom, left right로 지정 */
}
</style>
</head>
<body>
<div class="main">
<div class="banner">배너영역</div>
<div class="login">로그인</div>
</div>
</body>
</html>
6. 중첩 박스
- 안쪽 박스에 border 속성 추가
- border가 추가 되면 박스의 넓이와 높이에 영향을 주게 되어서
- 박스들이 밑으로 밀려나는 현상이 나타남
- block 속성을 가진 박스의 넓이가 지정되어 있을 때 margin:0 auto를 통해 가운데 배치가 가능하며
- margin: auto auto라고 입력하면 브라우저의 위아래는 자동 인식이 되지 않지만 좌우는 자동으로 가운데 배치 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>banner2</title>
<style>
.banner {
width:740px;
height: 120px;
background-color: burlywood;
float: left;
border: 2px solid black;
}
.login {
width: 333px;
height: 120px;
background-color: beige;
float: left;
margin-left: 8px;
/* 로그인 박스 기준에서 간격을 주고자 왼쪽 바깥쪽 여백을 지정하였으며,
배너 박스 기준일 때 바깥쪽 여백은 margin-right가 됨
*/
border: 2px solid black;
}
.main{
width: 1089px; /* 배너 박스와 로그인 박스를 더한 값 */
height: 120px; /* 두 개 박스의 고정 높이 */
margin: 0 auto;
/* margin 값이 2개일 때 top bottom, left right로 지정 */
}
</style>
</head>
<body>
<div class="main">
<div class="banner">배너영역</div>
<div class="login">로그인</div>
</div>
</body>
</html>
7. box-sizing 속성
- 박스를 배치하기 위해서는 박스 모델의 넓이와 높이에 대한 계산이 중요
- 박스의 넓이와 높이는 콘텐츠의 넓이와 높이만을 나타내기 때문에
- 패딩과 보더 값을 따로 계산해야 함
- box-sizing : content-box
- 넓이 속성을 콘텐츠 영역 넓이값으로 사용. 기본 값
- box-sizing: border-box
- 넓이 속성을 콘텐츠 영역의 테두리까지 포함한 박스 모델 전체 넓이값으로 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>box</title>
<style>
div {
width: 300px;
height: 300px;
border: 10px solid black; /* 테두리 스타일 */
padding: 30px; /* 안쪽 여백 공통지정 */
}
.box1{
box-sizing: border-box;
/* 박스의 테두리와 여백을 박스의 넓이와 높이에 포함. 넓이가 300px */
}
.box2{
box-sizing: content-box;
/* 기본값과 동일. 넓이가 300 + (30 + 30) + (10 + 10) = 380px */
}
</style>
</head>
<body>
<div class="box1">01</div>
<div class="box2">02</div>
</body>
</html>
8. 연습문제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>practice</title>
<style>
.box1{
background-color: #47a39f;
}
.box2{
background-color: #a1f19a;
}
.box3{
background-color: #efec70;
}
div{
width: 200px;
height: 200px;
border: 1px #008eff solid;
float: left;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="box1">
<img src="img/camera01.png" alt="카메라1" width="100" >
<p>Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text</p>
</div>
<div class="box2">
<img src="img/camera02.png" alt="카메라2" width="100">
<p>Lorem Ipsum is simply dumtext Lorem Ipsum is simply dummy text</p>
</div>
<div class="box3">
<img src="img/camera03.png" alt="카메라3" width="100">
<p>Lorem Ipsum is sLoreply dummy textrem Ipsum is simply dummy text</p>
</div>
</body>
</html>
9. list style
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
border: 2px solid black; /* 테두리 스타일 */
}
.v_menu {
list-style: none; /* 목록 항목의 스타일 기호를 없앰 */
}
/*
display: inline : 블록 요소를 인라인 요소로 변경
*/
.h_menu {
display: inline;
}
</style>
</head>
<body>
<ul>
<li class="v_menu">세로메뉴얼1</li>
<li class="v_menu">세로메뉴얼2</li>
<li class="v_menu">세로메뉴얼3</li>
<li class="v_menu">세로메뉴얼4</li>
</ul>
<ul>
<li class="h_menu">네이버</li>
<li class="h_menu">다음</li>
<li class="h_menu">쿠팡</li>
<li class="h_menu">구글</li>
</ul>
</body>
</html>
10. inline
- span 태그의 성격은 inline의 성격을 가지고 있기 때문에 width, height, margin-top, margin-bottom값이 적용 안됨
- float 속성이 부여되면 width, height, margin-top, margin-bottom 값이 적용이 됨
- 제거 전후를 붙여 차이점을 확인
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
span{
background-color: aqua;
width: 100px;
height: 100px;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<span>inline 성격의 태그</span>
<span>inline 성격의 태그</span>
</body>
</html>
11. inline-block
- display : inline-block
- 인라인과 블록의 합성속성. 글자와 같이 옆으로 나열, 블럭과 같이 css에 대한 모든 적용이 이루어지는 성격
- inline의 경우 한줄로 배치할 수 있지만, 넓이와 높이, 마진과 같은 정확한 값이 필요한경우에는 적용이 힘듬
- inline 속성의 특성은 내부 콘텐츠만큼안 공간을 차지하고 있어서 넓이와 높이의 스타일이 적용이 안됨
- inline-block을 사용하면 해당 요소들을 가로로 배치할 수 있고 각 요소의 넓이와 높이 등 정확한 수치를 지정할 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
border: 2px solid black;
}
.menu1 {
display: inline; /* 목록 항목의 스타일 기호를 없앰 */
background-color: yellowgreen;
width: 150px;
height: 40px; /* 넓이, 높이를 지정하였으나 inline 속성이기에 넓이, 높이가 적용되지 않음 */
}
.menu2 {
display: inline-block; /* inline-block 속성으로 변경 */
background-color: orange;
width: 150px;
height: 40px; /* 넓이, 높이를 지정하면 inline-block 속성이기에 넓이, 높이가 적용됨 */
}
</style>
</head>
<body>
<ul>
<li class="menu1">inline</li>
<li class="menu1">inline</li>
<li class="menu1">inline</li>
<li class="menu1">inline</li>
</ul>
<ul>
<li class="menu2">inline-block</li>
<li class="menu2">inline-block</li>
<li class="menu2">inline-block</li>
<li class="menu2">inline-block</li>
</ul>
</body>
</html>
12. display
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 100px;
border: 2px solid black;
background-color: orange;
text-align: center; /* 수평 중앙 정렬 */
}
/*
수직 중앙 정렬에 사용하는 방법 3가지
1. line-height로 부모 박스의 높이를 지정
2. display의 table-cell 속성 적용 후 vertical-align사용
3. position이 absolute일 경우 top: 50%, transform: translate
*/
div.line-height{
line-height: 100px; /* 높이를 line-height로 사용 */
}
div.cell {
display: table-cell;
vertical-align: middle;
}
div.rel {
position: relative;
}
div.rel p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="cell">vertical-align</div>
<div class="line-height">vertical-align</div>
<div class="rel"><p>vertical-align</p></div>
<!-- line-height를 사용할 경우애눈 요소가 한줄이어야 함 -->
<div class="line-height">vertical-align verical align vertical-align</div>
</body>
</html>
13. display 속성
- display: none
- 해당 요소와 공간을 모두 표시하지 않음
- visiblility: hidden
- visibility 속성은 화면에는 요소가 보이지 않으나 공간은 그대로 유지
- 사용예 ) 팝업창 등록
14. box 안 내용물
- overflow 속성
- 내부 요소가 부모 박스의 범위를 벗어날 때 어떻게 처리할 것 인지 지정
- 콘텐츠가 자주 업데이트 되는 경우 높이가 콘텐츠의 양에 따라 자동으로 변경이 되나
- 박스의 높이를 고정값으로 할 때 사용
- hidden : 영역을 벗어나는 부분은 보이지 않음
- scroll : 영역을 벗어나는 부분은 스크롤 바가 나타남
- visible : 박스를 넘어가도 보여줌
- auto : 박스를 넘어가지 않으면 스크롤 바가 나오지 않고, 박스를 넘어갈 때 스크롤 바가 나타남
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin:0;
padding: 0;
}
div {
width: 200px;
height: 200px;
border:2px solid black; /* 테두리 굵기, 테두리 스타일, 테두리 색상 */
float: left;
box-sizing: border-box; /* 테두리 값을 박스의 넗이와 높이의 안쪽으로 포함시킴 */
margin: 10px;
margin-left: 30px; /* 외쪽 바깥쪽 여백을 30px로 지정함 */
}
.contents1 {
}
.contents2 {
}
.contents3 {
height: auto;
overflow: hidden;
}
.contents4 {
overflow: scroll;
}
</style>
</head>
<body>
<div class="contents1">
<h4>콘텐츠의 양이 일정</h4>
<p>Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text</p>
</div>
<div class="contents2">
<h4>콘텐츠의 양이 많거나 유동적일 떄 흘러넘침</h4>
<p>Lorem Ipsum is simply dummy text Loremum is simply dummy text Loremum is simply dummy text Loremum is simply dummy text Loremum is simply dummy text Lorem Ipsum is simply dummy textLorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text</p>
</div>
<div class="contents3">
<h4>콘텐츠의 양에 따라서 높이가 늘어남</h4>
<p>Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy textLorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text</p>
</div>
<div class="contents4">
<h4>텍스트가 지정된 높이만큼만 콘텐츠가 보여짐</h4>
<p>Lorem Ipsum is simply dummy text m is simply dummy text m is simply dummy text m is simply dummy text Lorem Ipsum is simply dummy textLorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text</p>
</div>
</body>
</html>
14. Scroll Box
- overflow: scroll 속성 사용
- 박스 (block)의 내부 스크롤 바를 지정하고자 할 때 사용
- overflow : 영역을 벗어나는 가로, 세로, 부분을 스크롤 바로 나타나게 하거나 숨김
- overflow-x : 가로 좌표에 대한 스크롤 바로 나타나게 하거나 숨김
- overflow-y : 세로 좌표에 대한 스크롤 바로 나타나게 하거나 숨김
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
float: left;
box-sizing: border-box; /* 테두리 값을 박스의 넓이와 높이의 안쪽으로 포함시킴 */
width: 200px;
height: 200px;
border: 2px solid black;
margin: 10px;
margin-left: 30px; /* 왼쪽 바깥쪽 여백은 30px로 지정됨 */
}
.scroll_box1{ /* 가로, 세로 스크롤 바 모두 보임 */
margin-left: 10px; /* 왼쪽 바깥쪽 여백은 30px로 지정됨 */
overflow: scroll; /* 가로, 세로 스크롤 바를 모두 보임 */
}
.scroll_box2{ /* 가로 스크롤 바만 보임 */
overflow-x: scroll; /* 가로 스크롤 바를 표시 */
overflow-y: hidden; /* 세로 스크롤 바를 숨김 */
}
.scroll_box3{ /* 가로 스크롤 바만 보임 */
overflow-x: hidden; /* 가로 스크롤 바를 표시 */
overflow-y: scroll; /* 세로 스크롤 바를 숨김 */
}
</style>
</head>
<body>
<!-- 스크롤 바를 가로, 세로 모두 표시-->
<div class="scroll_box1">
<h4>SCROLL-X, Y</h4>
<p><img src="img/camera02.png" alt="대체이미지"></p>
</div>
<!-- 스크롤 바를 가로만 표시-->
<div class="scroll_box2">
<h4>SCROLL-X</h4>
<p><img src="img/camera02.png" alt="대체이미지"></p>
</div>
<!-- 스크롤 바를 세로만 표시-->
<div class="scroll_box3">
<h4>SCROLL-Y</h4>
<p><img src="img/camera02.png" alt="대체이미지"></p>
</div>
</body>
</html>
15. 목록 스타일
- 목록 스타일 속성
- 목록 태그에 스타일을 지정하는 방법으로 순서가 없는 항목(ul), 순서가 있는 항목(ol) 태그에 적용
- list-style-type 속성
- 순서가 없는 항목 태그와 순서가 있는 항목 태그 앞에 나오는 블릿과 번호 스타일을 변경
- 순서가 없는 항목은 블릿 모양으로 선택이 가능하며
- 순서가 있는 항목은 숫자 형태로 나타낼 수 있음
- 순서가 없는 항목의 속성
- none : 블릿 없애기
- disc : 채운 원
- circle : 빈원
- square : 채운 사각형
- 순서가 있는 항목의 속성
- decimal : 1로 시작하는 십진수
- decimal-leading-zero : 앞에 0이 붙는 십진수
- lower-roman : 로마 숫자 소문자
- upper-roman : 로마 숫자 대문자
- lower-alpha, lower-latin : 알파벳 소문자
- upper-alpha, upper-latin : 알파벳 대문자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.bullet_circle{
list-style-type: circle; /* 빈 원으로 표시 */
}
.bullet_circle{
list-style-type: none; /* 블릿을 표시하지 않음 */
}
</style>
<body>
<!--블릿 변경하기-->
<ul class="bullet_circle">
<li>회사소개</li>
<li>생산설비</li>
<li>제품소개</li>
<li>온라인문의</li>
<li>커뮤니티</li>
</ul>
<!--블릿 없애기-->
<ul class="bullet_none">
<li>회사소개</li>
<li>생산설비</li>
<li>제품소개</li>
<li>온라인문의</li>
<li>커뮤니티</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.bullet_circle{
list-style-type: lower-alpha; /* 알파벳 소문자 */
}
.bullet_circle{
list-style-type: upper-latin; /* 알파벳 대문자 */
}
</style>
<body>
<!--블릿 변경하기-->
<ol class="bullet_circle">
<li>회사소개</li>
<li>생산설비</li>
<li>제품소개</li>
<li>온라인문의</li>
<li>커뮤니티</li>
</ol>
<!--블릿 없애기-->
<ol class="bullet_none">
<li>회사소개</li>
<li>생산설비</li>
<li>제품소개</li>
<li>온라인문의</li>
<li>커뮤니티</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*
전체 선택자(*)를 지정해서 마진과 패딩 값을 0으로 초기화해서 사용하는 경우
-> 브라우저마다 기본 패딩값과 마진 값이 달라서 0으로 초기화 해서 사용
* list-style-posision 속성
항목 번호가 보이지 않는 경우 들여쓰기 스타일 사용
inside : 블릿이나 숫자를 안쪽으로 들여씀
outside : 블릿이나 수자를 밖으로 내어씀
*/
* {
margin: 0;
padding: 0;
}
.bullet_circle{
list-style-type: lower-alpha; /* 알파벳 소문자 */
list-style-position: inside; /* 블릿이나 숫자르 안쪽으로 들여씀 */
}
</style>
<body>
<ol class="bullet_circle">
<li>회사소개</li>
<li>생산설비</li>
<li>제품소개</li>
<li>온라인문의</li>
<li>커뮤니티</li>
</ol>
</body>
</html>
공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.
부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.
읽어주셔서 감사합니다 :)
