요소들은 크게
block level element
inline level element
두 가지로 나뉘며
차이점으로는
얼마큼의 공간을 차지하는가
라고 할 수 있다.
블럭 레벨 요소로는
<div> <h1> 등이 있고
인라인 레벨 요소로는
<span> <a> 등이 있다.
설정을 통해
인라인 레벨 요소를
강제로 블럭 레벨로 만들 수 있고
반대의 경우도 할 수 있다.
샘플 코드
<style>
span {display:block; width:100p; height:100px; border: 1px solid red;}
</style>
</head>
<body>
<span>inline 요소</span>
<span>은 인라인 요소기 때문에
가로 세로 값을 입력해도
변화가 없지만
display 속성을 블럭 레벨로
강제 변환시켜 사이즈를
적용시킬 수 있다.
{display: ;}
속성 값
block;
inline;
inline-block;
none;
*inline-block의 경우
인터넷 익스플로러 7 (IE7)
이하에서는 제공하지 않기에
우회하여 값을 설정해 주어야 하는데
속성 앞에 별(*)을 붙이고
사용하면 된다.
샘플 코드
{*float-left, *display:inline;}
위 코드는
display:inline-block;
과 같은 기능을 제공하며
IE 6, 7 둘 다에서
사용 가능한
css 핵중의 하나이다.
728x90
'프로그래밍 > CSS' 카테고리의 다른 글
| 기초) 실무에서 많이 쓰이는 선택자 정리 (0) | 2020.04.24 |
|---|---|
| 기초) overflow / tabindex 속성 정리 (0) | 2020.04.24 |
| 기초) background 속성 및 투명도 RGBa 정리 (0) | 2020.04.24 |
| 기초) text style / background 속성 정리 (0) | 2020.04.23 |
| 기초) float/clear 속성 정리 및 활용 (0) | 2020.04.22 |