CSS(Cascading Style Sheet) 기본형태

🔴 selector : 선택자
🟠 property : 속성
🟡 value : 값

❗ ';' 세미콜론 빼먹지 않게 항상 주의

selector{
    property : value;

📌 대게 아래와 같은 방법으로 HTML에 CSS를 적용한다

<link rel = "stylesheet" href = "style.css"/>

Box Model

🔴 Content : 가로는 width, 세로는 height

🟠 Padding : 안쪽 여백, 즉 content와 border 사이의 공간을 나타낸다

🟡 Border : 테두리를 나타내는 border

✔ border : 1px solid #000
✔ border : 굵기 스타일 색상 - 순서무관

-> 테두리를 쓰고 싶지 않을 때 - border : none 이라고 적어준다.
-> 테두리를 둥글게 할 때 - border-radius : 4px or border-radius : 50%

🟢 Margin : 바깥 여백, 즉 요소와 요소 사이의 간격을 나타낸다

✔ 속기형(shorthand) - 빠르게 쓰는법 : padding과 margin의 값을 정할 때 top -> right -> bottom -> left 순으로(시계방향으로) 값이 설정 되게 된다.

예시)

.box{
    width : 500px;
    height : 300px;
    padding : 20px 0;
    border : 1px solid #212121;
    margin-top : 30px;
    }

Box Sizing

📌 html에서의 class 이름이 css에서 선택자 이름으로 쓰인다.

// HTML
<div class = "box">
    Hello CSS
</div>

//CSS
.box{
    width : ~ ;
    ~;
    }

🔥 보통 css 코딩을 시작할 때 우리의 상식에 맞게 Box를 만들기 위해 아래와 같은 코드를 깔아두고 코딩을 시작한다.

// *은 전체선택자를 의미한다.
*{
    box-sizing : border-box;
 }

BOX

🤍 Box-type에는 Block, Inline, Inline Block, Flex가 있다.

🖤 Box-type에는 여러 종류가 있고 종류마다 동작 방식이 다르므로 정확하게 알아두어야 한다.

Block

🔑 Block의 특징

🔴 Block = 길막

🟠 Block 타입의 요소로 따로 width를 선언하지 않은 경우 : width = 부모의 content-box의 100%

🟡 width를 선언한 경우 : 남은 공간은 margin으로 자동 채움

🟢 따로 부모의 height를 선언하지 않은 경우 : 자식 요소의 height의 합 = 부모의 height

🔵 Box-model의 모든 요소를 다 사용할 수 있다

🟣 margin : 0 auto; // 가운데 정렬

Inline

🔑 Inline의 특징

🔴 Inline = 흐름

🟡 Box-model의 요소중 일부는 사용이 불가능하다

🟢 사용불가한 요소 : width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom

Inline - Block

🔑 Inline과 Block의 🍲짬뽕 콜라보!

🔥 약간 Inline의 단점을 보완한 친구랄까?? 그래서 Inline에서 사용불가한 요소들을 사용할 수 있다