복습 겸 다시 하고 있는데 사진이 글자에 겹쳐서 나와요
교재에 쓰여진 대로 타이핑했는데 왜 겹치는 걸까요ㅜㅜ?
복습 겸 다시 하고 있는데 사진이 글자에 겹쳐서 나와요
교재에 쓰여진 대로 타이핑했는데 왜 겹치는 걸까요ㅜㅜ?
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
공지 | 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. | 관리자 | 2017.06.20 | 18282 |
383 | 13-7 예제 1 | 궁금이 | 2020.06.14 | 146 |
382 | 13장 실습문제 5번 질문입니다. 3 | 웹린 | 2022.12.04 | 111 |
381 | 14장 소스코드 제공에 대해 질문합니다. 1 | 질문자 | 2021.05.25 | 176 |
380 | 14장 예제 사라진 건가요 1 | ... | 2021.03.09 | 4078 |
379 | 168p 예제4-8 질문 2 | 그냥초보 | 2020.05.01 | 80 |
378 | 185쪽 질문있습니다.. 3 | ㅇㅇ | 2020.04.30 | 62 |
377 | 1장 1 | ㅇㄹㅇㄹ | 2019.06.07 | 232 |
376 | 1장 10번 문제 답 문의 | MIKAEL | 2022.12.07 | 71 |
375 | 1장 test1, 2, 3 파일 2 | 열공중 | 2020.03.07 | 542 |
» | 1장 그림1-14 2 | 000 | 2020.04.14 | 119 |
373 | 2-21 예제 3 | Iwanteating | 2021.03.25 | 157 |
372 | 2-26 오디오 삽입 모바일 문의 2 | 한수연 | 2017.12.12 | 101 |
371 | 207p 4장 실습문제 3번 질문 1 | 웹개발초보 | 2019.10.19 | 275 |
370 | 264p 문의 1 | . | 2020.10.15 | 65 |
369 | 282p. 예제 6-14 출력 문의 드려요 1 | . | 2020.10.15 | 82 |
368 | 2장 실습문제 1번 질문드립니다! 1 | 망나뇽 | 2022.03.06 | 169 |
367 | 2장 예제 2-11과 관련하여 질문 드립니다. 1 | 조근석 | 2017.04.30 | 398 |
366 | 2장 예제 2-24에 관한 질문입니다. 1 | 최원석 | 2018.01.29 | 191 |
365 | 2장 오디오 실습문제에 대해서 질문이있습니다 1 | ㅇㅇㅇ | 2019.09.19 | 213 |
364 | 2장 오픈 챌린지 웹페이지 음악연주 질문있습니다. 1 | 초보자 | 2020.03.29 | 195 |
<div style="width:120px; height:120px"> 때문입니다.
<div> 태그에 출력되는 박스의 크기를 120x120 픽셀 크기로 제한해 버리기 이미지의 실제 크기와 관계 없이
높이 120픽셀 밑에는 <p>He was ...의 텍스트 박스가 출력되는 겁니다.
이미지의 크기가 120x120 박스보다 작으면 문제가 없는데, 이보다 큰 이미지를 <div> 영역안에 넣으려면
좋은 방법은 아니지만 overflow 스타일을 사용해야 합니다.(책의 5장에 overflow 속성을 보세요
예를 들어
<div style="width:120px; height:120px;overflow:hidden">으로하면 이미지가 잘려 보이고요,
<div style="width:120px; height:120px;overflow:scroll">로하면 120x120 박스에 스크롤이 만들어져서 텍스트가 겹치지 않아요.
그런데, overflow를 사용하지 않으면 디폴트가 overflow:visible이어서 <div> 박스 크기에 상관없이 이미지가 출력됩니다.
그래서 이미지와 텍스트가 겹쳐 나오게 됩니다.
이미지의 크기와 상관없이 이미지와 텍스트가 겹치지 않게 하려면
<div> 태그에 스타일을 지우고 다음과 같이 원래 책에 있는 대로 해야 합니다.
<div><img id=...
그리고 현재 HTML 태그의 앞부분에 <style> 태그 내에
font-size:"15" 등과 같은 표현은 틀린 겁니다.
font-size:15px과 같이 반드시 단위를 써주어야 합니다. 그리고 ""도 없애야 합니다. 정교하게 코딩하세요.
또한 <h3 ...";>에서 끝의 ;도 없애고 <h3 ..."hide()>와 같이 해야 합니다.
이곳 저곳 더 살펴보세요.