오늘의 수업 일정

금 | Day 05
✍️ #3.0 ~ #3.5
✔️ 퀴즈

수업 간단 정리

CSS 추가하는 방법은?

1)html파일안에 css같이 두기
head안에 style태그로 두기

2)html파일 따로! css파일 따로!
스타일시트(ex:style.css)파일 생성 후, link태그,rel=stylesheet로(relationship관계) head안에 넣어주기

더 좋은 방법은 분리된 파일을 만드는 것=코드가 보기 간결하고 여러 html 파일에 적용할 수 있어서!

CSS코드는 간단해! 3가지 규칙만 기억해!

css는 html 태그를 가리켜, 가리키는 자체를 selector이라고 해.

h1 {
    color: blue;
    font-size:20px;
}

selector = h1이고 그 안에는 속성{속성이름 : 속성값}이 들어간다.

Cascading ; 위에서 아래로 내려오는 이미지(폭포가 흐르는 것 떠올리기)
위에 있는 코드부터 차례차례 읽어간다.

근데 내부CSS(inline CSS)와 외부CSS(external CSS)중 우선순위는 어디일까?
위에서부터 차례대로 읽어가기 때문에 파일 맨 마지막에 있는 코드를 읽어 아래쪽에 있는 css가 적용된다고 보면 된다. (코드 순서가 영향을 미친다!) 즉, 결국 적용되는 건 마지막에 있는 코드!!!!

BOX ?!!

가장 기본적인 box는

<div></div>

박스들은 옆에 아무것도 오지 않는다.

 <span></span>

근데 span은 바로 옆에 올수있다.

두 가지 타입이 있다. 옆에 올 수 있는 것과 없는 것.
옆에 다른 요소가 올 수 없는 건 block
다른 요소가 올 수 있는 건 Inline

대부분의 박스들은 block이야
근데 Inline은 몇 개 없으니까 block을 기억하는 게 편하다(span, a, image 등)

block만이 가지고 있는 특징을 말해보자.

block과 Inline이 서로 바뀌는게 가능할까?
inline / block 서로 바꿀 수 있다. (display속성)

span{
	display : block;
}

block과 Inline 차이점은 Inline에는 높이와 너비가 없지만 block은 높이와 너비가 있다.

block의 세가지 특징
margin / border / padding

1.margin box의 경계(border)로부터 밖에 있는 공간

---

margin tip)

margin:z; 라면 상하좌우가 모두 z 적용

margin-top: a;
margin-right: b;
margin-bottom: c;
margin-left: d;
를 합쳐서 margin: a b c d; 하면 순서대로(시계방향) 적용

margin: a d; 상하는 a로 좌우는 d로 적용

margin:a, b, c라면,
top: a;
right, left: b;
bottom: c;
로 적용

---

Collapsing margin 현상 (상하에서만 발생)
경계가 만나면 하나가 된다.(body와 div의 상하가 만나면 같이 움직인다..어렵....)
=> padding 속성을 사용하여 해결할 수 있다.
⭐이해해보자! 완벽정리!⭐

->다음시간 강의에서..
2.border
3.padding

코코아 클론 챌린지 QUIZ

Your score is: 12/12