on
CSS - 영역 관련
CSS - 영역 관련
Insert title here .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; } width, height 자바 스프링 오라클/p> 서블릿 CSS 자바 스프링 오라클/p> 서블릿 CSS
- 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 : 요소의 너비와 높이를 계산하는 방법을 지정함.
Insert title here .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;} box-sizing : 요소의 너비와 높이를 계산하는 방법 지정 content-box(기본) border-box
content-box 옵션은 padding, margin, border의 영향을 받는다.
예를 들어서 width를 400px로 준다고해도 마진이나 패딩이 들어가면 또 그만큼 커진다.
실제 입력한 사이즈 그대로 사용하고 싶을때 border-box를 이용해야 한다.
너비가 460으로 나오는 이유는 기본 너비 400 + 패딩 20 + 마진 30 + 경계선 10 의 결과다
반면에 보더 박스의 너비는 딱 400으로 맞춰진걸 볼 수 있다.
display와 inline, block의 개념
Insert title here .box { width: 150px; height: 150px; padding: 10px; margin: 30px; background: yellow; border: 2px dotted gray; } .inline-block { display: inline-block; } .block { display: block; } display : 요소를 블록과 인 라인 요소 중 어느 쪽으로 처리 할 지와 함께, 자식 요소를 배치할 때 사용할 레이아웃을 설정 인라인 요소는 요소의 width, height 속성은 무시되며, padding 은 반영되고, margin은 좌우 간격만 반영이 되고 상하 간격은 반영이 되지 않는다. inline inline inline-block : 요소를 한 줄에 배치하면서 블록 요소 처럼 width, height, margin과 padding등을 지정 inline-block inline-block block 특성을 가지는 요소(block 레벨 요소)로 지정 block block
일단 처음 2개의 인라인 박스는 설명 div 안에 있는 자식 div로써 width와 heigth 속성이 무시 되어서 저렇게 겹치는 현상이 일어났다.
다만 padding과 margin은 적용이 되어서 서로의 간격은 벌어진 모습이다.
inline-block은 말 그대로 인라인처럼 요소를 한줄에 배치하는데 block의 속성을 가지고 있어서 width, height, margin, padding의 적용을 받은것
block은 그냥 block이니까 한줄에 배치 안되고 하나의 영역씩 배치가 된다.
block의 영역
Insert title here .box { width: 150px; height: 150px; padding: 10px; margin: 30px; background: yellow; border: 2px dotted gray; line-height: 150px; text-align: center; font-weight: bold; } display: none-영역이 없어짐, visibility: hidden-영역은 있음 A display: none B visibility: hidden C
- 실행 결과를 보면 A와B 사이에 display:none 옵션을 준 div 태그가 있는데
아예 표시가 안됨.
- 그러나 hidden 옵션을 준 놈은 박스가 보이진 않지만 영역이 존재함.
vertical-align : 정렬 방식 지정
Insert title here .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; } vertical-align - inline, inline-block 에서 수직 정렬 방식 지정 1 123 1 123
- dispaly: inline-block 옵션으로 한줄에 박스들을 나열한 모습
- vertical-align = 요소 자체만을 정렬하는거지 내용과는 무관함.
from http://heidong.tistory.com/92 by ccl(A) rewrite - 2021-09-22 19:01:07