게으른 나에게

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개) 포장 선택 선물 포장 ..

04-3 목록만들기, 표 만들기▶︎ 목록만들기 샐러드 채소를 씻고 물기를 제거한 후 준비합니다. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다. 드레싱 준비 드레싱 재료를 믹서에 갈아줍니다. 샐러드 완성 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!    순서 있는 목록/ 순서 없는 목록  선물용 3kg 소과 13~16과 중과 10~12과 선물용 5kg 중과 15~19과 설명목록 설명이름 설명부분  ▶︎ 표 만들기 선물용과 가정용 상품 구성 용도 중량 갯수 가격 ..

04 웹 문서에 다양한 내용 입력하기04-1 텍스트 입력하기 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다. 비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다. 레드향 샐러드 레시피 상품 구성   제목 텍스트 삽입 텍스트 단락 만들기 줄바꾸기 인용태그 굵게 강조할 텍스트 굵게 표시할 텍스트 이탤릭체로 강조할 텍스트 이탤릭체로 표시할 텍스트  IoT내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다-영화, '비포선셋'중function savetherLocal( ) 가격: 13000원 (부가세 별도)물의 화식은 H20입니다E ..