부캠

1. 문서 객체 모델 이해문서 객체 모델 생성되는 방식/ 노드 타입 살펴보기 웹 브라우저: 문서 객체 모델(DOM) 생성할 수 있음문서 객체 모델: 웹 브라우저에 표시되는 HTML 문서 구조를 객체화한 모델 구조생성한 문서 객체 모델 ~> HTML 문서의 구성 요소를 객체로 인식문서 객체 모델이 생성되는 방식문서 객체 모델: 웹 브라우저) HTML 문서 해석 -> 객체로 변환 -> 웹 브라우저에 표시=> 웹 브라우저에 표시되는 HTML 문서는 내부적으로 문서 객체 모델을 해석해서 보이게 됨DOM 트리: 트리(tree) 구조 가짐노드(node): document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등 트리 형태로 구성-> 부모, 자식, 형제 관계 형성루트 노드(root node): DO..

1. CSS의 특징 살펴보기기본 스타일 시트/ 적용 우선순위와 개별성/ 상속/ 단위/ 색상 표기법 기본 스타일 시트웹 브라우저에 기본으로 내장웹 브라우저에 표시되는 요소의 글꼴, 크기, 색상, 굵기, 문단 설정 등적용 우선순위와 개별성단계적 적용: 같은 태그에 여러 스타일 적용되도 단계적으로 적용 돼 마지막에 하나만 적용-> CSS의 개별성 규칙에 따라 결정기본 스타일 시트보다 사용자가 정의한 스타일 속성이 우선 적용같은 태그 요소의 선택자 여러 개 -> 한 속성만 적용선택자예점수전체 선택자*0태그 선택자div, p, h11가상 요소 선택자::before, ::after1클래스 선택자.box, .title10가상 클래스 선택자:hover, :visited, :link10아이디 선택자#title, #mai..

CSS 문법 = 선택자 + 선언부선택자: CSS를 적용할 태그(요소)를 지정하는 문법적인 영역1. 기본 선택자 사용하기전체 선택자/ 태그 선택자/ 아이디 선택자/ 클래스 선택자/ 기본 속성 선택자/ 문자열 속성 선택자전체 선택자HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법* 기호 사용해 표시*{/* CSS 코드 */}태그 선택자HTML 태그명으로 선택자를 지정하는 방법선택자에 지정된 태그명과 일치하는 모든 요소 한 번에 선택태그명{/* CSS 코드 */}아이디 선택자HTML 태그에서 사용할 수 있는 id 속성값을 이용해 선택자를 지정하는 방법속성값 앞에 # 기호를 붙여 구분#id속성값{/* CSS 코드 */}클래스 선택자HTML 태그에서 사용할 수 있는 class 속성값을 이용..

CSS(Cascading Style Sheets)웹 문서에 사용하는 태그에 스타일을 적용하기 위해 W3C에서 고안한 언어태그와 스타일을 함께 사용하던 기존 방식 지양, 태그와 스타일 분리하는 방법으로 발전1. CSS 문법 살펴보기선택자CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역선언부 = 속성 + 값선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역중괄호({}) 안에 넣음세미콜론(;) 넣으면 여러 스타일 연속해서 작성할 수 있음선택자{속성:값;}2. CSS 적용하기 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트내부 스타일 시트(internal style sheet)HTML 파일 내부에 CSS 코드를 작성하는 방법(+) 디자인 빠른 적용body 태그에 작성된 내용이 사용자에게..

1. 텍스트 작성하기hn 태그/ p 태그/ br 태그/ blockquote 태그/ q 태그/ ins 태그, del 태그/ sub, sup 태그hn 태그제목이나 주제를 나타내는 텍스트 표현할 때 사용제목h1 ~ h6 태그(6개)h: heading/ n: (숫자) 중요도검색 엔진에서 키워드로 인식=> 검색 엔진 최적화(SEO; Search Engine Optimization) 위해 본문에서 핵심이 되는 내용SEO: 검색 엔진에서 상위에 랭크(rank)될 수 있도록 검색 엔진에 친화적으로마크업(markup, 문서 구조)을 작성하는 것p 태그본문의 문단(paragraph)을 작성할 때 사용내용br 태그문단에서 줄 바꿈할 때 사용blockquote 태그출처에서 인용한 문단 단위의 텍스트 작성할 때 사용출처가 확실..

1 HTML의 기본 구성 요소태그/ 속성/ 문법/ 주석태그구성 요소를 정의하는 역할HTML 문법을 이루는 가장 작은 단위혼화살표괄호() 사이에 태그명을 넣는 형태속성태그에 어떤 의미나 기능을 보충하는 역할~= 옵션 => 사용해도 되고 안 해도 되고, 여러 개 사용해도 됨But, 태그 없이 단독 사용X속성명 + 속성값으로 구성ex. -> 태그: html/ 속성명: lang/ 속성값: ko=> 주 언어(lang)가 한글(ko)로 된 HTML 문서의 시작속성명: 따옴표 X 작성/ 값: 큰따옴표("") 안에 작성속성값 여러 개 -> 쉼표(,)로 구분해 값을 나열문법콘텐츠(content)가 있는 문법콘텐츠 앞뒤를 태그로 감쌈시작 태그(open tag): 앞에 넣는 태그종료 태그(close tag): 뒤에 넣는 ..