-
CSS - 영역 관련프로그래밍/HTML & CSS 2021. 9. 22.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .box{ border: 3px dotted gray; padding: 30px; text-align: center; } .box1{ width: 200px; height: 30px; margin: 20px 10px; } .box2{ width: 400px; min-height: 30px; margin: 20px auto; } </style> </head> <body> <h3>width, height</h3> <div class="box box1"> <p>자바</p> <p>스프링</p> <p>오라클/p> <p>서블릿</p> <p>CSS</p> </div> <div class="box box2"> <p>자바</p> <p>스프링</p> <p>오라클/p> <p>서블릿</p> <p>CSS</p> </div> </body> </html>- width와 height 개념은 매우 중요하다. 완전 기초
- box 라는 클래스를 미리 만들어서 전체 틀로 사용
선 경계는 3px 두께에 선 패턴 모양은 dotted 색깔은 회색
내부 간격 30px
텍스트 중앙에 오게 하기
- box1 클래스
너비 200px 높이 30px 외부 간격 위아래20px 좌우10px
- box2 클래스
너비 400px 높이는 최소 높이를 30px로 설정 외부 간격 20px 하고 위치는 가운데로 오게하기.
box box1 클래스의 결과
이렇게 잘려서 나오는 이유는 box랑 box1 의 높이가 30px로 설정이 되어 있기 때문이다.
box box2의 결과
화면 상에는 표시 안되지만 얘는 margin auto로 인해서 화면 중앙에 와 있는 상태이고
따로 높이 값을 설정하지 않아서 알아서 조절하고 있는 모습이다.
min-height = HTML 요소가 가질 수 있는 최소 높이를 설정하는 것.
원래 기본값은 0이고 0이라는 뜻은 높이에 제한을 두지 않겠다는 뜻
box-sizing : 요소의 너비와 높이를 계산하는 방법을 지정함.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .box{ width: 400px; height: 100px; padding: 20px; margin: 30px; border: 10px dotted gray; text-align: center; } .content-box {box-sizing: content-box;} .border-box {box-sizing: border-box;} </style> </head> <body> <h3>box-sizing : 요소의 너비와 높이를 계산하는 방법 지정</h3> <!-- 총 너비 : width + padding 좌우 + margin 좌우 + border 좌우 --> <!-- 총 너비 : 400 + 40 + 60 + 20 --> <!-- 내용 폭 : width(400) --> <div class="box content-box">content-box(기본)</div> <hr> <!-- 총 너비 : width(padding과 border포함) + margin 좌우 --> <!-- 총 너비 : 400 + 60 (margin만 더하면 됨)--> <!-- 내용 폭 : width(400) - (40+20) --> <div class="box border-box">border-box</div> </body> </html>content-box 옵션은 padding, margin, border의 영향을 받는다.
예를 들어서 width를 400px로 준다고해도 마진이나 패딩이 들어가면 또 그만큼 커진다.
실제 입력한 사이즈 그대로 사용하고 싶을때 border-box를 이용해야 한다.
너비가 460으로 나오는 이유는 기본 너비 400 + 패딩 20 + 마진 30 + 경계선 10 의 결과다
반면에 보더 박스의 너비는 딱 400으로 맞춰진걸 볼 수 있다.
display와 inline, block의 개념
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .box { width: 150px; height: 150px; padding: 10px; margin: 30px; background: yellow; border: 2px dotted gray; } .inline-block { display: inline-block; } .block { display: block; } </style> </head> <body> <h3>display : 요소를 블록과 인 라인 요소 중 어느 쪽으로 처리 할 지와 함께, 자식 요소를 배치할 때 사용할 레이아웃을 설정</h3> <div>인라인 요소는 요소의 width, height 속성은 무시되며, padding 은 반영되고, margin은 좌우 간격만 반영이 되고 상하 간격은 반영이 되지 않는다.</div> <div> <span class="box">inline</span> <span class="box">inline</span> </div> <div>inline-block : 요소를 한 줄에 배치하면서 블록 요소 처럼 width, height, margin과 padding등을 지정</div> <div> <span class="box inline-block">inline-block</span> <span class="box inline-block">inline-block</span> </div> <div> block 특성을 가지는 요소(block 레벨 요소)로 지정</div> <div> <span class="box block">block</span> <span class="box block">block</span> </div> </body> </html>
일단 처음 2개의 인라인 박스는 설명 div 안에 있는 자식 div로써 width와 heigth 속성이 무시 되어서 저렇게 겹치는 현상이 일어났다.
다만 padding과 margin은 적용이 되어서 서로의 간격은 벌어진 모습이다.
inline-block은 말 그대로 인라인처럼 요소를 한줄에 배치하는데 block의 속성을 가지고 있어서 width, height, margin, padding의 적용을 받은것
block은 그냥 block이니까 한줄에 배치 안되고 하나의 영역씩 배치가 된다.
block의 영역
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .box { width: 150px; height: 150px; padding: 10px; margin: 30px; background: yellow; border: 2px dotted gray; line-height: 150px; text-align: center; font-weight: bold; } </style> </head> <body> <h3>display: none-영역이 없어짐, visibility: hidden-영역은 있음</h3> <div class="box">A</div> <div class="box" style="display: none;">display: none</div> <div class="box">B</div> <div class="box" style="visibility: hidden;">visibility: hidden</div> <div class="box">C</div> </body> </html>
- 실행 결과를 보면 A와B 사이에 display:none 옵션을 준 div 태그가 있는데
아예 표시가 안됨.
- 그러나 hidden 옵션을 준 놈은 박스가 보이진 않지만 영역이 존재함.
vertical-align : 정렬 방식 지정
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .box { width: 150px; height: 150px; padding: 10px; margin: 30px; background: yellow; border: 2px dotted gray; text-align: center; font-weight: bold; font-size: 20px; display: inline-block; } </style> </head> <body> <h3>vertical-align - inline, inline-block 에서 수직 정렬 방식 지정</h3> <div> <div class="box">1</div> <div class="box">1<br>2<br>3</div> </div> <hr> <div> <div class="box" style="vertical-align: top;">1</div> <div class="box" style="vertical-align: top;">1<br>2<br>3</div> </div> </body> </html>
- dispaly: inline-block 옵션으로 한줄에 박스들을 나열한 모습
- vertical-align = 요소 자체만을 정렬하는거지 내용과는 무관함.
반응형'프로그래밍 > HTML & CSS' 카테고리의 다른 글
CSS - margin 마진 겹침 현상 (0) 2021.09.22 CSS - 다양한 옵션들 (0) 2021.09.22 CSS - 기초(5) / 글자의 공백 처리 및 배경 이미지 다루기 (0) 2021.09.21 CSS - 기초(4) (0) 2021.09.18 CSS - 기초(3) 가상 클래스 / 링크 셀렉터 (0) 2021.09.16
