메뉴 건너뛰기

조회 수 67 댓글 1

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

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

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

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

QnA

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

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 18281
402 span과 text-align : center; 에 관한 문제입니다. file 2019.10.15 279674
401 11장 6번 으엉 2019.11.27 187675
400 placeholder속성 1 khl 2017.04.08 85735
399 11장 6번 1 mj 2018.11.29 67577
398 실습문제 8-2 (3) 13412 2018.11.08 15811
397 웹 프로그래밍 책 답안지 1 mumu 2017.03.06 14076
396 살다 살다 답을 반쪽만 주는 책은 처음입니다 1 음음 2019.01.24 8848
395 Open Challenge 와 실습문제 자료 2 김원상 2017.04.29 7446
394 14장 예제 사라진 건가요 1 ... 2021.03.09 4078
393 localhost 관련 문의 3 소년정 2018.02.20 4039
392 페이지 247 에 있는 Open Challenge 05 의 CSS3로 태그 배치하기를 공부하고 있는데 질문드립니다. 1 file 워니고 2018.03.28 3878
391 ㅠㅠ..질문좀 드리겠습니다.. 1 은성 2017.04.18 3835
390 연습문제 답안지 2 vdncnck 2017.03.28 3265
389 짝수번 정답 3 idididid 2017.12.24 3136
388 8장 연습문제 실습문제 4장 2 student 2017.05.08 2872
387 10장 오픈챌린지 5 은성 2017.04.07 2247
386 open challenge 05 2 hardworking 2017.03.29 2225
385 5장 연습문제 홀수 번 질문 1 채XX 2019.06.17 1997
384 HTML을 열심히 공부중인 학생입니다 3 열심히 하자 2018.05.30 1962
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로