[노마드코더] Learning CSS

CSS를 HTML에 추가하는 방법

1. HTML의 head안에 CSS코드를 작성해준다. (style)태그 안에 작성 후 닫아주기

2. CSS파일(_.css)을 별도로 생성후, HTML파일에 두 파일을 연결해준다. (link)태그로 두 파일간 관계를 정의해주기. (link href="~.css" rel="stylesheet")

2번 방법이 더 좋다. 코드가 보기 간결하고, 동일한 형식의 CSS를 연결하기가 편하기 때문

 

---

### CSS 작성 규칙

1. selector을 작성한다. CSS가 하는 일은 HTML 태그를 가리키는 것이다. (이건 어떤 색이다...등) 이렇게 연결하는걸 selector이라고 한다.

2. 어떤 태그를 가리켰으면 원하는 속성을 쓴다.

ex)blueTitle의 글씨체는 뭐고...글씨 크기는 어떻고...이런 것들을 속성(property)라고 한다.

selector은 많은 속성을 가질 수 있다. 그리고 이러한 속성들을 묶어주기 위해서 중괄호(curly bracker)을 사용한다.

아주 많은 속성들이 있어서 그것들을 다 외우는건 바보같은 짓이다. 대신 어떻게 사용하는지만 알면 된다.

color:blue; 속성이름:속성값; 와 같은 형식으로 작성한다. 주의할 점은 CSS 속성 이름에는 띄어쓰기를 쓰지 않는다.

font-size(o) font size(x) 또한 밑줄(_)이나 슬래쉬(/)도 사용하면 안 된다.

오로지 - 만 사용하라. CSS의 모든 속성들은 어떤 값이든 쓸 수는 있다 다만 맞는 값을 써줘야 효과가 적용이 된다.

 

---

### CSS 뜻과 작동 방식

CSS : Cascading Style Sheet

Cascading : 위에서 아래로 내려오는 이미지(폭포가 흐르는 것 떠올리기)

어떤 것 다음에 어떤 것이 온다 이것이 cascading이 의미하는 바다.

브라우저가 CSS 코드를 읽을 때 cascading 방식으로, 즉 위에 있는 코드부터 차례차례로 읽힌다.

위에서 아래로 읽는다는 브라우저가 CSS를 읽는 방법을 아는게 가끔 유용하다.

inline CSS와 external CSS 두 CSS 코드가 같은 대상을 가리키게 되면 어떻게 될까?

→ 브라우저는 위에서 아래로 코드를 읽으므로 마지막에 있는 코드가 우리에게 보여지게 된다.

가장 마지막으로 변경된 속성이 우리에게 보여진다.

그래서 코드의 순서를 바꾸면 최종적으로 보여지는 모습이 달라진다.

CSS는 위에서 아래로 작동한다. 결국 적용 되는 건 가장 마지막 코드다.

 

---

어떤 웹사이트든 그걸 이루는 모든 요소들이 box

box를 만들면 그 박스 옆에 또 다른 박스가 오지 않음

span은 바로 옆에 다른 요소들이 올 수 있음(가로로 쭉 적어짐)
link도 바로 옆에 옴

즉, div는 box고 span, link, code는 박스가 아님

p도 박스, address, header

옆에 다른 요소 못오는거 = block
다른 요소 올 수 있는 거 = inline(in the same line)

inline에는 아주 작은 글이나 링크, 그림 등등이 속함. inline에 해당하는 것들은 많이 없음.
따라서 block이 아닌 종류를 기억하는게 훨씬 편함.
span, a, 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 속성

1. **margin : box의 border의 바깥에 있는 공간**
2. padding
3. border

 

---

### Margin 값 방향

방향없이 margin 값 주면(value가 하나) → 사방에 다 적용이 된다.(위, 아래, 오른쪽, 왼쪽)

margin에 value를 두개 주게 되면 그것은 위아래, 오른쪽왼쪽을 뜻한다.

### Margin 값 방향

방향없이 margin 값 주면(value가 하나) → 사방에 다 적용이 된다.(위, 아래, 오른쪽, 왼쪽)

margin에 value를 두개 주게 되면 그것은 위아래, 오른쪽왼쪽을 뜻한다.

collapsing margin : 

흰 box의 경계가 보라색 box의 경계와 같다면 이 두 margin은 하나로 취급이 된다. 경계가 만나면 하나가 된다.

이걸 collapsing margin 현상이라고 하고 위, 아래쪽에서만 일어난다.

 

---

margin 과 , padding 이 햇갈리실텐데 이렇게 생각하시면 됩니다.

 

우리가 입는 옷으로 비유를 하자면
[ 입고있는 흰 면티옷 기준을 하나의 box라고 가정을 했을때 ]

margin은 흰 면티옷 "밖에" 입는옷 즉 ( 코트 , 롱패딩 , 숏패딩 , 잠바, 바람막이 ) 이런걸 입었다 라고 생각하시고,

padding은 흰 면티옷 "안에" 입는옷 즉 ( 내복, 레깅스 ) 라고 생각하시면
쉽게 이해가 되실껍니다.

 

padding margin 반대 개념이다.

padding은 경계로부터 안쪽에 있는 공간

특정 id의 값을 지칭하려면 #id를 이용해 접근한다.

한 요소는 하나의 id만을 가질 수 있다.

CSS로 first div에 속성을 적용 시킬 땐, #first {}, 이는 body, span 등에서도 마찬가지다.

 

CSS 코드의 id명은 HTML 코드에서 썼던 id명과 같아야 한다.

 

---

border: 말 그대로 box의 경계

- border 종류는 많은데 다 못생겨서 거의 한 종류의 border만 씀

- border 굵기(line-width) 적고 종류(style) 적고 색상(color) 주면 됨

- style 종류는 solid가 실선, dashed가 점선

- inline과 block 모두 적용됨

css의 cascading 특징을 이용해서, 한개의 border style만 바꾸고 싶으면 먼저 *를 이용해서 전체 다 스타일 준 뒤에 밑에 해당 요소만 다른 style 주면 그거만 바뀜. 해당 요소에서 코드를 전부 다시 쓸 필요 없이 바꿀 코드만 작성하면 됨.

모든 요소에 border 주고 싶으면 *을 이용. *는 전체를 뜻함.

 

---

-  span은 inline이기 때문에 높이와 너비를 가질 수 없으며, 그래서 위, 아래에 margin을 가질 수 없다.

- 하지만 padding은 사방에 가질 수 있다.

- 이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면, inline 요소를 block으로 바꿔줘야 한다.

- 온점(.)은 class명이라는 뜻.

- id⇒ #tomato는 id="tomato" class⇒ .tomato는 class="tomato"

- id명과 다르게 class명은 유일할 필요가 없다. 여러 요소들이 같이 쓸 수 있다.

- 와 같이 class 속에는 btn과 tomato를 연이어 넣어 각각 다른 class 속성을 동시에 부여할 수도 있다.

 

---

inline-block은 block이 inline속성을 가지게해줌

즉, 옆에 둘수도있고, width와 height를 가질 수있다.

정해진 형식이 없다. 그냥 본인 마음대로임. 그렇기때문에 잘 안쓴다.

block 사이에 공간이 지멋대로 생긴다.

깔금하지 못하다.

옛날에는 이딴식으로 작업했다. 이건 sXXk이다.

inline-block은 Responsive Design(반응형 디자인) 을 지원하지 않는다.

즉, 모니터의 크기에 따라 달라진다.. .It's fuXX..

/* ※ 결론!! inline-block은 안쓴다!! */