728x90
📌 레이아웃
구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미
📌화면 배치 방법 display 속성
display : ; 에 원하는 속성 배치
- block : 화면을 수직 분할(행을 나눔 / + width / height 속성 사용 가능) -> div
- inline : 화면을 수평 분할 (하나의 행의 컬럼을 나눔 == 글자처럼 생각하면 됨 + width / height 속성 사용 불가) -> span
- inline-block : inline 수평 분할 + block 의 크기 조정
- none : 화면에 요소가 표시되지는 않으나 존재는 하고 있는 상태
- flex : 요소의 정렬되는 방향, 요소간의 간격을 유연하게 처리 하는 형식
💡 inline은 크기가 조절이 불가하지만! inline-block를 이용해서 크기 조절이 가능하게 만들 수 있다.
📌요소의영역(여백) 관련 속성
![](https://blog.kakaocdn.net/dn/cBSeX8/btsjnHAxhXv/kHGwq4EYVRVQxSvfmoZQr1/img.png)
● content 영역 : 요소의 내용이 작성되어지는 영역 (시작태그와 종료태그 사이에 작성되는 내용을 생각하면 됨)
● padding 영역 : content 영역과 border 영역 사이
● border 영역 : 요소의 테두리가 지정되는 영역 ( content보다 바깥쪽에서 content를 감싸고 있음)
● margin 영역 : 다른 요소와의 간격을 나타내는 영역
🔊 content 크기 속성
width: 150px;
height: 150px;
: width/heigth 속성은 기본적으로 content 영역의 크기를 지정하는 속성이다.
🔊 border 크기 속성 (
border: 10px solid red;
: 10px 실선 빨간 테두리
border-top : 1px solid black;
border-bottom: 5px dashed rosybrown; /* dashed : 절취선 */
border-left: 10px dotted beige;/* dotted : 점선 */
border-right: 7px double orange;/
: border : 1px 2px 3px 4px ;
: border 속성은 상하좌우 방향을 한번에 지정 불가!
: border 속성은 상하좌우 방향을 한번에 지정 불가!
지정해주고 싶다면 border-뱡향으로 지정 하면 된다.
border-width: 20px 10px 5px 2px;
border의 크기만 설정하는 경우 위와 같이 설정할 수 있다.
🔊 padding 크기 속성 ( 내가 패딩을 입고 있음! 내가 뚱뚱해진다!)
padding: 30px;
: 내용과 테두리 사이 간격을 상하좌우 30px씩 벌림
/* 값 1개 : 상하좌우 */
/* padding: 30px; */
/* 값 2개 : 상하, 좌우 */
/* padding : 50px 100px */
/* 값 3개 : 상, 좌우, 하(위->아래 차례대로) */
/* padding : 10px 50px 100px */
/* 값 4개 : 상, 우, 하, 좌(상 기준 시계방향) */
padding : 10px 20px 30px 100px
🔊 margin 크기 속성 ( 서로간의 간격을 멀리 떨어뜨려놓는다! 싫어하는 사람이랑 같이 앉기 싫어!)
margin: 500px;
: 타 요소와의 간격을 상하좌우 50px씩 벌림
/* 값 1개 : 상하좌우 */
/* margin: 30px; */
/* 값 2개 : 상하, 좌우 */
/* margin: 50px 100px */
/* 값 3개 : 상, 좌우, 하(위->아래 차례대로) */
/* margin: 10px 50px 100px */
/* 값 4개 : 상, 우, 하, 좌(상 기준 시계방향) */
margin : 10px 20px 30px 100px
margin: auto;
- 좌우 요소간의 간격을 자동으로 지정하여 가운데 지정을 해준다!
🔊 box-sizing: border-box; / box-sizing:content-box;
box-sizing : width / height 는 기본적으로 content 영역에 대한 크기를 변경하는 방법이다.
border-box : width/ height 속성 지정 시 content+padding+border의 크기를 합산한 결과가
지정한 속성값과 같게 자동으로 비율을 계산하여 적용
content-box : width/height 속성 지정 시 content 영역만 지정
padding:20px;
border: 10px solid black;
width: 300px;
height: 300px;
box-sizing: border-box;
box-sizing:border-box; 을 이용하면 자동으로 비율을 계산해서 노출 하는 모습을 볼 수 있다.
📌요소의 정렬 관련 속성
- float : 요소를 띄워서 좌/우 정렬하는 속성
- clear : float로 인해 띄어져 있는 상태를 해제하는 속성
728x90
'ON > HTML CSS' 카테고리의 다른 글
[Javascript] 자바스크립트 기본 개념 (0) | 2023.06.19 |
---|---|
[css] 자동완성연습하기 (0) | 2023.06.14 |
[CSS] 클래스 선택 (0) | 2023.06.11 |
[CSS] 문자열 속성 [ ~= / |= / ^= / $= ] (0) | 2023.06.09 |
[CSS] 기본속성 | 자식선택자 | 후손선택자 (0) | 2023.06.08 |