꾸물꾸물 졔의 개발공부
web 의 기본 본문
HTML5 문서의 3가지 요소 : HTML ( 구조 ) + CSS ( 표현 ) + JS ( 동작 )
[HTML]
<!DOCTYPE html> : 현재 문서가 HTML 문서임을 정의하는 태그
시작태그와 종료태그 , 각 tag 사이에 문서 내용을 정의한다 .
<head> 문서머리글 : 제목, 검색엔진키워드, 기타정보 및 데이터 / <body> 문서본체 : 문서의 내용
[CSS]
선택자(selector) + 선언부(declaration)
선택자 : 규칙이 적용되는 엘리먼트
선언부 : 선택자에 어떤 규칙이 적용될지 ? 스타일 ? ( 중괄호로 감싸며, 속성 : 값 ; )
ex) .css { margin : 30px ; color : #000; } // css에, margin 속성 30px, color 속성 #000 적용
- 속성 : 선택자에서 바꾸고 싶은 요소
- 값 : 속성에 적용할 값
여러 선택자에 동일한 스타일 적용 -> 콤마(,) 로 구분 : .css , .h1
HTML 문서에 스타일 적용 방법
1) 외부 스타일시트 : .css 파일을 <link> / @import 로 HTML문서에 연결
-> 하나의 css파일만 수정하면 해당 스타일시트를 사용하는 모든 페이지가 변경되어짐
-> 세가지의 스타일 적용 방법 중에 가장 널리 사용되어짐
2) 내부 스타일시트 : <style>태그를 사용해서, HTML 페이지 내부에 CSS 적용
-> <style> 은 <head> </head> 안에 작성
-> 페이지마다 반복해서 작성해야함
-> 여러페이지에 동일한 스타일을 적용하려 할때는 외부 스타일시트가 훨씬 더 적합하다 .
3) 인라인 스타일 : style attribute를 사용해서 개별 엘리먼트에 적용
-> 여러개의 속성 적용이 가능하다, 세미콜론(;) 로 구분
-> 3가지 스타일(인라인, 외부, 내부) 을 모두 사용했을 때에, 가장 먼저 반영되어짐 .