Heistater

01 수평, 중앙 One True 정렬 레이아웃 02 요소 배치 03 글자 생략 웹 페이지 개발에 사용하는 주요 레이아웃을 구성하는 방법을 연습 여기 내용 이외에도 엄청~ 나게 많음 일단 책의 내용을 흡수해보자 01 수평, 중앙 One True 정렬 레이아웃 1 . 수평 정렬 레이아웃 6장에서 배운 float와 overflow 속성을 사용해 레이아웃을 만드는 방법을 살펴보겠습니다. 수평으로 요소를 정렬할 떄는 반드시 다음 규칙을 기억해주세요. 특별한 경우를 제외하면 대부분 이러한 규칙을 사용해서 요소를 수평으로 정렬합니다. "자손에게 float 속성을 지정하고, 부모의 overflow 속성에는 hidden 키워드를 적용합니다." ★응용 예제 7-1 수평 정렬 레이아웃 [코드7-1]은 div.item 태그..

01. 문서 객체 모델 1 문서 객체 모델 기본 용어 문서 객체 모델을 살펴보려면 먼저 몇 가지 용어를 알아야 합니다. 문서 객체(document object)와 노드(node)라는 용어를 간단한 HTML 페이지 코드를 보면서 이해해 봅시다. [코드10-1]에서 h1이나 p는 태그인데, 이런 HTML 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것이 문서 객체입니다. 즉 HMTL에서 요소라고 하던 것을 자바스크립트에서는 문서 객체라고 합니다. 따라서 자바스크립트에서 문서 객체를 조작한다는 말은 결국 태그를 조작한다는 의미 입니다. ★코드 10-1 dom_basic.html ○결과값 자바스크립트를 사용해 문서 객체를 조작해서 태그를 추가·수정·제거할 수 있습니다. 즉, HTML 태그의 내용을 바꿀 ..

p287~ 01 자바스크립트 기본 용오와 출력 방법 02 자료형과 변수 03 조건문과 반복문 04 함수 05 객체 01 자바스크립트 기본 용오와 출력 방법 1. 자바 스크립트 기본 용어 표현식과 문장 표현식(expreession)은 값을 만드어 내는 간단한 코드입니다. 문장(statement)은 프로그래밍 언어에 실행할 수 있는 코드의 최소 단위입니다. [그림9-1]에서 (a)는 표현식이고 ,(b)는 문장의 예 입니다. 한국어도 문장 끝에 마침표를 찍듯 자바스크립트에서도 문장 마지막에 세미콜론(;) 또는 줄 바꿈을 넣어 종결을 나타냅니다. 표현식 하나도 세미콜른을 찍으면 문장이되고, 문장이 모이면 프로그랩이 됩니다. 즉, 표현식이 모여 문장, 문장이 모여 프로그램이 됩니다. [그림9-1] (a) 표현식 ..

01박스 속성 02가시 속성 03배경 속성 04글자 속성 05 위치 속성 06 유동 속성 07 그림자와 그레이디언트 속성 01박스 속성 CSS에서는 각 요소가 박스라는 사각 영역을 생성하고, 이 영역이나 이것을 둘러싼 테두리에 크기, 색상, 위치 등과 관련한 속성을 지정함으로써 스타일을 변경합니다. 따라서 박스 속성은 웹 페이지의 레이아웃을 구성할 때 가장 중요합니다. 아래 그림 처럼 margin 속성, border속성, width 속성, height 속성을 모두 합쳐 박스 속성 이라고한다 margin 속성 테투리와 다른 태그 사이의 테두리 바깥쪽 여백 border 속성 테두리 paddiong 속성 테투리와 글자 사이의 테두리 안쪽 여백, 배경색은 padding 영역까지만 적용 width 속성 글자를 감..

01 관련있는 것 끼리 연결하시오 (1) 기본 선택자 전체 선택자 - ⓒ * 태그 선택자 - ⓓ h1 아이디 선택자 - ⓑ #id 클래스선택자- ⓐ .header (2) 자손 선택자와 후손 선택자 ① 선택자 A > 선택자 B - ⓐ 자손 선택자 ② 선택자 A 선택자 B - ⓑ 후손 선택자 02다음 지룸ㄴ에 OX 를 표시하시오 (1) 자손은 후손보다 넒은 개념이다 ( X) 후손에 자손이 포함되죠? (2) div > h1,h2는 "div 태그아래"의 "h1 태그와 h2 태그" 를 선택하는 선택자 입니다 (x) div 태그의 자손인 h1,h2를 선택하고 싶으면 div > h1 + h2 div>h1^div>h2 (3) CSS도 HTML처럼 형태로 주석을 사용합니다 (x) CSS 주석은 /* 주석 */ 이런식임 ..

01 선택자의 용도와 사용법 02 기본 선택자 03 속성 선택자 04 후손 선택자와 자손 선택자 05 반응,상태,구조 선택자 06 CSS3단위 01 선택자의 용도와 사용법 HTML 페이지에 CSS를 사용해 꾸밀 수 있습니다. CSS로 작성된 코드를 스타일시트라고 하며 CSS1이 나온 이후 CSS3로 발전했습니다. CSS를 사용해 위치지정, 색상추가, 텍스트이동, 블록 수준 요소에 대한 여백 및 테두리를 설정할 수 있습니다. CSS에서 특정 HTML태그를 선택할 떄는 선택자를 사용 합니다. "특정 HTML 태그를 선택해서 뭐하나용?" 선택자를 사용해 특정 HTML를 태그를 선택하면, 선택한 태그에 원하는 스타일 or 스크립트를 적용할 수 있습니다. 선탁자를 사용해 h1 태그를 선택하고, 선택한 h1 태그의..

종합 예제1 이있는데 이건 패스하겠음 ㅠ 01 다음 괄호 안을 채우시오 (1) ( 입력 양식)은 사용자에게 정보를 입력받는 요소입니다. (2) form 태그는 (method) 속성의 방식으로, ( action) 속성 장소에 데이터를 전달합니다. (3) (GET)방식은 주소에 데이터를 입력해서 전달합니다 (4) (POST)방식은 GET 방식과 달리 비밀스럽게 데이터를 전달합니다. (5) input태그에 (type)속성을 지정해서 다양한 종류의 기본 입력 양식을 생성합니다. (6) 라디오 버튼의 (name)속성을 사용하면 여러 대상 중 하나만 선택하는 형태를 구현할 수 있다 (7) (select)태그는 목록으로 보여주는 항목 중 하나 또는 여러 개를 선택할 떄 사용하는 입력 양식 요소이다 (8) div 태그..

chapter 04 HTML5 입력 양식 태그와 구조화 태그 01 입력양식 태그 02 HTML5 문서 구조화 연습문제 종합문제 이건 패스 지금 자신이없음 여기는 그냥 예제 써보고 html확인해보는형식으로 일단 이유는 잘 몰라서 01 입력양식 태그 01 입력양식태그 입력 양식은 사용자에게 정보를 입력받는 요소로 입력 양식 태그를 사용해 만듭니다. 예를 들어 간단한 회원가입 입력 양식(그림참조 못해서 ㅈㅅ) 입력 양식을 제대로 다루려면 서버 기술도 알아야 하지만, 책은 웹 프로그래밍 입문 과정이므로 서버 기술도 알아야 하지만, 책은 웹 프로그래밍 입문과정이므로 기본적인 입력 양식내용만 본다고한다.. ①입력 양식 개요 입력 양식은 form 태그로 영역을 생성하고, 내부에 input 태그를 넣어 만듭니다. 다음..

HTML5 웹 프로그래밍 입문 3판 3장 연습문제 정답 :: Leirbag (tistory.com) 01 다음 괄호 안을 채우시오 h는 (heading) 의 약자 입니다. //제목글자 p는 (paragraph)의 약자입니다. // 본문 문단 생성 br은 (break) 의 약자 입니다. // 줄 바꿈 hr은 (horizontal rule)의 약자입니다. // 수평줄 삽입 a는 (anchor)의 약자입니다. //하이퍼링크 생성 href는 (hyper reference)의 약자입니다 b는 ( bold)의 약자 입니다 i는 ( italic) 의 약자 입니다 sub는( subscript) 의 약자 입니다 // 아래 첨자 sup는 ( superscript) 의 약자입니다 // 위 첨자 ins는 ( insert)의 ..

01 글자태그 제목과 본문 글자 태그 앵커 태그 글자 모양 태그 02 목록 태그 03 테이블 태그 01 글자태그 웹페이지는 글자 태그중 비중이 가장 크다. 글자 태그는 종류가 매우 다양하므로 책에서 설명하는 분류기준으로 기억하면 많은 도움이 된다..? 1. 제목과 본문 글자 태그 문서에서 제목은 여섯가지 제목 글자 태그로 표현합니다. 제목 글자 태그에서 h는 heading(제목)을 의미합니다. 본문 글자를 입력할 떄는 p, br, hr 태그를 사용합니다 p태그에서 p는 paragraph(단락), br은 break(줄 바꿈), hr은 horizontal rule(수평줄) 을 의미합니다. 표 3-1 제목 글자 태그 태그 설명 제목 글자 h1 첫 번쨰로 큰 제목 글자 생성 h2 두 번쨰로 큰 제목 글자 생성 ..