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

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

정리

CSS

1. How to Add CSS to HTML
a. 두 가지 방법: 같은 파일에 두기, 별도의 CSS 파일 만들기
ㄱ. 같은 파일에 두기: head 속 style에 작성
ㄴ. 별도의 파일: .css 파일 만들고 link 태그로 연결, 이 방법이 더 유용하다.
ex) link href="styles.css" ref="stylesheet"


2. CSS 코드 작성하기
a. HTML 태그에게 ~~ 하라고 가리킨다 >> "가리킨다" = selector(가리키는 대상), "~~하라고" = 속성(property)
b. selector{속성:속성값;} 방식으로 작성.
c. 속성 이름에 띄어쓰기가 있어선 안 된다.


3. Cascading의 의미
a. 브라우저가 CSS코드를 읽을 때, 위에 있는 코드부터 차례로 읽는다.
b. 태그가 같은 대상을 가리킬 때 마지막으로 작성한 코드가 적용된다.


4. Blocks and Inlines
a. 모든 웹사이트는 box로 이루어져 있다.
b. 박스는 옆에 다른 박스가 오지 않는다.
ㄱ. span이나 link 같은 건 옆에 다른 게 올 수 있다. 이런 건 block이 아니라 inlines 라고 부른다.
ㄴ. 아주 작은 글이나, 링크, 그림이 inline 에 속함(span, a, img). 대부분의 박스는 block.


5. Margin
a. inline은 높이와 너비가 없다.
b. block은 높이와 너비가 있고, margin,padding,border가 있다.
ㄱ. margin: box의 border의 바깥 공간, margin에 한 번에 값 입력하면 시계방향 순(상,우,하,좌)으로 값 할당. *collapsing margins: 위, 아래 쪽에서 경계가 같으면 하나가 된다. div margin 값을 변경하면, body margin값도 바뀐다. > padding 으로 해결 가능
ㄴ.padding: margin의 반대 개념. box의 border의 안쪽 공간
ㄷ. 만약 각각의 box에 설정을 하고 싶으면, id를 활용. #id 로 그 id를 가진 박스에만 적용 가능.
ㄹ.border: box의 경계
* *{}로 모든 요소에 적용할 수 있다. inline 포함.
* inline은 위, 아래 margin을 가질 수 없다. block으로 바꿔야 함. padding은 가능.


6. Classes
a. 요소를 가리킬 수 있으면서도 겹쳐도 되는 방법. .class 로 표현.
b. 한 개가 여러 개의 class를 가질 수 있다.


7. Inline Block
a. inline인데 높이, 너비를 가질 수 있다. b. 빈 공간이 있고 정해진 형식이 없다는 단점이 있다. 깔끔하지 않음.
c. 반응형 디자인을 지원하지 않는다. 잘 사용되지 않음.


8. Flexbox
a. inline-block의 문제의 해결책. 박스 배열에 유용하다.
b. 자식 요소에는 어떤 것도 적어선 안 된다. 부모 요소에만 말한다.
ex) div에 뭔갈 하고 싶으면 div의 부모인 body에 적는다. body가 자식들을 제어함.
c. flex 컨테이너는 주축과 교차축을 가진다.
ㄱ. justify-content 속성은 주축에 적용된다. 디폴트
ㄴ. align-items 속성은 교차축에 적용. 디퐅트
ㄷ. 수평과 수직이 아니다. 주축과 교차축은 변경 가능함.
* body에 height를 설정해줘야 align-items를 설정했을 때, 변화가 생긴다.
* vh(viewpoint height): 스크린처럼 이해, 화면 비율

ㄹ. flex-direction으로 주축, 교차축 변경 가능.
ㅁ. 부모, 자식 관계는 상대적이다. div도 부모가 될 수 있다. 직접적인 부모 관계에만 적용된다.


9. Position
a. position: 레이아웃이라기 보단 위치를 조금만 옮길 때 사용
b. position-fixed: 레이아웃 상에서 그려진 위치에 고정. 위치는 변경 가능. 위치 변경 시 다른 레이어가 된다. 가장 위에 있게 됨.
c. position-static(디폴트): 레이아웃이 박스를 처음 위치하는 곳에 둔다.
d. position-relative: element가 처음 위치한 곳을 기준으로 위치 수정이 가능하다.
e. position-absolute: 가장 가까운 relative 부모를 기준으로 이동시킴. relative가 아니어도 position: relative로 하면 relative 부모로 만들 수 있음.

요약

1. CSS는 selector가 지정한 태그에 속성으로 값을 설정한다.
2. CSS는 위에서부터 차례대로 코드를 읽는다.
3. box엔 block과 inline이 있다.
a. block은 옆에 다른 게 올 수 없고, 높이, 너비, margin(border 위), padding(border 아래), border(경계)를 가진다.
b. inline은 옆에 다른 게 올 수 있고, 위, 아래 margin을 가질 수 없다.

4. 클래스는 element를 가리키면서 겹쳐도 되는 방법이다. 한 개가 여러 개의 클래스를 가질 수 있다.
5. flexbox는 박스를 배열할 때 유용하다. 부모 요소에만 적고, 자식 요소에는 어떤 것도 적어선 안 된다. flex 컨테이너는 주축과 교차축을 가진다. 디폴트값은 주축은 수평, 교차축은 수직이다. 이는 변경 가능하다.
6. 부모, 자식 관계는 상대적이다.
7. position은 위치를 조금만 움직일 때 사용한다. 자주 사용하는 건 relative와 absolute 다. relative는 처음 위치한 곳을 기준으로 위치를 수정한다. absolute는 가장 가까운 relative 부모를 기준으로 이동시킨다.