CSS 기본문법

head태그 안에 style태그를 넣는다.

style태그 안에 내용은 CSS의 문법으로 적어준다.

즉, style태그는 css의 시작과 끝을 알려준다.

cf. 이때 style태그는 html태그이다!

h1 {color:red} => h1 컨텐츠의 색을 red로 해주세요

▪ h1 = selector(선택자) : 누구를 바꿀 것인가?

▪ { } = description(서술) : 어떤 효과를 줄 것인가?

Selector(선택자)

서술{} 안에서 속성을 추가할 때  ; 으로 구분해준다.(사이 공백은 상관 없음 있어도 되고 없어도 되고)

• 선택자를 여러개 쓸 수 있다 선택자에 h2를 추가하면 h2에도 똑같이 적용된다. h1, h2(쉼표로 추가)
  
• 태그안의 태그 선택하기 header h1 = header태그 안의 h1태그에 적용해주세요 (쉼표없이 한 칸 띄어쓰기)
  

박스모델

border (테두리) : 두께, 색, 테두리선 종류 지정해주기, 순서는 상관 없음, 한 칸씩 띄어써서 구분하기

paddding : 박스안에 컨텐츠와 border 사이의 간격

margin : 태그와 태그 사이의 간격

특정 태그에만 스타일을 주고 싶다면?

#selected = id값이 selceted인 태그에만 스타일 해주세요

브라우저의 개발자 모드에서 css의 박스모델을 보면서 수정할 수 있다.

개발자 모드에서 수정한 내용은 문서에 반영되지는 않는다.

float : 페이지의 레이아웃을 정리? 하는 태그 이미지의 위치를 지정할 수 있고 이미지와 글을 나란히 배치할 수 있게 해주는 태그

CSS 실습해보기

css파일을 외부로 분리하기! = link태그 사용(rel, type, href지정하기)

💡중요! 브라우저가 저장해 뒀던 css를 적용시키기 때문에 수정된 파일이 적용되지 않는다면 캐시를 삭제해보자!!!