전체 글

8장 자바스크립트로 웹 동작 구현하기1. 자바스크립트 코드 작성 방법HTML 파일과 자바스크립트 연결내부 스크립트(internal script)HTML 문서 안에서  script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법// index.html  외부 스크립트 방법(external script)별도의 js 확장자 파일을 만들어 자바스크립트 코드를 작성js 파일을 HTML 문서에서 script 태그로 연결하는 방법// script.jsdocument.write("외부 스크립트 방법");// index.html 2. 프로그래밍 시작 전 알아 두기주석한 줄 주석: // 기호(슬래시 2개)여러 줄 주석: /* 기호 */ 기호 사이에 작성// 한 줄 주석/* 여러 줄 주석*/오류 확인 방법프로그래..

1. 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기플렉스 박스 레이아웃/ 기본/ 정렬 속성플렉스 박스 레이아웃(flex box layout) == 플렉서블 박스 레이아웃(flexible box layout)1차원 방식으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일1차원 방식: 가로나 세로 중 한 방향으로만 레이아웃을 설계하는 방식 => 다양한 상황에서 유연하게 레이아웃을 구현할 수 있도록 다양한 속성 제공주축(main axis): 진행 방향과 수평한 축교차축(cross axis): 주축과 수직한 축플렉스 컨테이너(flex container): display 속성값으로 flex나 inline-flex가 적용된 요소플렉스 아이템(flex item): 플렉스 컨테이넌와 자식 관계를 이루는 태그 ..

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 태그출처에서 인용한 문단 단위의 텍스트 작성할 때 사용출처가 확실..