메뉴 건너뛰기

조회 수 67 댓글 1

예제 8-2의 코드를 실행후, 스타일변경을 클릭시 "문장입니다"가 왜 "이것은"의 오른쪽에 출력되지않고 

"이것은"의 아래쪽에 출력되는건가요?

?
  • ?
    관리자 2019.08.15 01:10
    원래 <span> 태그로는 인라인 태그이므로 display 속성이 자동으로 inline 입니다.
    그래서 <span> 태그로 출력되는 것은 항상 다른 요소들과 나란히 출력되지요.
    그런데 change() 함수에서 다음과 같이 <span> 태그의 DOM 객체 span의 display 속성을 "block" 으로 바꾸었습니다.
    그러므로 이 이후부터 블록 박스가 되고, 블록 박스의 특성상 높이와 너비의 조절이 가능하며 독립된 한 줄의 공간을 차지합니다.
    span.style.display = "block"; // 블록 박스로 변경

    그래서 아래에 독립적으로 한 줄로 출력됩니다.
    display 스타일 속성에 관해서는 5장 초반부를 살펴보세요

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18173
382 13장 실습문제 5번 질문입니다. 3 웹린 2022.12.04 111
381 10장 연습문제 10번 질문입니다. 2 웹린 2022.11.03 158
380 webgl 2차원. 1 궁금해요 2022.10.10 131
379 6장 9-2번 이론문제(개정판) 1 file 궁금해요 2022.09.10 157
378 연습문제 3장 2번 질문합니다! 1 file KHE 2022.09.08 152
377 4장 9번 이론문제 2 궁금해요 2022.09.07 114
376 [개정판] p.357 sibling 에 대한 설명 및 그림 8-7 1 질문 2022.09.02 59
375 target프로퍼티 질문(페이지 428쪽) 2 한성이 2022.08.15 47
374 스타일 시트 객체 2 한성이 2022.08.09 32
373 css3의 프로퍼티와 7장 객체의 프로퍼티 1 한성이 2022.08.07 38
372 9장 6번 실습문제 2 궁금해요 2022.07.24 123
371 예제 8-9(373p) 1 열공이 2022.05.29 87
370 timerID값이 null인 이유 1 열공이 2022.05.26 598
369 length 프로퍼티 2 열공이 2022.05.21 59
368 9장 실습문제3번 2 열공이 2022.05.17 192
367 5장 오픈챌린지 관련 시급함 2022.04.16 197
366 교제 254페이지 1 쿠웨이트 2022.04.12 84
365 5장 실습문제 8번 2 쿠웨이트 2022.04.12 121
364 5장 실습문제 10번 1 쿠웨이트 2022.04.12 107
363 이미지파일 6 스물다섯 2022.04.08 106
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로