CSS 개념 정리 (feat. 노마드코더 코코아톡 클론코딩)

CSS와 HTML을 섞는 방법

​

1.같은 html 파일에 html, css 코드 넣는 방법

 

-inline CSS

-head 태그 안의 style 태그 안에 css 작성

 

 

2.CSS 파일을 만드는 방법

 

-external CSS

-link태그로 파일을 연결. css와 html 과의 관계(rel)는 stylesheet이라고 명시

​

​

---

CSS

​

css가 하는일은 html 태그를 가리키는 일!

 

 

Cascading Style Sheet - 브라우저가 css 코드를 읽을 때 위에 있는 코드부터 차례대로 읽음

(코드의 순서가 결과에 영향을 미친다. 밑의 줄에 있는 코드를 읽는다.)

​

css 작성법 : 태그{ 속성이름: 속성 값; }

​

selector : 가리키는 대상. 많은 속성을 가질 수 있다.

 

---

ID

 

특정 id 값을 가리키려면 #Id 명을 이용해 접근

각 selector 간에 쉼표를 넣어 id를 그룹화 할 수 있다.

#a, #b, #c { }

​

 

 

Class

 

.클래스이름 { }

class명은 고유할 필요 없고 여러 요소들이 같이 쓸 수 있음

한번에 여러 class가 쓰일 수 있음 (id는 한요소에 하나의 id만 가질 수 있다.)

​

 

---

Blocks & Inline

​

box, p는 옆에 다른 요소들이 올 수 없고

span, link, img는 올 수 있다.

 

-block : 옆에 다른 요소가 못 오는것. 높이와 너비가 있다.

ex) header, div

 

-inline : 옆에 다른 요소가 올 수 있는 것. 같은 줄에 위치할 수 있음.

높이와 너비가 없다.

ex) span, 링크, 이미지

​

​

---

Box 속성( margin, border, padding )

​

-Margin

​

박스의 경계(border)의 바깥에 있는 공간

*Collapsing margin - 위, 아래쪽에서만 일어남

​

​

-Padding

 

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

​

*margin & padding 값이 하나면 모든 방향, 두개면 상하 좌우, 네개면 위 오른쪽 아래 왼쪽 (시계방향)

​

 

-Border

 

box의 경계

인라인에 적용이 된다.

사용법 -> border: 굵기, 스타일, 색상

​

 

 

*.span같은 인라인은 높이와 너비가 적용 안되기 때문에

위, 아래에 margin을 가질 수 없고 좌우로만 가질 수 있음.

위아래에 margin을 적용하고 싶다면 inline 요소들을 block으로 바꿔야함

padding은 사방에 다 가질 수 있음

​

​

*div{display: block} 은 구글 브라우저가 기본적으로 지정한 것.

​

 

* display: inline과 block을 바꿔줌

[display: inline-block] : block으로 인식하게 함 (너비, 높이, margin 가지고 옆에 다른 요소가 올 수도 있게끔)

inline-block의 단점은 빈공간이 생김. 반응형 디자인을 지원하지 않음. 창크기가 달라지면 영향을 받음

이 단점을 보완하는게 flex

​

​

---

Flexbox

 

자식 element에는 어떤것도 적지 말고 부모 element에만 적어야함

얼마나 빈공간을 줄지 같은 것들을 자동으로 계산

​

 

주축(main axis): justify-content. 수평

교차축(cross axis): align-items. 수직

 

​

*만약 body가 height를 가지고 있지 않다면 align-items를 설정하더라도 바뀌지 않음

이미 맨 위아래를 차지하고 중심에 있으니까!

이럴땐 flex 컨테이너에 height를 추가하면 된다.

 

​

flex direction-row(수평), column(수직)

디폴트는 row이고 

column일 경우 주축은 수직이 되고 교차축은 수평이 된다. 모든게 반대로 바뀜

​

 

*자식 엘리먼트들도 flex 컨테이너가 될 수 있다.

*flexbox는 width를 초기 사이즈로만 여기고 모든 엘리먼트를 같은 줄에 있게 하기 위해

width를 바꿀 수도 있음

​

flex wrap가 wrap 일 때-> 한줄에 컨텐츠가 들어갈 수 있는 만큼만 보여주고 나머진 다음 줄로 넘김

no wrap 일 때 - 크기를 줄여서라도 한 줄로 표시

​

 

 

​

---

Position

​

위치를 아주 조금 옮기고 싶을 때 사용

-position fixed: 레이아웃 상에서 그려진 초기 위치에 물체가 고정되어 있음

top, right, bottom, left : margin과 초기 위치가 무시되고 서로 다른 레이어에 위치하게 되어

명령한 위치에 자리잡음

-position static: 레이아웃이 박스를 처음 위치하는 곳에 둠(디폴트)

-position relative: element가 처음 위치한 곳을 기준으로 상,하,좌,우 수정함

-position absolute: 가장 가까운 relative 부모를 기준으로 이동시킴

position:relative을 해주면 부모가 된다.

relative한걸 찾지 못한다면 body를 기준으로 옮김

​

​

 

---

Pseudo Selector

​

first-child

last-child

nth-child(숫자) : even, odd와 함께 씀.

​

p span { } : p안의 span

p > span { } : p 바로 밑 자식 중 span

p + span { } : p 다음으로 오는 span

p ~ span { } : span이 p의 형제인데 바로 뒤에 오지 않을 때

​

tag[attribute="value"] 통해 스타일 적용

tag[attribute~="value"] 로 value를 포함하는 모든 tag에 스타일 적용

​

​

 

---

States

 

active: 해당 요소를 마우스로 클릭했을 때 효과 적용

hover: 마우스 커서가 대상 위에 있을 때 효과 적용

focus: 키보드로 선택되었을 때 효과 적용

focus-within: focused인 자식을 가진 부모 엘리먼트에 적용. 부모의 state에 따라 자식을 바꿈

​

​

Transition

​

어떤 상태에서 다른 상태로의 변화를 애니메이션으로 만드는 방법

state가 없는 요소에 붙어야 함

state가 아닌 root element에 있어야 함

state에 따라 바뀌는 property를 갖고 있으면 사용됨

transition: all -> 변화하는 모든것에 trasntion을 줌

​

 

​

Transformation

​

box element를 변형시키지 않고 원하는 요소를 이동시키기 위해 사용

일종의 3d transformation이기 때문에 margin, padding이 적용되지 않음

다른 box element, 이미지에 영향을 끼치지 않음

​

 

​

Animation

​

@key frame <애니메이션 이름> {

from { } to { }

}

무한으로 반복되면 infinite를 붙여줌

​