🔴 selector : 선택자
🟠 property : 속성
🟡 value : 값
❗ ';' 세미콜론 빼먹지 않게 항상 주의
selector{
property : value;
📌 대게 아래와 같은 방법으로 HTML에 CSS를 적용한다
<link rel = "stylesheet" href = "style.css"/>
🔴 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;
}
📌 html에서의 class 이름이 css에서 선택자 이름으로 쓰인다.
// HTML
<div class = "box">
Hello CSS
</div>
//CSS
.box{
width : ~ ;
~;
}
🔥 보통 css 코딩을 시작할 때 우리의 상식에 맞게 Box를 만들기 위해 아래와 같은 코드를 깔아두고 코딩을 시작한다.
// *은 전체선택자를 의미한다.
*{
box-sizing : border-box;
}
🤍 Box-type에는 Block, Inline, Inline Block, Flex가 있다.
🖤 Box-type에는 여러 종류가 있고 종류마다 동작 방식이 다르므로 정확하게 알아두어야 한다.
🔑 Block의 특징
🔴 Block = 길막
🟠 Block 타입의 요소로 따로 width를 선언하지 않은 경우 : width = 부모의 content-box의 100%
🟡 width를 선언한 경우 : 남은 공간은 margin으로 자동 채움
🟢 따로 부모의 height를 선언하지 않은 경우 : 자식 요소의 height의 합 = 부모의 height
🔵 Box-model의 모든 요소를 다 사용할 수 있다
🟣 margin : 0 auto; // 가운데 정렬
🔑 Inline의 특징
🔴 Inline = 흐름
🟡 Box-model의 요소중 일부는 사용이 불가능하다
🟢 사용불가한 요소 : width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom
🔑 Inline과 Block의 🍲짬뽕 콜라보!
🔥 약간 Inline의 단점을 보완한 친구랄까?? 그래서 Inline에서 사용불가한 요소들을 사용할 수 있다