메뉴 건너뛰기

조회 수 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 18266
283 page 46 마우스 올릴시 이미지 출력 2 file 공부중 2020.09.10 323
282 p.469 6번 질문드립니다. 4 열심히 공부하는 독자 2020.09.08 64
281 open12 질문드립니다. 3 열심히 공부하는 독자 2020.09.08 111
280 value 속성 1 열심히 공부하는 독자 2020.09.04 48
279 오타제보합니다. 1 컴퓨터공학생 2020.08.30 96
278 p.133 질문이요 1 컴퓨터공학생 2020.08.30 74
277 p.133 질문이요 1 컴퓨터공학생 2020.08.30 67
276 p.469 실습 5번문제 4 열심히 공부하는 독자 2020.08.29 92
275 브라우저 크기 변경 1 열심히 공부하는 독자 2020.08.27 59
274 9장 실습9번 문제 2 열심히 공부하는 독자 2020.08.23 106
273 Image객체 질문 4 열심히 공부하는 독자 2020.08.21 79
272 DOM트리 질문 1 열심히 공부하는 독자 2020.08.17 76
271 몽구스 웹서버가 뭔가요? 1 안녕하세요 2020.08.16 101
270 이벤트리스너 질문 2 열심히 공부하는 독자 2020.08.16 63
269 <script>태그의 위치 1 열심히 공부하는 독자 2020.08.15 58
268 open 8 질문 2 열심히 공부하는 독자 2020.08.15 62
267 p.254 3번문제 질문드립니다. 2 열심히 공부하는 독자 2020.08.14 48
266 예제 9-8 질문입니다. 2 모르겠어요 2020.07.31 101
265 예제 6-13 질문이요! 2 궁그미 2020.07.30 145
264 border style 질문 2 궁그미 2020.07.28 41
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 11 ... 21 Next
/ 21
위로