[HTML CSS] 레이아웃

📌 레이아웃

구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미 

 

📌화면 배치 방법 display 속성 

display :           ;            에 원하는 속성 배치

• block : 화면을 수직 분할(행을 나눔 / + width / height 속성 사용 가능) -> div
• inline : 화면을 수평 분할 (하나의 행의 컬럼을 나눔 == 글자처럼 생각하면 됨  + width / height 속성 사용 불가) -> span
• inline-block : inline 수평 분할 + block 의 크기 조정 
•  none : 화면에 요소가 표시되지는 않으나 존재는 하고 있는 상태
•  flex : 요소의 정렬되는 방향, 요소간의 간격을 유연하게 처리 하는 형식

 

💡 inline은 크기가 조절이 불가하지만! inline-block를 이용해서 크기 조절이 가능하게 만들 수 있다.

 

 

📌요소의영역(여백) 관련 속성

 

● 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-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로 인해 띄어져 있는 상태를 해제하는 속성