 |
|
| |
|
  |
13년 전
|
display
Block Elements
<h1><h2><h3>... heading
<p>
<div>
Inline Elements
<span>
<a>
display는 말그대로 화면에 디스플레이 될 상태를 설정 하는것입니다.
기본적으로 모든 요소들에는 display속성이 지정되어 있으며, 이를 자유롭게 변경 할 수 있습니다.
예를들어 inline요소인 span에 display:block으로 지정하면 span이 div와 같은 역할을 하게 됩니다.
설명하자면
display:none; (숨김)
display:inline; (줄바꿈 하지않음)
display:block; (줄바꿈)
display:inline-block; (해당엘리먼트를 block 형태로 만들지만 , 그 자체 속성은 inline으로 배치)
정렬을 할때 inline과 float:left,right의 쓰임새에 대해 혼동하시는 분들이 많습니다.
위의 설명처럼 display는 화면에 보여주는 방식을 나타내며, 정렬 방식에서 block Element를 정렬할때 float를 사용하는것이 마크업 의미가 맞습니다.
block의 정렬 = float
inline의 정렬 = text-align
inline요소는 width값과 height값을 가질 수 없습니다.
<span>의 inline의 속성을 가지고 있지만 float을 적용할 경우 width값과 height의 값이 적용됩니다
Tip, display:line은 서체의 종류나 크기에 영향을 받기 때문에 메뉴 정렬에는 적절하지 않습니다.
float
float는 block요소를 정렬하기 위해 사용하는 속성입니다.
inline의 요소를 정렬하기 위해 float의 속성을 사용하는것은 적절하지 않습니다.
block의 정렬 = float
inline의 정렬 = text-align
주의할점, block의 특성상 width값을 줘야 중앙정렬이 적용됩니다.
block의 중앙정렬은 정렬을 하기위한 block요소에 margin:0 auto;값을 주면 중앙정렬이 됩니다.
CSS는 블럭과 인라인이 기본값인 요소가 있습니다.
Block Elements
<h1><h2><h3>... heading
<p>
<div>
Inline Elements
<span>
<a>
display:inline;
<html>
<head>
<style type="text/css">
li {display:inline;}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
<li>JaveScript</li>
</ul>
</body>
</html>
|
|
 추천 : 412 |
추천
목록
|
|
| |
|
