#HTML5 Programming Example

모던 웹을 위한 HTML5 + CSS3 입문『한빛미디어, 2012』에 사용된 예제입니다. 그냥 위에 zip 파일 눌러서 다운 받으면 됩니다.

질문은 issues에 글을 남겨주시면 됩니다. 모두 함께 답변을 해주세요! 우리 함께 만들어가는 좋은 대한민국 개발 세상 "ㅁ" ....

##오탈자

치트시트 - 나혼자산다님 발견

dt - 정의 목록 -> 정의 글자 dd- 정의 글자 -> 정의 설명 dl - 정의 설명 -> 정의 목록

###60 페이지 - 강민수님 발견 표 2-6의 rt 태그는 작은 문자 태그입니다.

###60 페이지 - 키위님 발견 코드 2-8에 rb 태그가 없죠? "rb태그에 원하는 글자를 넣고" -> "span태그에 원하는 글자를 넣고"로 수정합니다. ㅎㅎ

###65 페이지 - 물고기자리님 발견 "아래 한글 설명도 정의 정의를 의미합니다.가 아니라 정의 설명을 의미합니다."로 바뀌어야 될듯요ㅎ

###70 페이지 rowspan 속성과 colspan 속성의 설명이 바뀌어있습니다. ;ㅁ;

###80 페이지 - 마휘님 발견 80p 2.6.1 video 태그 4째줄 WebM(VP8+Vorbis)형식에서 VP8 -> VP80

###91 페이지 - 큐님 발견(4쇄) 표 2-18 input 태그의 속성을 표 2-18 input 태그의 type 속성으로 변경합니다

###126 페이지 - 다아브님 발견 그림 3-11 코드에는 붉은색 "ㅁ" .... 그림에는 파란색 "ㅁ" ....

###127 페이지 표 3-7에 "문서 객체"와 "태그"라는 단어가 함께 나옵니다. 같은 의미의 단어로 보면 되는데, 두 가지가 모두 써져있어서 헷갈릴 수 있겠더라구요 ;ㅁ;

###134 페이지 - 큐님 발견(4쇄) 코드 3-19의 table 태그에 border="1" 속성을 부여합니다.

###139 페이지 - 큐님 발견(4쇄) 그림 3-21의 제목 "check 상태"를 "checked" 상태로 변경합니다.

###143 페이지 - 강민수님 발견 표 3-14에서 설명을 보면 "ㅇㅇㅇ는 자손을 선택합니다."라고 되어있는데요 'ㅁ' .... "ㅇㅇㅇ에 위치하는 태그를 선택합니다."라고 변경해야 합니다. ("형제 관계 중에서 첫 번째에 있는 ㅇㅇㅇ"라고 변경하는 것이 맞겠군요....)

###145 페이지 - 강민수님 발견 표 3-15 자손이 아니라 선택자로 선택한 태그를 선택해요 ;ㅁ; .... "자손 중에서"라는 말을 빼야합니다. 'ㅁ' .... ("형제 관계 중에서"라고 변경하는 것이 맞겠군요....)

###163 페이지 - 큐님 발견(4쇄) 코드 4-7의 왼쪽 코드에 style 태그가 닫히지 않았습니다.

###169 페이지 - 큐님 발견(4쇄) 표 4-3의 표 제목 "스타일 이름"을 "키워드 이름"으로 변경

###171 페이지 - 아가사님 발견 inline과 inline-block 모두 스타일시트가 width:300px이어야 하지 않나요? inline은 width:300px, inline-block은 width:30px로 나와 있습니다. 둘 다 가로 길이가 같아야할 것 같아서요. 제가 수정 안 된 책을 붙잡고 있는 건지...ㅜ.ㅜ

###172 페이지 - 큐님 발견(4쇄) 표 4-4의 표 제목 "스타일 이름"을 "키워드 이름"으로 변경

###204 페이지 오타라고 보기는 조금 그럴 수도 있는데요 'ㅁ' .... Serif 폰트는 한국 폰트에서 명조체와 궁서체로 모두 대응됩니다. 책 내에서 두 가지를 혼용하는 부분이 나와서 혼란스러울 수 있을 것 같아 올립니다.

간단한 상식인데요 'ㅁ' ... ! 궁서체는 궁녀들이 궁에서 한글을 쓸 때에 사용하던 폰트(?)입니다. 그리고 이를 바탕으로 인쇄에 적합하게 만든 것이 명조체이구요. 역사는 다르지만 컴퓨터 내에서는 비슷하다고 보시면 됩니다. ㅎㅎ

###210 페이지 - Mr visualj 님 발견 윗 부분에 "font-size 속성과 font-weight 속성 사이에는 / 문자를 입력해야하므로".... 그림과 바로 위의 내용을 보면 "font-size 속성과 line-height 속성 사이에는"으로 바꿔야함을 알 수 있습니다. "ㅁ" ....

###216 페이지 - 엄청나게 많은 분들 발견( ;ㅁ; ) 위에 내용이 중복되고 있지요 "ㅁ" ... 엄청나게 많은 분들이 발견하고 계십니다. "ㅁ" ... 흐헣허헣

###218 페이지 코드 4-56의 4번째 줄을 보시면 갑자기 position 속성이 fixed로 바뀌어있습니다. ;ㅁ; absolute 키워드로 적용해주세요 ;ㅁ;

###216 페이지 - 엄청나게 많은 분들 발견( ;ㅁ; ) 그림 4-79를 보면 인터넷 익스플로러에서도 오른쪽으로 나오는 분들이 많습니다. "ㅁ" .... 인터넷 익스플로러에서 보이는 모양이 달라 어떻게 처리해야할지 고민 중이신 분들이 많습니다. "ㅁ" .... 하지만 absolute를 적용하면 반드시 left, top, right, bottom 속성을 적용해야 하므로 적용하고나면 모든 웹 브라우저에서 동일하게 출력됩니다. ㅎㅎ

###221 페이지 - 큐님 발견(4쇄) 표 4-6의 표 제목 "스타일 이름"을 "키워드 이름"으로 변경

###231 페이지 - 루든님 발견 231페이지 아래에 "#wrap 태그에 float 속성을 적용했습니다."라는 부분이 있습니다. 'ㅁ' .... 근데 #wrap 태그에는 아무 것도 안 했지요.....

"#wrap 태그 내부의 요소에 float 속성을 적용했습니다." "#wrap 태그 내부의 요소가 부유하는 것입니다."로 두 문장을 수정합니다. ㅎㅎ

###235 페이지 - 큐님 발견(4쇄) 코드 4-73의 선택자를 .box 에서 div로 변경

###289 페이지 - 큐님 발견(4쇄) [편집자님께 'ㅁ' .... 6.2절의 다음 부분을 삭제해주시면 페이지가 안 밀린다능 'ㅁ'] 대표적으로 다음 기능은 지원하지 않는 브라우저가 더 많습니다. => 제거 이 이외에도 => 제거

###316 페이지 - 치미님 발견(4쇄)(4쇄 맞겠지.... 맞을거야....흐헝....) minimun-scale=1.0이.. minimum-scale=1.0

###356 페이지 - 루든님 발견 356 쪽에 코드 8-4

<h1 class="logo"><a href="#"><img width="180" height="50" /></a></h1>

결과물인 그림 8-2에는 로고에 이미지가 있는데 코드인 8-4에는 img 에 src 속성이 없습니다 ^^

<a href="#"><img src="Images/title.png" /></a>

이렇게 변경하시면 됩니다. "ㅁ" ㅎㅎ ..... (;ㅁ;)

###392 페이지 코드 9-13의 link 태그의 rel 속성이 다음과 같이 쓰여있습니다.

<link rel=""stylesheet" href="StyleSheet.css" />

이를

<link rel="stylesheet" href="StyleSheet.css" />

이렇게 변경합니다. 'ㅁ' ㅎㅎ

###374 페이지 - 펭군님 발견 374페이지 코드 8-27 에러는 안나지만... aside 태그 부분..의 이미지 태그요.. src="주소" 부분을 누락시킨거 같아서요.. 실행에 큰 지장은 없지만..ㅎ

###412 페이지 - 씨마님 발견 오타가 있는 듯 하여 글 적습니다. 별로, 크게 상관 있는 부분은 아니지만.... ☞_☜ p412. [코드 10-12 정육면체 생성] 부분에서는

div:nth-child(6) { transform: rotateX(270deg) translate3d(0px, 0px, 100px); background: pink;}

그런데, p413. [코드 10-13 색상 적용] 에서는

div:nth-child(6) { transform: rotateX(270deg) translate3d(0px, 0px, 50px); background: pink;}

이라고 되어있더라구요. 실행해보고 육면체 안에 가운데에 사각형이 들어가있길래 뭔가 했더니.. 'ㅁ'

###442 페이지 - 씨마님 발견 오타가 있는 듯 하여 글 적습니다 이것도 작은 오타랄까요 T ^T p442. 코드 11-19 화면 너비에 따른 스타일시트 구분(2)

@media screen and (min-width: 950px) {
    html {
        background: blue;
        color: white; font-weight:bold;
    }
}

960px 으로 표기되어야 'ㅁ' 음.. 근데 위의 단락을 읽어보면 768픽셀과 950픽셀의 기준으로 설명하셨으니까..

@media screen and (min-width: 768px) and (max-width: 949px) {
    - 생략 -
}
 
@media screen and (min-width:950px) {
    - 생략 -
}

이렇게 되는게 맞을까요 'ㅁ? 뭐 어느거나 맞추어서 사용하면 상관은 없겠습니다만..

###491 페이지 - 윤인성님 발견(?!) 부트스트랩이 업데이트되어서 기본 테마가 흰색으로 바뀌었답니다. 'ㅁ' 만약 네비게이션 바의 색상을 변경하고 싶은 경우에는 다음과 같이 navbar-inverse 클래스를 지정해주면 됩니다. ㅎㅎ

###531 페이지 - 동그란님 발견 부록C의 C-13.less 예제파일 그대로 컴파일하면 19라인 부터 에러 떠요.

div:nth-child(12){ background: hsl(@hue +100, @saturation, @lightness); }

"@hue +"뒤에 띄어쓰고 단위를 써야 되네요.

div:nth-child(12){ background: hsl(@hue + 100, @saturation, @lightness); }