Coding study : CSS / margin:0 auto;

<코딩 복습>

# css: cascading style sheet의 약자:)

# cascading: 연속적인, 계층적인, 폭포수 html안에 head body가 있고 body안에div나 hi가 있고 hi안에 p태그가 있고.. 이런것 계층적인 구조다~ 나중에 제이쿼리 자바스크립트에 들어가면 더 중요한 개념이다. 자바스크립트에서 돔트리 구조. 그 안으로 접근을 해야한다.

지금 하는 것보다 더 안으로 더더더안으로 접근을 해야하기에...

 

마찬가지로 css에서도 원하는 텍스트 색을 바꾸려면 얘를 선택하기 위해서 구조적 선택자를 이용해서 선택을 하기도한다.

그래서 계층적인 구조를 통해 선택자를 선택해서 바꾼다가 cascading!

 

# ID 선택자 vs. class선택자 둘중 선택하는건 본인의 기호이지만, 거의 id보단 class를 많이 쓴다.

->id선택자는 수많은 태그 중 하나의 태그에만 특별한 스타일 속성을 부여하고싶을때!

class선택자는 동시에 원하는 스타일을 여러 태그에 부여하고싶을때!

 

# margin:0 auto; -> 중간 ----------# div가 많이 쓰는 이유: 브라우저가 뭔가 최신브라우저가 아닌 브라우저를 쓰는 경우.

그 컴퓨터에서는 의미론적인 태그를 써버리면 최신코드라서 이해를 하지 못해서 그 태그자체를 불러오지 못함.

그래서 구형 브라우저들까지도 생각해서 div를 쓰는 경우가 많은 것이다.

# div에 id를 주고싶다?

일일이 써도되지만 emmet을 활용하면 좋겟지~?>< div#wrapper or div#wrap 하고 탭하면 끄읕!

 

# 주제와 내용이 있으면 section태그로 감싸주는게 좋다~

 

# ^ 꺽새로 부모안에서 나갈 수 있음!

 

# 스타일을 기술하는 방법 3가지 다시 보옥습+_+

1) 인라인방식: 태그와 같은 라인에 스타일을 기술.

2) 내부선언방식: html내부에 선언하기때문에 내부선언방식이라고 부름.

3) 외부선언방식: html파일과 다른 파일에 스타일을 기술하기 때문에 외부선언방식이라고 부름.

 

# 내부선언방식 해 줄때 style에 우선적으로 해주는거 reset css!

*{

margin: 0; padding: 0; }

그리고

margin: 0; padding: 0; 이부분을 빠르게 해주는 emmet은 m:0+p:0 하고 tab해주면 된다아!!

 

# box-sizing: border-box; 보더처리했던 박스에 그 선이 width값에 포함이 되겠다는 의미다.

default값으로는 width에 선이 포함이 안 된다.

그런데 box-sizing에 border-box를 주는 순간, 박스의 width값에 선이 포함된다!

 

# 무조건 암기하쟈, 나중에 더 공부할것.

float도 일단 암기.

flaot의 역할: 붕 뜨는것. aside 옆에 배치시킬 수 있게끔해 줄수잇다아 나중에 들어갈 것.

 

# class 나 id 의 속성값에 한글을 쓰면 안먹힘.

숫자도 앞에다 쓰면 안먹히고 뒤에다 쓰면 상관없음.

# float 속성.

요소들을 원하는 위치로 배치시키고싶을때 이용한다.

left right는 있지만 center는 없다.

중간으로 맞추고싶으면 margin을 이용해서!

 

# padding은 텍스트와 박스사이의 여백.

다른 요소와의 여백은 margin!

 

# css도 폴더하나 만들어서 한꺼번에 저장할것.