1. html에 css 추가하는 방법.
1) 같은 파일에 html, css 코드를 함께 넣는 방법: inline css
<head>안에 <style>을 넣는다.2) html과 css파일을 분리하는 방법: external css
<link href="css파일명.css" rel="stylesheet" /> 다양한 html페이지에 적용 할 수 있기 때문에 2번 방법을 사용하는 것이 더 좋다.
2. css 양식
- 양식 적는 방법
selector {
property: value;
}3. Cascading
두개 이상의 css가 같은 selector(요소)를 적용하면, 위에서 부터 차례로 적용한다.
따라서 가장 마지막에 변경 된 css가 적용된다.
4. block vs inline (in css) ⭐️
box는 대부분이 block이다. (대부분의 HTML 요소는 block 요소입니다.)
따라서 block이 아닌 span, link, img 등과 같은 inline요소 들을 기억하는 것이 중요합니다.
-
Block 특징
1) width, high 가진다.
2) 속성: margin (border 바깥의 공간), padding (경계 안쪽의 공간), border
3) 예시:header,footer,p,li,table,div,h1 -
inline 특징
1)width, high(없음)
2) margin: 좌/우 에만 적용됨.
( why? width, high가 없기 때문
만약 실전에서 상/하 margin을 주고싶다면 inline을 block으로 바꿔줘야 한다.)
3) padding: 사방으로 적용 가능.
4) 예시:span,a,img
하지만~! CSS를 이용하여 block요소를 inline으로, inline요소를 block으로 바꿀 수 있습니다.😲
1. Block to Inline
.inline-p {
display: inline-block;
}
.float-left {
float: left;
}float는 요즘 잘 사용하지 않지만 한 방법이기 때문에 함께 정리합니다.
2. Inline to Block
.block-span {
display: block;
}- 참고
1) margin, padding: 값이 두개-상하/좌우, 네개-상/우/하/좌
2) Collapsing margins: 박스의 경계가 다른 박스의 경계와 같다면, 이 두개의 margin은 하나로 취급된다. (상/하 에서만 일어남)
5. selector
- Universal: *
- type: tag
- id지칭: #id (중복 불가능)
- class: .class (여러 요소 중복 가능)
<div class=“(요소1)(요소2)(요소3)”> </div>- state: :
- attribute
[]
a[href="google.com"] {
}
바스버거