고니의 코딩노트

태그로 HTML 문서 안에 다른 HTML 문서 또는 동영상 등을 끼워 넣거나 다른 웹사이트를 출력할 수 있습니다. (예제1) 하단에서 예제 파일을 다운로드 할 수 있습니다. html5-013-a.html html5-013-iframe-1.html width와 height 속성을 생략했을 때, 기본으로 설정되어 있는 width와 height 값이 304, 154 정도로 정해져 있는 것 같습니다. iframe 프레임의 테두리를 보이지 않게 하는 것은 CSS에서 처리합니다. 프레임 테두리 설정하는 것은 CSS 강의에 넣도록 하겠습니다. 이번에는 video 태그를 사용하지 않고 iframe 태그로 동영상을 삽입해 보겠습니다. 태그의 target 속성의 값 중에는 프레임이름을 지정할 수 있습니다. iframe 태..

HTML과 CSS 공부하면서 만든 일정관리 달력입니다 - 책 보고 만들었습니다. 캘린더 ◀ 4월 ▶ 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 중간고사 15 중간고사 16 중간고사 17 중간고사 18 19 20 21 개교기념일 22 23 24 25 26 27 28 29 체육대회 30 체육대회 31 스타일을 적용하기 전의 모양은 아래와 같습니다. CSS(스타일시트)입니다. 위 코드의 사이에 복사하거나 외부 스타일로 정의하면 됩니다. body { color: #444444; } h3 { border-left: solid 5px green; padding-left: 10px; } div { width: 610px; text-align: right; } table, td..

2단 레이아웃 메뉴 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 ------------- 본문 내용 생략 ----------- 하단 © Copyright gonyzany.tistory.com main { width: 760px; padding: 10px; float: right; // --------- left를 right로 변경 margin-bottom: 20px; } sidebar { width: 200px; padding: 10px; float: left; // -------- right를 left로 변경 margin-bottom: 20px; background:#eee; } 위 코드에서 left, right만 변경하면 sidebar를 왼쪽에 위치시킵니다.

2단 레이아웃입니다. 복사하여 사용하세요. 소스 코드에서 float: left/right 부분을 서로 바꾸면 다음과 같은 모양이 됩니다. #contents { width: 760px; padding: 10px; float: left; margin-bottom: 20px; } #sidebar { width: 200px; padding: 10px; float: right; margin-bottom: 20px; background:#eee; } DOCTYPE html> 레이아웃 div { /* border: 1px solid #ccc; */ } #container { width:1000px; padding:20px; margin:0 auto; /* 화면의 중앙에 배치 */ } #header { padding:..

#HTML #CSS #폰트 #font-family #웹폰트 #구글폰트 #나눔폰트 HTML 문서에서 폰트를 변경하기 위해서는 CSS의 font-family 속성을 이용헤서 다음과 같이 변경할 수 있습니다 선택자 { font-family: 굴림, "굴림체", "맑은 고딕", Arial, "Arial Black" } 위 코드는 웹브라우저 사용자 컴퓨터에 설치된 컴퓨터의 폰트를 사용하게 됩니다. 일반 사용자의 컴퓨터에는 없는 폰트를 사용하기 위해서는 다음과 같이 할 수 있습니다. 여기에서는 HTML 문서에 구글 폰트를 사용하는 방법에 대해서 설명합니다. 1. 구글 폰트 사이트에 연결합니다. https://fonts.google.com/ 2. "Search fonts" 영역에서 폰트 이름을 입력해서 검색합니다. ..