웹프로그래밍

Global It Leader!!


CSS


 
 

display: block과 inline

페이지 정보

작성자 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 3,456회 작성일 14-01-28 19:10

본문

<div>div1</div>
<div>dIv2</div>
<div>div3</div>

웹 브라우저에 아래와 같이 표시된다.
 
div1
dIv2
div3

반면에 아래 태그는

<span>span1</span>
<span>span2</span>
<span>span3</span>

웹 브라우저에 아래와 같이 표시된다.
 
span1 span2 span3 
 
이 둘 사이에 나타나는 가장 큰 차이는 줄 바꿈 여부이다.
div 태그는 줄바꿈되고, span 태그는 줄바꿈되지 않는다.
div 태그가 줄바꿈되는 이유는 CSS display 속성 기본 값이 block이기 때문이고,
span 태그가 줄바꿈되지 않는 이유는 CSS display 속성 기본 값이 inline이기 때문이다.

아래처럼 반대로 설정하면

div {
  display: inline;
}
span {
  display: block;
}

웹 브라우저에 아래와 같이 표시된다.
 
div1
dIv2
div3
span1 span2 span3
 
※ block과 inline의 차이점은 줄바꿈만은 아니다.
  • ① block으로 설정하면 줄바꿈 되고, inline으로 설정하면 줄바꿈이 되지 않는다.
  • ② block으로 설정하면 상/하 margin과 padding 속성을 사용할 수 있지만, inline으로 설정하면 상/하 margin과 padding 속성을 사용할 수 없다.
  • ③ block으로 설정하면 width, height 속성을 사용할 수 있지만, inline으로 설정하면 width, height 속성을 사용할 수 없다.

댓글목록

등록된 댓글이 없습니다.

전체 72
게시물 검색
CSS 목록
번호 제목 글쓴이 조회 날짜
32 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3090 03-02
31 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3056 11-10
30 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3054 10-26
29 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3460 10-26
28 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2918 10-17
27 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2958 12-25
26 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3438 06-30
25 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3099 06-10
24 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3232 06-09
23 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3149 06-05
22 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4577 05-20
21 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3661 05-20
20 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3141 05-14
19 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3275 04-27
18 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3184 02-04
17 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3777 09-06
열람중 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3457 01-28
15 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3860 01-21
14 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3548 01-21
13 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3676 12-23