(하단 조심하세요)

인터넷 익스플로러는 내용 부분의 경계선(border)을 제대로 표시하지 못합니다. 경계선은 파이어폭스나 크롱 사파리 등으로 확인하세요.
-> 인터넷 익스플로러는 내용 부분의 경계선(border)을 제대로 표시하지 못합니다. 경계선은 파이어폭스나 크롬, 사파리 등으로 확인하세요.

(핵심정리 좌측 마지막 문장)

시작태그는 속성을 가질 수 있으며, 지금까지 type과 align 두 가지를 보았습니다.

--> 시작태그는 속성을 가질 수 있으며 앞에서 type 속성을 보았습니다.

(2장 84p 내용 중)

'찾아오시는 길' 링크는 우리 회사를 방문할 수 있도록 자세한 길 안내를 위한 HTML 페이지와 연결됩니다.

->'상세 약도' 링크는 우리 회사를 방문할 수 있도록 자세한 길 안내를 위한 HTML 페이지와 연결됩니다.

(밑에서 네 번째 문단)

보통 자원(resource)라고 하면 웹 페이지를 말하지만, 오디오나 비디오 등 모든 종류가 지원이 될 수 있다고 생각합니다.
-> 보통 자원(resource)이라고 하면 웹 페이지를 말하지만, 오디오나 비디오 등 모든 종류가 자원이 될 수 있다고 생각합니다.

(세 번째 정리)

<a> 요소의 콘덴츠는 링크를 위한 라벨입니다.
-> <a> 요소의 콘텐츠는 링크를 위한 라벨입니다.

(세로 8)

8. HTML에서 'H'
-> 8. HTML에서 'HT'

(마지막 A)

만약 여러분이 실제 문구를 인용하거나 단어를 강조하고자 한다면 <em> 요소를 사용하는 것이 올바른 방법입니다.
-> 단어를 강조하거나 인용구 안에 확실한 강조를 넣고 싶다면 <em> 요소를 사용해야 합니다.

(다섯 번째 Q)

예를 들어 콘텐츠를 가지고 있지 않은 링크가 있다면, <ahref=“mypage.html”>와 같이 쓸 수 있나요?
-> 예를 들어 콘텐츠를 가지고 있지 않은 링크가 있다면, <a href=“mypage.html”>와 같이 쓸 수 있나요?

(3장 149p 중첩을 사용하여 태그 일치시키기의 내용 中)

<p> 트윗에 <em>이 글</em>을 남길 거예요<p> 
-> <p> 트윗에 <em>이 글</em>을 남길 거예요</p> 

<p> 트윗에 <em>이 글</p>을 남길 거예요<em> 
-> <p> 트윗에 <em>이 글</p>을 남길 거예요</em> 

잘못됨: <p> 태그는 <em> 태그 앞에 와야 한다고요! <em> 요소는 <p> 요소 안으로 들어가야 될 것 같은데요.
-> 잘못됨: </em>은 p 요소 안으로 들어가야 될 것 같은데요.

(첫 번째 A)

모든 엔티티들을 다 보여줄 수 있다고 보증할 수는 없습니다.
-> 모든 속성들을 다 보여줄 수 있다고 보증할 수는 없습니다.

(p.156)

가로 
15. 이러한 종류의 리스트의 경우 <ul>을 사용합니다.
-> 15. 이러한 종류의 리스트의 경우 <ol>을 사용합니다.


세로
9. 이런 종류의 리스트를 위해 <ol>을 사용하죠.
-> 9. 이런 종류의 리스트를 위해 <ul>을 사용하죠.

(182p 설명중)

바로 스타버즈 페이지에서 카페인 정보를 담은 http://buzz.headfirstlabs.com으로 링크를 만드는 일입니다.
->바로 스타버즈 페이지에서 카페인 정보를 담은 http://wickedlysmart.com/buzz으로 링크를 만드는 일입니다.

href 에 URL을 넣었군요. ‘카페인 버즈’란 라벨을 클릭하면 buzz.headfirst.com에서 페이지 하나를 가져올 것입니다.
-> href 에 URL을 넣었군요. ‘카페인 버즈’란 라벨을 클릭하면 http://wickedlysmart.com/buzz에서 페이지 하나를 가져올 것입니다.

(첫 문장, 두 번째 화살표)

첫 문장
커피 색션을 찾을 때까지 아래로 스크롤하면 다음과 같은 내용이 있을 것입니다.
-> 커피 섹션을 찾을 때까지 아래로 스크롤하면 다음과 같은 내용이 있을 것입니다.

두 번째 화살표
여기 커피 색션이 있네요.
-> 여기 커피 섹션이 있네요.

(세 번째 정리)

서버의 도메인 이름은 종종 'www'로 부릅니다.
-> 웹 서버의 이름은 종종 'www'로 부릅니다.

(5장 209페이지, 알맞은 이미지 형식 고르기)

그림 이미지가 인쇄 상 한계로 제대로 표현되지 않아 파일을 첨부합니다.

(첫 문단, 연습문제)

첫 문단
시각장애인의 경우엔 스크린 리더기, 일반적인 방문자들은 모바일 기기나 매우 느리게 인터넷에 연결된 브라우저(사이트에 이미지는 없고 텍스트만 많은), 스마트 폰, 인터넷이 가능한 티셔츠 등 여러 가지를 사용할 수 있습니다.
-> 시각장애인의 경우엔 스크린 리더기, 일반적인 방문자들은 모바일 기기나 이미지는 커녕 텍스트만 보여질 정도로 매우 느린 인터넷 환경에서 실행중인 브라우저, 스마트 폰, 인터넷이 가능한 티셔츠 등 여러 가지를 사용할 수 있습니다.

연습문제 
3. 이미지 이름을 ‘pencil.gif’에서 ‘broken.gif’로 변경합니다. 이 이미지 는 실제로는 존재하지 않습니다. 따라서 깨진 이미지가 보일 거예요.
-> 3. 이미지 이름을 ‘pencil.png’에서 ‘broken.png’로 변경합니다. 이 이미지 는 실제로는 존재하지 않습니다. 따라서 깨진 이미지가 보일 거예요.

(페이지217)

내려받은 폴더에 ‘seattle.jpg’라는 파일 하나가 있습니다.

-> 내려받은 폴더에 ‘seattle_video.jpg’라는 파일이 있습니다.

(두 번째 화살표)

그리고 여기에 여러분이 ‘index.html’ 파일에 추가한 ‘seattle.jpg’ 이미지가 있군요.
-> 그리고 여기에 여러분이 ‘index.html’ 파일에 추가한 ‘seattle_video.jpg’ 이미지가 있군요.

(두 번째 Q)

왜 width와 height 속성을 사용하여 페이지 내 이미지 크지를 조정할 수 없는 거죠?
-> 왜 width와 height 속성을 사용하여 페이지 내 이미지 크기를 조정할 수 없는 거죠?

(5장, 237p)

만약 ‘seattle_video_med.jpg’란 사진이 있다면 이와 일치시킬 수 있도록 HTML 파일을 ‘scattle_video_med.html’이라고 하죠. 
-> 만약 ‘seattle_video_med.jpg’란 사진이 있다면 이와 일치시킬 수 있도록 HTML 파일을 ‘seattle_video_med.html’이라고 하죠. 

(중간 문단)

여기서는 웹 페이지 배경색과 동일한 색을 선택고자 합니다.
-> 여기서는 웹 페이지 배경색과 동일한 색을 선택하고자 합니다.

(첫 문장)

계속해서 색상 선택(Color Picker) 대화상자에 eaf3da라는 색을 넣습니다.
-> 계속해서 색상 선택(Color Picker) 대화상자에 eaf3da를 입력하고 OK를 눌러봅시다.

(5장, 250p,)

Q : 기능을 텍스트에만 사용할 수 있나요?
-> Q : matte 기능을 텍스트에만 사용할 수 있나요?

(조심하세요)

개념치 말고 그냥 계속 따라 하세요.
-> 쾌념치 말고 그냥 계속 따라 하세요.

(6장, 290p)

14. 여러분이 만들고 있는 문서의 어떤 종류인지 브라우저와  유효성 검사기에게 말해주는 것
-> 14. 여러분이 만들고 있는 문서가 어떤 종류인지 브라우저와  유효성 검사기에게 말해주는 것

(3번째 줄)

오직 문단에만 벽이 없으니, 대신 문단의 background-color 속성을 사용하도록 하죠.
-> 문단의 벽만 빨간색으로 칠하려는 것이니 문단의 background-color 속성을 사용하죠.

(첫 번째 그림 설명에서)

font-family 속성을 문단에서 제목과 본문(body)으로 옮길 것입니다.
-> 문단(p)과 제목(h1, h2)에 있던 font-family 속성을 본문(body)로 옮길 것입니다.

(십자 퍼즐 옆 힌트, 세로 6)

십자 퍼즐 옆 힌트 다음 내용으로 수정합니다.

class
serif
style
link
rules(규칙)
children
radwebdesign(신속웹디자인)
selector(선택자)
font-family
color
sansserif
values
inheritance(상속)
stylesheet(스타일시트)
loungeguys(라운지 청년들)

세로 6
상속을 이용해서 한 요소에 설정되는 속성은 이것으로부터 물려받게 됩니다.
-> 상속을 이용해서 한 요소에 설정되는 속성은 이것에 물려지게 됩니다.

(오탈자 신고, 위치정보는 내용란에 적었습니다.)

폰트 패밀리에는 산세리프(snasserif)
->폰트 패밀리에는 산세리프(sans-serif)

(바보 같은 질문이란 없습니다 4번째 A)

A:예. @font-face를 사용해 여러 폰트를 가져오려면 여러분이 사용하고 싶은 각 폰
트에 대해, 서버에 있는 폰트 파일이 사용 가능한지 확인하고, 각 폰트에 대해 독립적인 @font-faace 규칙을 생성하세요.

-> A:예. @font-face를 사용해 여러 폰트를 가져오려면 여러분이 사용하고 싶은 각 폰
트에 대해, 서버에 있는 폰트 파일이 사용 가능한지 확인하고, 각 폰트에 대해 독립적인 @font-face 규칙을 생성하세요.

(연필을 깍으며)

태스트해 보세요.
-> 테스트해 보세요.

(이름으로 색 명시하기 첫 문장)

CSS에서 색을 묘사하기 위한 가장 직접적인 방법은 색의 이름을 사용하는 50가지만 사용할 수 있습니다.
-> CSS에서 색을 묘사하기 위한 가장 직접적인 방법은 색의 이름을 사용하는 것입니다.

(세 번째 정리, 마지막 정리)

세 번째 정리
웹을 위한 폰트 패밀리에는 세리프(serif), 산세리프(snas-serif), 모노스페이스(monospace), 흘림체(cursive), 판타지(fantasy)가 있습니다.
-> 웹을 위한 폰트 패밀리에는 세리프(serif), 산세리프(sans-serif), 모노스페이스(monospace), 흘림체(cursive), 판타지(fantasy)가 있습니다.

마지막 정리
텍스트에 밑줄을 만들기 위해 text-underline 속성을 사용할 수 있습니다.
-> 텍스트에 밑줄을 만들기 위해 text-decoration 속성을 사용할 수 있습니다.

(첫 문단)

이미지를 넣으려면
-> 페이지에 이미지를 넣으려면

(맨 마지막 설명)

border-radus를 사용해서 모든 종류의 모양을 만들어 낼 수 있습니다.
-> border-radius를 사용해서 모든 종류의 모양을 만들어 낼 수 있습니다.

(그림)

첨부 파일로 그림 모양을 바꿔야 합니다.

(3번째 줄)

grove
-> groove

(브레인 파워 마지막 줄)

Bonzai 
-> Banzai

(맨 마지막 줄)

반복적으로 보이게 하려고 background-repeat 속성값에 repeat-x를 할당했는데, 이렇게 하면 수평 방향으로만 이미지가 기울어져 보일 거예요.
-> 반복적으로 보이게 하려고 background-repeat 속성값에 repeat-x를 할당했는데, 이렇게 하면 수평 방향으로만 이미지가 반복될 거예요.

(그림 설명과 본문)

그림 왼쪽 설명 맨 마지막 줄
제목에 있는 줄 간격은 너무 작아서 두 줄이 겹칠 거라는 점에 주목하세요.
-> 제목이 길어져 두 줄이 됐을 때는 줄 간격이 좁아서 겹칠 수 있습니다.

<h2>의 line-height은 elixirs의 폰트 크기의 1배이며, 이는 ‘small’ 혹은 12픽셀 정도의 크기가 됩니다.
-><h2>의 line-height는 elixirs의 폰트 크기의 1배이며, 이는 ‘small’ 혹은 12픽셀 정도의 크기가 됩니다.

div id=“elixirs”
line-height은 “small”의 1배 혹은 12 픽셀
-> div id=“elixirs”
line-height는 “small”의 1배 혹은 12 픽셀

h2는 “small”의 120% ine-height은 “small”의 120%의 1배, 혹은 14픽셀
-> h2는 “small”의 120% line-height는 “small”의 120%의 1배, 혹은 14픽셀

(두 번째 질문)

선태 가능한 것이 아닌걸 알아야 하고 순서에 대한 것을 기억해야 하기 때문에 속기법은 더 복잡하군요.
->선택 가능한 것이 아닌걸 알아야 하고 순서에 대한 것을 기억해야 하기 때문에 속기법은 더 복잡하군요.

(두 번째 짐의 대화 마지막 줄)

필요하다구고.
-> 필요하다고.

(3번째 줄)

‘lounge.html’ 파일의 하단에 이 두 가지 규칙을 추가하세요.
-> ‘lounge.css’ 파일의 하단에 이 두 가지 규칙을 추가하세요.

(코드 마지막 설명)

사용자가 링크 위로 마우스를 오려놓으면 배경을 빨간색으로 변경하네요.
-> 사용자가 링크 위로 마우스를 올려놓으면 배경을 빨간색으로 변경하네요.

(마지막 풍선말)

오, 왜 ‘캐스케이드’라고 부르는 이유는 뭐죠?
-> 오, ‘캐스케이드’라고 부르는 이유는 뭐죠?

(핵심 정리 왼쪽 단 마지막 문장)

Text-align은 블록 요소를 위한 속성이며, 블록 요소에 있는 모든 인라인 요소를 가운데로 놓습니다. 어떤 중첩된 블록 요소에 의해서도 상속됩니다.
-> text-align은 블록 요소의 위치에 대한 속성이며 블록 요소의 모든 인라인 요소를 오른쪽, 왼쪽, 가운데로 지정할 수 있습니다. 이 속성은 하위의 블록 요소에 모두 상속됩니다.

(p518)

한 요소가 다른 요소를 중첩하고 있는데, 두 요소가 모두 마진을 '같고 있다면'... 
-> '가지고 있다면'으로 수정합니다

(그림 왼쪽 첫 번째 설명, 마지막 설명)

그림 왼쪽 첫 번째 설명 
만약 추천 음악 추천 코너 아래에 elixirs <div>를 남겨 놨더라면, 
-> 만약 추천 음악 코너 아래에 elixirs <div>를 남겨 놨더라면, 

마지막 설명
또한 이 텍스트가 음료의 아래쪽 주변을 둘러싸고 있다는 점에 주목하세요.
-> 텍스트가 길어지면 음료의 아래쪽 주변을 둘러 싸게 됩니다. 

(스타버즈를 한 단계 더 끌어올려 봅시다 2번)

띄우고자 하는 요소의 HTML이 밑으로 뜨게 하려는 요소 바로 밑에 있는지 확인하세요.
-> 띄우고자 하는 요소의 HTML이 여러분이 떠오르게 하려는 요소 밑에 있는지 확인하세요.

(끝에서 2번째 줄)

‘오른쪽은 팽팽히, 왼쪽은 느슨하게’라는 기업법을 알게 될 것입니다.
-> ‘오른쪽은 팽팽히, 왼쪽은 느슨하게’라는 기억법을 알게 될 것입니다.

(2번)

2 tableContainer란 id를 가진 행에 대한 <div>도 추가했습니다.
-> tableRow란 id를 가진 행에 대한 <div>도 추가했습니다.

(두번째 A)

그리고 첫 번째 행에는 같은 수의 컬럼을 포함하고 있어야 합니다.
-> 그리고 첫 번째 행과 같은 수의 컬럼을 포함하고 있어야 합니다.

(중간 문단)

계속해서 이 <div>를 ‘index.html’ 파일의 footer 바로 밑에 추가하세요. 이 <div>를 배치할 것이므로, HTML 안에서의 위치는 포지셔닝을 지원하지 않는 브라우저에서 문제가 될 것입니다. 쿠폰은 순서상 맨 위에 놔야 할 정도로 중요한 항목은 아닙니다.
-> 이 <div>를 ‘index.html’ 파일의 footer 바로 위에 추가하세요. 포지셔닝을 지원하지 않는 브라우저에서는 좀 이상하게 보이겠지만 이 쿠폰이 맨 위에 둬야 할 만큼 중요한 항목은 아니니 그 정도는 감수해야 합니다

(두 번째 줄)

(새로운 요소 모두 중, 상대적으로 중요한 요소만 골라냈습니다)
->(새로운 요소 중 상대적으로 중요한 요소만 골라냈습니다)

(section 코너 설명)

각의 'section' 
-> 각각의 'section'

(오른쪽 화살펴 설명)

아래에 있는 HTML과 CSS를 수정하고,
-> HTML과 CSS를 아래에 수정하고,

(마지막 문단)

여러분의 마일리지가 변할 수도 있지만,
-> 상황에 따라 다를 수도 있지만,

(하단 코드)

<li class="selected"><a href="blog.html">블러그</a></li>
-> <li class="selected"><a href="blog.html">블로그</a></li>

(두 번째 줄)

다른 <article> 위, <section> 요소 밑에 아래의 HTML을 추가하세요.
-> 다른 기사 위, <section> 요소 밑에 아래의 HTML을 추가하세요.

(마지막 설명)

<source> 태그 밑에 있는 <video> 요소 안에 <object> 요소를 추가하세요.
-> <video> 요소 안의 <source> 태그 밑에 <object> 요소를 추가하세요.

(중간 설명)

스타버즈 사이트에서 사용했던 스타일 없이 폼만 지금 당장은 생성할 것입니다.
-> 스타버즈 사이트에서 사용했던 스타일 없이 지금 당장은 폼만 생성할 것입니다.

(734page)

브라우저가 되어 봅시다. 정답 부분에서

model="미니 쿠퍼 컨버터블"
color="칠리 레드"
caroptions[]="레이싱 스트라이프"

--> 다음과 같이 수정합니다.

model="convertible"
color="chilired"
caroptions[]="stripes"