6~8일차 ~CSS실습

개발도구

삽 (단순한 사용법, 미약하고 사용자의 힘이 많이 들어감)  VS 포크레인 (복잡하지만 익숙해지면 편함)

1. 버전 관리 시스템 ( Version Control System)

- 끊임없이 코드 변경 -> 변경의 역사 기록의 필요성

어디에서 문제 발생했는가? 누구에 의해서?

- 협업시 용이함

EX) SVN, Mecurial, GIT

2. 코드 편집기 (Editor)

EX) 아톰, Aptana, Sublime Text, Brackets

아톰 확장 기능

emmet - 코딩 자동 완성

tab키 사용

리스트 3개 만들고 링크 달 때 li*3>a 친 상태에서 탭키!

CSS 이론 (Cascading Style Sheet) 정보를 아름답게 표현하는 언어

- HTML과 독립된 언어지만 떼어놓을 수 없는 관계

- HTML을 디자인 하기 위해 고안된 언어

- HTML은 정보에 집중 ->  CSS로 디자인 분리&집중

CSS 문법

<style> HTML 언어

h1 {color:red; font-size:10px;}

선택자(주어 역할)    서술 -> 어떤 효과를 선택자에게 줄 것인가? 

;(세미콜론) 속성과 속성의 구분

header h1 -> 상위태그 해더 하위 h1 태그 선택자 사용

박스모델 border (테두리 CSS)

solid - 단선 dotted - 점선

id 값 설정해서 특정한 것에 효과 주기

css에 #id이름

margin - 태그와 태그 사이 간격

padding - 테두리와 컨텐츠 사이의 간격

float - 웹 페이지의 레이아웃 디자인 설정 (컨텐츠가 나란히 배치되도록 하는 효과가 있음)

        

         기준이 되는 콘텐츠와 다른 콘텐츠의 정렬

EX) float:left; 기준이 되는 콘텐츠 좌측, 우측에는 다른 콘텐츠 정렬

*ctrl + space bar : 태그 자동완성기능

CSS 한번에 수정하기

ㄴcss 파일을 따로 만들어 HTML link 속성으로 불러들인다

HTML <link> 속성 -> 외부 파일 불러오기

<link rel="stylesheet" type="text/css" href="주소">

-> 외부에 있는 css 형식의 파일을 불러와라

Why? -> 중복의 제거 

유지 보수에 용이, 속도 향상, 데이터 용량 감소 -> 비용 감소

CSS 추가 내용 : 소비자 관점에서 활용하는 방법

크롬 확장프로그램 stylebot

우측 상단 css 아이콘 클릭 후  Open style bot 클릭 후 css 수정