display 요소 표시 속성 ( block / inline / inline-block )
HTML이 가지는 기본 요소의 속성을 다른 속성으로 변경 시 또는 요소를 숨기거나 표시할 경우 사용합니다.
크기나 여백을 사용할 때는 그 대상이 블록/인라인 어느쪽에 해당되는 대상인지를 먼저 체크하고
그에 따른 속성과 값을 배치해야 합니다.
그 때 필요에 따라 display라는 CSS 속성이 사용됩니다.(필수가 아닌 상황에 따른 선택적 속성)
display:none;
display:inline;
display:block;
display:inline-block;
block 요소 특징
ex) h1~6, p, div, blockquote, dl, dt, dd, ol, ul, li, header, footer, nav, main, section, article, video, iframe, table, tr, td, th, thead, tbody, tfoot, hr, form, filedset 등
- 기본 너비 100%를 가지고 있습니다.
- 크기, 여백 적용이 가능합니다.
- 너비100%와는 별도로 항상 줄바꿈이 이루어집니다.
inline 요소 특징
ex) a, img, span, em, strong, i, del, s, q, code, button, input, select, option, legend, label, br 등
- 인라인 태그 내 내용(텍스트 및 이미지)의 크기만큼만 인식합니다.
- 크기를 적용할 수 없습니다.
- 여백(margin, padding)이 적용은 되나 크기 적용불가 특징으로 인해 주변 요소와 겹침현상이 발생합니다.
- 줄바꿈이 되지 않고 옆으로 나열됩니다.
inline-block 요소 특징
- CSS display 명령으로 적용할 수 있습니다.
- 크기, 여백 적용이 가능합니다.
- 줄바꿈이 되지 않고 옆으로 나열됩니다.
- 인라인-블록 요소 사이 기본 공백이 포함됩니다.
visibility
display:none과 달리 레이아웃을 변화시키지 않고 요소를 숨기는 속성
- visibility:visible 요소 보이기
- visibility:hidden 요소 숨기기
- visibility:collapse tbale, flex적용 시 display:none과 동일처리, 기본 hidden동일
width 너비
* 요소의 너비 값을 설정합니다.
* 상대값과 절대값에 따라 %, px로 구분합니다.
width:100% /*퍼센트 상대값*/
width:100px /*픽셀단위 절대값*/
height 높이
* 요소의 높이 값을 설정합니다.
* 상대값과 절대값에 따라 %, px로 구분합니다.
* 화면 높이(viewport) 기준으로 vh 단위를 사용 가능합니다.
height:auto; /*웹페이지 높이 자동인식*/
height:100%; /*상대값*/
height:100px /*픽셀단위 절대값*/
height:100vh; /*뷰포트 100%*/
margin 바깥쪽 여백, padding 안쪽 여백
* padding, margin 안쪽/바깥쪽 의미만 다를 뿐 작성방법이 동일합니다.
* 속성의 값을 몇개로 작성하느냐에 따라 인식하는 방향이 다릅니다.
* 값이 0일때는 단위를 생략해도 됩니다. 1 이상일 경우는 반드시 단위를 작성해야 합니다.
* 값을 1개 작성할 경우
* 상/하/좌/우에 모두 동일한 값이 적용됩니다.
* 값을 2개 작성할 경우
* 상하 / 좌우에 각각 다른 값이 적용됩니다.
* 값을 3개 작성할 경우
*상/좌우/하에 각각 다른 값이 적용됩니다.
* 값을 4개 작성할 경우
* 상/우/하/좌에 각각 다른 값이 적용됩니다.
* 12시부터 시계방향이라고 생각하면 쉽습니다.( 12시 / 3시 / 6시 / 9시 )
margin:상하 좌우;
margin:상 좌우 하;
margin:통합;margin:20px 30px;
margin:30px 20px 10px
margin:10px;
border 테두리
border:1px solid red;
border:1px dashed black;
border:1px dotted coral;border-top:1px solid #aaa;
border-bottom:1px solid #aaa;
border-left:1px solid #aaa;
border-right:1px solid #aaa;border-width:1px;
border-style:solid;
border-color:red;border-radius:10px;
border-radius:10%;
border-radius:50%;
box-sizing 요소의 너비, 높이 계산 방법
box-sizing:content-box; (기본)
box-sizing:border-box;box-sizing 적용 전(왼쪽) 후(오른쪽) 차이점을 함께 알아봅시다.
