노마드코더 코코아톡 클론코딩 3일차

#3.0 How to Add CSS to HTML

1. 같은 html 파일에 html 코드와 css 코드를 놓는 방법

: <head>안에서 <style> 태그 안에 css를 작성한다.

2. html과 css를 분리하는 방법

: 별도의 .css 파일을 만들고 <link> 태그로 연결,

css 파일과 html 도큐먼트의 관계를 stylesheet 라고 명시해준다.

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

-> 분리된 파일을 사용하면 여러 html 파일에서 사용할 수 있기 때문에 더 좋은 방법이다.

#3.1 Writing Our First CSS Lines

*css는 html 태그를 가리킴(이 content는 초록색이야). 이때 이 가리키는 것 자체를 selector라고 한다.

css 사용 방법

selector (가리키는 대상)를 쓰고,
중괄호 { } 안에 원하는 속성을 쓴다.
속성 이름: 속성값;

*속성 이름에 띄어쓰기가 있으면 안되고 각 줄이 세미콜론으로 끝나야 한다.

<style>
 h1 {
    color: blue;
    font-size: 20px;
 }
</style>

#3.2 What Does Cascading Mean

CSS = Cascading Style Sheet ; 브라우저가 css코드를 읽을 때 위에 있는 코드부터 차례대로 읽는다.

->같은 대상을 가리키는 코드가 여러개 있다면 가장 마지막에 나오는 코드가 적용된다.

#3.3 Blocks and Inlines

앞에서 배웠던 box 성질 (div 등..)은 옆에 아무것도 올 수 없다.

하지만 box가 아닌 것들은 옆에 다른 것이 올 수 있다.

>>옆에 다른 요소가 못 오는 것을 block이라 하고 다른 요소가 올 수 있는 것을 inline이라고 부른다.

아주 작은 글이나 링크, 그림 등등이 inline에 속한다. inline에 속하는 것은 많지 않기 때문에 block이 아닌 것들이 무엇인지를 기억하는게 더 편하다.

#3.4~3.5 Margin Part

block ↔ inline 으로 서로 바꿀 수 있다. = display 속성

span의 display 속성 기본값은 inline이다. 이걸 display: block; 을 써서 block으로 바꿀 수 있다.

마찬가지로 div를 display: inline; 을 서서 inline으로 바꿀 수 있다.

inline은 높이와 너비가 없고 block은 높이와 너비가 있다.

*box의 강력한 속성 세가지 : margin, padding, border

margin: box의 border(경계)의 바깥에 있는 공간

내가 설정하지 않아도 브라우저가 기본으로 margin을 설정한다.

<style>
  body {
    margin: 20px 15px;
    margin: 20px 5px 12px 9px;
  }
</style>

<!--margin값 두 개: {위,아래 / 왼쪽,오른쪽}을 뜻함-->
<!--margin값 네 개: 시계방향 순으로 {위/오른쪽/아래/왼쪽}-->

collapsing margins 현상

: A box의 경계가 B box의 경계와 같을 때 두 box의 margin은 하나가 된다.

이 현상은 위, 아래쪽에서만 발생한다.

#3.6 Paddings and IDs

padding: box의 경계로부터 안쪽에 있는 공간

특정 id에 css를 적용시킬 때 : #id { }

#3.7 Border

border: box의 경계

border는 많은 속성이 있지만 거의 한가지만 사용한다.

너비, 스타일, 색상 순으로 작성한다.

<style>
	* {
    	border: 2px solid black;
    	}
	span {
    	border-style: dotted;
    	}
</style>

border의 스타일만 바꾸고 싶을 때, 또는 한 가지 스타일만 바꾸고 싶을 때 border 코드 전체를 다시 쓸 필요 없다. border-style과 같이 하나만 따로 적용할 수 있다.

* 는 전체를 뜻한다. 모든 요소에 스타일을 적용하고 싶으면 * { } 안에 작성하면 된다.

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

🐶🦒

노마드코더 코코아톡 클론코딩 3일차

#3.0 How to Add CSS to HTML

#3.1 Writing Our First CSS Lines

#3.2 What Does Cascading Mean

#3.3 Blocks and Inlines

#3.4~3.5 Margin Part

#3.6 Paddings and IDs

#3.7 Border

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역