게으른 나에게

5.1 기본 선택자 사용하기1. 선택자선택자는 CSS 속성을 적용할 대상을 선택하는 문법으로, 다양한 종류의 선택자를 지원 2. 기본 선택자 1) 전체 선택자: 모든 태그를 선택자로 지정.* { /* CSS 코드 */ }  2) 태그 선택자: 태그명으로 선택자를 지정.태그명 { /* CSS 코드 */ }  3) 아이디 선택자: id 속성값으로 선택자를 지정#id속성값 { /* CSS 코드 */ }※ id 속성값은 HTML문서 안에서 고유한 값이어야 함.  4) 클래스 선택자: clss 속성값으로 선택자를 지정.class속성값 { /* CSS 코드 */ }  5) 기본 속성 선택자: HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정[속성] { /* CSS 코드 */ }[속성=값] { /* CS..

4.1 CSS 문법 살펴보기1. CSS 기본 문법 CSS의 기본으로 선택자와 선언부로 구성된 문법 형태를 가짐.h1(선택자) {color(속성): red(값);} -선택자: CSS 속성을 적용할 대상(태그, 요소)을 지정하는 영역. -선언부: 선택자로 지정된 대상(태그, 요소)에 적용할 CSS 속성과 값을 적는 영역입니다. 2. 주석주석은 코드에 설명을 남기는 것을 말함. CSS에서 주석 내용은 /*와 */ 사이에 작성할 수 있음./* 주석 내용 */ 4.2 CSS 적용하기3. CSS 적용 방법CSS를 HTML 문서에 적용하는 방법은 3가지 -내부 스타일 시트 방법: HTML 문서 내부에 style 태그로 CSS 코드를 작성해 적용하는 방법. -외부 스타일 시트 방법: 별도의 CSS파일을 만들어 HTM..

08. 레이아웃을 구성하는 CSS 박스 모델CSS와 박스 모델 블록레벨 요소와 인라인 레벨 요소 -블록레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것. 해당 요소의 너비가 100%. 왼쪽이나 오른쪽에 다른 요소가 올 수 없음. (,, ) -인라인 레벨 요소: 한줄을 차지하지 않음. 콘텐츠 만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음. (, , ) 박스 모델 크기 웹 문서의 블록 레벨 요소는 모두 박스 형태임. -박스 모델 요소: 스타일 시트에서는 이렇게 박스 형태인 요소 콘텐츠 영역 크기 지정종류설명너비나 높이의 값을 px이나 em 단위로 지정박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정auto박스 모데의 너빗값과 높잇값이 ..

07. 텍스트를 표현하는 다양한 스타일글꼴 관련 스타일 글꼴 기본형{ font-family: | [, ] ※ 기본형 기호 이해하기1. |는 나열한 옵션 중 하나가 값이 되어야 한다는 의미.2. 속성값을 나열할 때 키워드(약속한 값)는 그대로 나열.3. 속성값을 나열할 때 값이 아니라 유형이라면 로 묶음. 이때 다른 속성을 유형처럼 사용할 수 있음. 글꼴 적용body { font-family:"맑은 고딕", 돋움, 굴림 } 글자 크기font-size: ￨ ￨ ￨ 단위: em, rem, ex, px, pt 폰트 속성{ font-style: normal ㅣ italic ㅣ oblique } 글자 굵기{ font-weight: bold ㅣ lighter }  웹폰트@font-face { font-fami..

06.CSS의 기본스타일과 스타일 시트 css 기본형선택자 { 속성1: 속성값1; 속성2: 속성값2; } css 여러 줄로 표기하기p{ text-align: center; color: blue;} css 한 줄로 표기하기p { text-align: center; color: blue; } css 주석 처리하기/* css 주석 사용하면 편함*/p{ text-align: center; /* 텍스트 정렬 - 중앙 */ color: blue;}  스타일시트 알아보기 스타일 시트 - 1. 브라우저 기본 스타일                   - 2. 사용자 스타일  - 1. 인라인 스타일                                                 - 2. 내부 스타일 시트      ..

3.1 텍스트 작성하기1. 텍스트 관련 태그HTML에서 텍스트에 사용할 수 있는 태그 -hn태그: 주제나 제목 성격의 텍스트를 작성할 때 사용 -p 태그: 텍스트로 문장 또는 단락을 구성할 때 사용 -br 태그: 텍스트를 줄 바꿈할 때 사용 -blockquote 태그: 문단 단위의 인용문을 작성할 때 사용 -q 태그: 문장 단위의 짧은 인용문을 작성할 때 사용 -ins 태그: 추가할 텍스트를 표시할 때 사용 -del 태그: 삭제할 텍스트를 표시할 때 사용 -sub 태그: 아래 첨자를 표시할 때 사용 -sup 태그: 위 첨자를 표시할 때 사용 3.2 그룹짓기2. 그룹을 위한 태그HTML에서 그룹화에 사용하는 태그. 태그 자체에 어떠한 의미도 없으므로 논 시맨틱 태그에 속함. -div 태그: 블록요소와 인라..

2.1 HTML의 기본 구성요소 1. 태그- HTML 문법을 이루는 가장 작은 단위- 웹페이지 구성요소 정의.  2. 속성- 태그를 의미나 기능적으로 보충. 3. 문법 - HTML 문법은 태그와 속성으로 구성- 속성은 생략가능- 속성은 여러개 사용 가능- 태그없이 단독 사용 불가능.- 콘텐츠가 있는 문법 (시작태그+종료태그)My First Web Page! - 콘텐츠가 없는 문법 (시작태그) 4. 주석- 코드에 메모나 설명을 남기고 싶을 때 사용.- 웹 브라우저의 소스 보기로 주석이 노출되므로 보안이 필요한 내용 작성 x 2.3 HTML의 기본 구조5.HTML의 기본 구조 *DTD: 문서형 정의. 문서 작성할 때 항상 처음에 넣어야 함* *문서의 시작과 끝* *웹 브라우저에 노출되는 내용..

[5장 입력양식 작성하기] 마무리 문제 01.> 문제풀이 예약 정보 이 름 전 화 메 일  > 결과 [5장 입력양식 작성하기] 마무리 문제 02.> 문제풀이 프런트엔드 개발자 지원서 HTML, CSS, 자바스크립트 기술을 이해하고 실무 경험이 있는 분을 찾습니다. 개인정보 이름 연락처 ..

[4장 웹 문서의 다양한 내용 입력하기] 마무리 문제 01. > 문제풀이 수습 국원 모집 방송에 관심 있는 새내기 여러분 환영합니다 교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부와 전공은 상관없습니다. 방송에 관심 있는 여러 학우의 지원 바랍니다. 모집 기간: 3월 2일 ~ 3월 11일 모집 분야: 아나운서, PD, 엔지니어 지원 방법: 양 식 작성 후 이메일 접수 지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다. 혜택 수습기자 활동 중 소정의 활동비 지급 정기자로 진급하면 장학급 지급 > 결과[4장 웹 문서의 다양한 내용 입력하기] 마무리 문..

05 폼 삽입하기, input 태그사용자 정보아이디이메일비밀번호비밀번호 확인가입 경로블로그검색SNS기타메모이벤트와 새로운 소식메일 수신메일 수신 안 함      상품 선택 주문할 상품을 선택해 주세요. 선물용 3kg 개 (최대 5개) 선물용 5kg 개 (최대 3개) 가정용 3kg 개 (최대 5개) 가정용 5kg 개 (최대 3개) 포장 선택 선물 포장 ..