생활코딩 : CSS 정리 -2.박스모델, 중복의 제거, 크롬stylebot (by 웹 어플리케이션 만들기)

박스모델

• {border:1px  red   solid;} : 테두리, 두께, 색상, 단선(solid)/점선(dotted) _띄어쓰기하면 됨

• {padding: 30px;} : 콘텐츠와 테두리 사이의 여백 (안쪽)

• {margin: 50px;} : 테두리 사이의 상하좌우 간격 (바깥쪽)

• {width: } : 콘텐츠의 가로 크기

• {height: } : 콘텐츠의 세로 크기

구글 크롬 개발자 모드 : 웹상에서 조절 미리보기 가능

 

 

 

박스모델 응용

• 밑에만 선긋기 - {border-bottom: 1px solid gray;}

• 여백 만들기 - {padding: 20px;}

• 오른쪽만 선긋기 - {border-right:1px solid gray;}

• 콘텐츠 가로 - {width:250px;}

• 콘텐츠 세로 - {height:600px;}

• 옆으로 해서 여백 채우기 - {float:left;}

 

• 옆으로 해서 여백 채우기 - {float:left;}

• 보기좋게 여백 만들기 - {padding:20px;}

 

 

중복의 제거

css파일을 따로 만든다

->html파일 안에 링크를 걸어서 자동으로 불러오게 한다

->용량도 줄이고, 한 번으로 여러가지를 바꿀 수 있다 (개이득)

 

 

생활코딩 CSS강의 : http://opentutorials.org/course/45

 

 

크롬 확장 stylebot : 파일에서 고치지 않아도  확장자로 크롬에서 CSS를 바꿀 수 있다/ 홈페이지에서 내가 원하는 부분은 크게 보이게 하고/ 원하지 않는 광고는 안보이게 할 수 있다./ 소비자 입장에서 웹페이지 화면을 조정할 수 있다.

 

 

 

(모든 이미지의 출처는 생활코딩입니다.)