-
CSS 포지셔닝과 주요 속성들
CSS 포지셔닝이란
CSS를 웹 문서 요소를 적절히 배치하는 것
box-sizing 속성
박스 모델 너비 값의 기준을 지정함
float 속성
요소를 왼쪽이나 오른쪽에 떠 있게 만듦
예제) float (이미지와 글자 배치)
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> #container{ width: 800px; margin: 20px auto; padding: 20px; } p{ line-height: 30px; } .left-img{ /* 이미지가 왼쪽으로 배치되면서 글자들이 오른쪽에 배치됨 */ float: left; /* 이미지 오른쪽에 margin 25px 만큼 생긴다 */ margin-right: 25px; } </style> <body> <div id="container"> <img src="images/cover.jpg" class="left-img"> <h1>바쁜 3,4학년을 위한 빠른 분수</h1> <h2>3,4학년이 꼭 알아야 할 분수를 한권에 모았어요!</h2> <p> 한국 교육과정펵가원이 최근 발표한 보고서에 따르면'수포자'는 초등 3학년때 분수를 배우면서 시작된다고 합니다. 한국 교육과정펵가원이 최근 발표한 보고서에 따르면'수포자'는 초등 3학년때 분수를 배우면서 시작된다고 합니다. </p> </div> </body> </html>예제) float (박스 한줄에 배치)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ background: #ffd800; padding: 20px; margin-right: 10px; /* 왼쪽에 배치되면서 박스2,3,4가 오른족에 배치됨 */ float: left; } .box2{ background: #0094ff; padding: 20px; margin-right: 10px; float: left; } .box3{ background: #00ff21; padding: 20px; margin-right: 10px; float: left; } .box4{ background: #ffffff; padding: 20px; margin-right: 10px; float: right; border: 1px solid black; } </style> </head> <body> <div class="box1">박스1</div> <div class="box2">박스2</div> <div class="box3">박스3</div> <div class="box4">박스4</div> </body> </html>예제) float-left (헤드라인 목록 정리 할때 많이 쓰임)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div ul{ list-style-type: none; margin: 0px; padding: 0px; } div ul li{ font-size: 1.5em; padding-left: 7px; margin-bottom: 15px; border-left-width: 5px; border-left-color: #990066; border-left-style: solid; float: left; /* display: inline-block; */ } a{ text-decoration: none; } .content{ padding-left: 10px; margin-bottom: 10px; border-top: 1px #a6a6a6 dashed; border-bottom: 1px #a6a6a6 dashed; } #cont{ clear: both; } </style> </head> <body> <div> <ul > <li><a href="#">애완견 종류</a></li> <li><a href="#">입양하기</a></li> <li><a href="#">건강돌보기</a></li> <li><a href="#">더불어살기</a></li> </ul></div> <div id="cont"> <h2>강아지 용품 준비하기 </h2> <div class="content"> <h3>강아지 집</h3> <p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 쑤있는 집으로 구입하세요. 집을 구입하실 때에는 박음질이 잘 되어 있는지, 세탁이 긴</p> </div> <div class="content"> <h3>강아지 먹이</h3> <p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요.강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요.강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. </p> </div> <p>Copyright 2012 funnycom</p> </div> </body> </html>clear 속성
float 속성을 무효화 시키는 속성
예제) float (clear:both;)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ padding: 20px; margin: 10px; } .box1{ background: #ffd800; float: left; } .box2{ background: #0094ff; float: left; } .box3{ background: #00ff21; /* none은 기본값 */ float: none; } .box4{ background: #a873ff; /* float: none; */ /* clear :both; */ /* left: both 하고 똑같이 표시됨 */ /* clear: left; */ /* right는 사용한게 없어서 none과 똑같이 표시됨 */ /* float을 적용 안 받으면 밑에 깔림 */ clear: right; } </style> </head> <body> <div class="box1">박스1</div> <div class="box2">박스2</div> <div class="box3">박스3</div> <div class="box4">박스4</div> </body> </html>position 속성
웹 문서 안에 요소들을 배치하기 위한 속성
1)position:static
문서의 흐름대로 배치한다.
예제) position (static)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ float:left; width: 100px; top: 300px; background: #ffd800; margin-right: 10px; padding: 20px; } .box2{ width: 300px; background: #0094ff; float: left; padding: 20px; } </style> </head> <body> <div class="box1">박스1</div> <div class="box2">박스2</div> </body> </html>2)position:relative
자연스럽게 배치
예제) position (relative)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ float:left; width: 100px; background: #ffd800; margin-right: 10px; padding: 20px; } .box2{ position: relative; left: -50px; top: 30px; width: 300px; background: #0094ff; float: left; padding: 20px; } </style> </head> <body> <div class="box1">박스1</div> <div class="box2">박스2</div> </body> </html>3)position:absolute
문서의 흐름과는 상관없이 원하는 위치에 요소를 배치
예제) absolute (박스 원하는 위치에 지정)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #wrap{ border: 1px solid #ccc; width: 300px; height: 300px; position: relative; /* relative : 자연스럽게 배치한다 */ } .box{ width: 50px; height: 50px; background: #0094ff; position: absolute; /* absolute : 위치값을 잡아서 배치한다 */ } #crd1{ top: 0; left: 0; } #crd2{ top: 0; right: 0; } #crd3{ bottom: 0; left: 0; } #crd4{ bottom: 0; right: 0; } #crd5{ top: 100px; left: 100px; } </style> </head> <body> <div id="wrap"> <div class="box" id="crd1"></div> <div class="box" id="crd2"></div> <div class="box" id="crd3"></div> <div class="box" id="crd4"></div> <div class="box" id="crd5"></div> </div> </body> </html>4)position:fixed
원하는 요소에 배치하고 브라우저 창 화면을 스크롤하더라도 계속 같은 위치에 고정
예제) fixed (스크롤을 내려도 박스 고정)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #fx{ top: 5px; right: 5px; width: 50px; height: 50px; background: #ff6a00; position: fixed; /* position: fixed; 스크롤을 내려도 고정해서 따라온다. */ } #content{ width: 400px; } p{ line-height: 30px; } </style> </head> <body> <div id="fx"></div> <div id="content"> <p> fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관없이 좌표로 위치를 결정하지만, 기분이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관없이 좌표로 위치를 결정하지만, 기분이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관없이 좌표로 위치를 결정하지만, 기분이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관없이 좌표로 위치를 결정하지만, 기분이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관없이 좌표로 위치를 결정하지만, 기분이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. </p> <p> fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관없이 좌표로 위치를 결정하지만, 기분이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관없이 좌표로 위치를 결정하지만, 기분이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관없이 좌표로 위치를 결정하지만, 기분이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관없이 좌표로 위치를 결정하지만, 기분이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관없이 좌표로 위치를 결정하지만, 기분이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. </p></div> </body> </html>visibility 속성
특정 요소를 화면에 보이거나 보이지 않게 설정하는 속성
예제)visibility (중간에 사진이 안보이게 지정)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img{ margin: 10px; padding: 5px; border: 1px solid black; } .invisible{ /* hidden 은 숨겨지면서 공간은 남아있음 */ visibility: hidden; } </style> </head> <body> <img src="images/pic1.jpg"> <img src="images/pic2.jpg" class="invisible"> <img src="images/pic3.jpg"> </body> </html>z-index 속성 요소 쌓는 순서 정하기
예제) z-index (박스 쌓는 순서)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100px; height: 100px; border: 1px solid black; font-size: 26px; /* position: relative; */ position: absolute; } #b1{ left: 50px; top: 50px; background: #ff0000; z-index: 2; /* z-index 쌓는 순서가 바뀐다 */ } #b2{ left: 110px; top: 70px; background: #ffd800; z-index: 3; } #b3{ left: 70px; top: 110px; background: #0094ff; z-index: 1; } </style> </head> <body> <div id="wrapper"> <div id="b1" class="box">1</div> <div id="b2" class="box">2</div> <div id="b3" class="box">3</div> </div> </body> </html>다단으로 편집하기
column-width 단의 너비를 고정해 놓고 화면 분할 화면이 커지면 단의 개수가 많아진다
예제) column (width) (너비 고정)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .multi{ /* column-width : 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */ column-width: 120px; } </style> </head> <body> <div> <h2>건강에 좋은 식품 - Super Food</h2> </div> <div class="multi"> <p> <b>코코넛 오일</b> : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. </p> <p> <b>블루베리</b> : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. </p> <p> <b>아몬드</b> : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. </p> </div> </body> </html>column-count 단의 개수를 먼저 정해 놓고 화면 분할 화면이 커질수록 단의 너비가 넓어진다
예제) column-count (단의 개수 고정)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .multi{ /* column-width : 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */ /* column-width: 120px; */ /* column-count 브라우저 크기를 늘리더라도 단이 고정으로 나타남 */ column-count: 3; } </style> </head> <body> <div> <h2>건강에 좋은 식품 - Super Food</h2> </div> <div class="multi"> <p> <b>코코넛 오일</b> : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. </p> <p> <b>블루베리</b> : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. </p> <p> <b>아몬드</b> : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. </p> </div> </body> </html>break-before,break-after
특정 요소의 앞이나 뒤에 다단 위치 지정
(주로 인쇄 목적)
예제) break-before (column 단 사이에 경계선 주기, h3 마다 단 나누기)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* div{ border: 1px solid #ccc; border-radius: 10px; } */ /* body{ width: 600px; padding: 20px; margin: 20px auto; } */ .multi{ /* column-width : 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */ /* column-width: 120px; */ /* column-count 브라우저 크기를 늘리더라도 단이 고정으로 나타남 */ column-count: 4; /* column-rule : 단의 경계선 스타일 */ column-rule: 2px dotted #000; /* column-gap : 단의 경계선으로 부터 속성값만큼 떨어져서 정렬됨(단사이의 여백) */ /* column-gap: 20px; */ /* width: 600px; margin: 20px auto; padding: 20px; */ } section{ width: 600px; padding: 20px; margin: 20px auto; border: 1px solid #ccc; border-radius: 10px; } .multi h3{ /* break-before : 내용의 크기가 다를때 단을 편집할수 있음 */ break-before: column; /* break-after: column; */ } </style> </head> <body> <section> <h2>건강에 좋은 식품 - Super Food</h2> <div class="multi"> <h3>코코넛 오일</h3> <p> 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. </p> <h3>블루베리</h3> <p> 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. </p> <h3>아몬드</h3> <p> 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. </p> <h3>케일</h3> <p> 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. 코코넛 오일 : 남미 파나마에서는 "코코넛 오일 한 컵이면 모든 병이 낫는다"라고 이야기 할 정도로 그 효능이 뛰어나다. </p> </div> </section> </body> </html>표 스타일
caption-side 캡션(설명글)은 기본으로 표 위쪽에 표시됨. 이 속성을 이용해 아래쪽에 표시 가능
border
(표의 바깥 테두리와 셀 테두리 모두 지정해야 함)
border-collapse 표 테두리와 셀 테두리를 합칠 것인지 설정
예제)border-collapse
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .table1{ border: 1px solid black; /* separate : 분리된 (기본값으로 변화없음) */ /* border-collapse: separate; */ /* collapse : 표하고 셀 테두리를 합침 */ border-collapse: collapse; } .table1 td{ border: 1px dotted black; padding: 10px; } </style> </head> <body> <table class="table1"> <caption>프로축구 경기 일정</caption> <tr> <td>울산</td> <td>울산 vs 인천</td> </tr> <tr> <td>부산</td> <td>부산 vs 대전</td> </tr> <tr> <td>서울</td> <td>서울 vs 강원</td> </tr> </table> </body> </html>border-spacing border-collapse:separate를 사용해 셀들을 분리했을 경우, 인 접한 셀 테두리 사이의 거리를 지정
예제) border-spacing (셀, 테두리 합친것과 셀만 띄우기)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ margin-bottom: 50px; } .table1{ border: 1px solid black; /* separate : 분리된 (기본값으로 변화없음) */ border-collapse: separate; /* collapse : 표하고 셀 테두리를 합침 */ /* border-collapse: collapse; */ border-spacing: 20px 10px; } .table2{ /* border-spacing : 셀 여백으로 가로/세로 적용됨 */ border-spacing: 20px 10px; } td{ border: 1px solid black; padding: 10px; } </style> </head> <body> <table class="table1"> <caption>프로축구 경기 일정</caption> <tr> <td>울산</td> <td>울산 vs 인천</td> </tr> <tr> <td>부산</td> <td>부산 vs 대전</td> </tr> <tr> <td>서울</td> <td>서울 vs 강원</td> </tr> </table> <table class="table2"> <caption>프로축구 경기 일정</caption> <tr> <td>울산</td> <td>울산 vs 인천</td> </tr> <tr> <td>부산</td> <td>부산 vs 대전</td> </tr> <tr> <td>서울</td> <td>서울 vs 강원</td> </tr> </table> </body> </html>width,height
셀의 너비와 높이 지정
table-layout 셀 안의 내용 양에 따라 셀 너비를 변하게 할지, 고정시킬지 결정
예제) table-layout
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table td{ border: 1px solid #ccc; } .table1{ border-collapse: collapse; /* 너비를 설정시 화면 축소해도 글자가 한줄로 표시 안됨 */ width: 300px; /* 300px에 맞추어서 테두리 밖으로 글자가 튕겨 나감 */ table-layout: fixed; /* 테두리 밖으로 글자가 튕겨 나간 글자가 들어옴 */ word-break: break-all; } .table1 td{ width: 150px; padding: 5px; } </style> </head> <body> <h1>Table Layout</h1> <table class="table1"> <tr> <td> 한글로띄어쓰기없이길게붙여쓰기 </td> <td> long-description_without-space </td> </tr> </table> </body> </html>text-align 셀 안에서의 수평 정렬 방법
예제)text-align (텍스트 가로 방향 정렬)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{ border: 1px solid #ccc; /* 테두리와 글자 사이의 여백이 10px */ padding: 10px; /* 테두리 밖의 여백 */ margin: 10px; } .align-left{ /* left는 기본 정렬 */ text-align: left; } .align-right{ /* right는 오른쪽 정렬 */ text-align: right; } .align-center{ /* center는 가운데 정렬 */ text-align: center; } .align-justify{ /* justify는 양쪽 정렬 */ text-align: justify; } </style> </head> <body> <h1>텍스트 정렬</h1> <!-- Lorem 를 사용후 컨트롤_스페이스 해서 선택:의미없는 글자를 사용 --> <p class="align-left"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum sit corrupti eum at iusto laborum nesciunt aut eligendi accusamus, reiciendis eveniet fugit odio? Fuga a laboriosam voluptatem earum, molestias excepturi! </p> <p class="align-right"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum sit corrupti eum at iusto laborum nesciunt aut eligendi accusamus, reiciendis eveniet fugit odio? Fuga a laboriosam voluptatem earum, molestias excepturi! </p> <p class="align-center"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum sit corrupti eum at iusto laborum nesciunt aut eligendi accusamus, reiciendis eveniet fugit odio? Fuga a laboriosam voluptatem earum, molestias excepturi! </p> <p class="align-justify"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum sit corrupti eum at iusto laborum nesciunt aut eligendi accusamus, reiciendis eveniet fugit odio? Fuga a laboriosam voluptatem earum, molestias excepturi! </p> <!-- 컨트롤 + 스페이스 자동완성 --> </body> </html>vertical-align
셀 안에서의 수직 정렬 방법
예제) vertical-align (텍스트 세로방향 정렬)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table,td{ border: 1px solid #ccc; } td{ height: 100px; padding: 20px; } .va1{ /* 수직 정렬에서 위 */ vertical-align: top; } .va2{ /* 수직정렬에서 아래 */ vertical-align: bottom; } .va3{ /* 수직 정렬에서 중간 */ vertical-align: middle; } </style> </head> <body> <table> <caption>vertical-alignment</caption> <tr> <td class="va1">alignment</td> <td class="va2">alignment</td> <td class="va3">alignment</td> </tr> </table> </body> </html>'CSS' 카테고리의 다른 글
HTML5와 멀티미디어 (0) 2023.06.22 HTML5와 시맨틱 태그 (0) 2023.06.22 css 박스모델 (0) 2023.06.22 색상과 배경을 위한 스타일 (0) 2023.06.22 텍스트 관련 스타일 (0) 2023.06.22