CSS를 HTML에 추가하는 방법
- HTML의 head 안에 CSS 코드를 작성해준다.
<style>태그 안에 작성 후 닫아주기 - CSS파일 (_.css) 을 별도로 생성 후 HTML파일에 두 파일을 연결해준다.
<link>태그로 두 파일간 관계를 정의해주기
<link href="_.css" rel="stylesheet">CSS 작성 규칙
- 꾸미고자 하는 태그
<selecter>지정하기 - {} 중괄호 안에 속성과 속성값 작성하기
글자색, 글자크기, 정렬 등을 속성 (property) 라고 한다 - 다음과 같은 순서로 작성
selecter {
속성 : 값;
속성 : 값;
}속성 이름은 띄어쓰기, _ (밑줄), / (슬래쉬) 사용 불가!!
Cascading 이란?
- 브라우저가 css를 읽을 땐 위에서부터 순서대로 읽는다
- 만약 같은 selector를 가르키는 css에 같은 property를 지정하면 마지막에 명령한 스타일이 적용된다
이유는 위에서부터 아래로 내려오며 적용되기 때문
Blocks and Inlines
-div 옆에 다른 div 오지 않음
-span 옆에 다른 span 올 수 있음
-link 옆에 올 수 있음
-p 옆에 올 수 없음
옆에 다른 요소가 못 오는 것 block
옆에 다른 요소가 오는 것 inline
inline 의 대표적인 태그 <span>,<link>,<img>
Block의 특징 (margin, padding, border)
block에서 inline으로, inline에서 block으로 바꾸기 가능? -> 가능하다
이렇게 하는 걸 display 속성이라고 한다
기본적으로 span의 display 속성은 inline이다. 이걸 block으로 바꿔주면 span도 block이 된다.
그렇다면 div를 inline으로 바꾸면 어떤 일이 일어날까? → div가 사라진다.
이유는 어떤 요소가 inline이면 그 요소는 높이와 너비를 가질 수 없기 때문이다.
높이와 너비가 없고 내용도 없기 때문에 사라져 보인다. 내용이 있으면 그 내용만큼의 크기를 가지고 보여지게 된다.
inline은 높이와 너비가 없고, block은 높이와 너비가 있다.
block의 엄청난 특징 3가지는 다음과 같다.
브라우저는 요소들에게 원치 않아도 많은 style 속성을 준다.
user agent stylesheet : 브라우저가 기본적으로 준 style 속성
- margin : box의 border(경계)의 바깥에 있는 공간
- padding
- border
CSS 마진 상쇄(Margin-collapsing) 원리 이해하기
Padding
- padding이란? box의 경계로부터 안쪽에 있는 공간
- 값의 개수에따라 적용되는 방향은 margin과 동일하다.
( 2개 상하 / 좌우 , 4개 상 우 하 좌 ) - 여러 div 생성 시 'id'를 이용하여 div 들을 구분
- CSS - #id{}
Border
- border이란? box의 경계
- 작성시 -> border : 두께 스타일 색 ;
- *: 모든 요소를 가르킨다.
💻