날나리 강좌. ㅋ 기본 속성? display
기본 속성이라는 말은 어디를 찾아봐도 없는 말일 것입니다. 아니 있다면 제가 쓰는 말과 다를 것이고요. 그저 제가 이름을 붙였습니다. 요소를 다루는데 그것이 어떠한 흐름에 따라 위치하는 것인지를 알아두는 것이 먼저 입니다. 레이아웃을 짜기 전에 각 요속의 특성에 따라 성격이 다르기에 이것에 따라 나름 '기본 속성'이라 붙여봤습니다.
기본속성은 각 요소의 display 속성의 값을 말합니다. 본래 요소의 초기값이 block이나 inline인 경우로 나눠봅니다. 대표적으로 block 속성인 것은 div가 있으며, ul, li, p 등 많이 있습니다. 또한 inline 속성인 경우는 span, b, font, i, embed, img, iframe 등이 있습니다.
블록 속성의 기본적인 특징은 문서의 좌우를 혼자서 꽉채우려고 합니다. wiidth를 변경하여도 다른 것들이 옆에 붙으러 하지 않고 혼자서 모두 차지합니다.
인라인 속성은 서로간의 어울려 좌에서 우로 쌓이며, 모두 채울 경우 아래로 넘어옵니다. 인라인 속성은 좀더 자세히 볼 필요가 있습니다. 인라인 속성은 외부의 다른 리소스를 불러와서 크기를 결정하는 것들이 있으며 그렇지 않은 그저 텍스트를 담아 결정된 크기로 사용하는 것들이 있습니다.
전자인 경우는 보통 img, embed, object, iframe 같은 것들입니다. 후자인 경우는 span, b, i, font 같은 요소들입니다. 이들의 구별 실익은 자리를 차지하는데 수직에 관련된 border, height, margin, padding의 설정과 관계가 깊습니다.
편의상 전자인 경우는 비록 기본 display 속성의 값이 inline이나 inline-block처럼 작동합니다. inline-block은 나름의 블록적 성격을 그대로 가지고 있어서 수직에 관련된 height, border, paddng, margin이 보통의 블록요소처럼 값에 따라 적용이 됩니다.
그러나 그렇지 않은 후자의 인라인 요소는 수직 padding, margin 사용에 반응하지 않습니다. 인라인 요소인 span에 padding-top을 백만 px을 주어도 꿈쩍하지 않습니다. border도 수직에 생기긴 하나 보통 block과의 처리와는 달라 다른 행의 높이에 영향을 주지 않습니다.
여기서 텍스트 처리를 보려면 좀더 복잡합니다. 이건 나중에 따로 목차를 잡고 설명하고 일단 레이아웃을 짜기 위해필요한 것만 간단히 건드려 봅니다.
이런 기본 display 속성 값은 사용자가 변경하할 수 있습니다. 단 이때 IE7이하는 블록속성인 요소에 관하여 inline-block으로 변경시 변경되지 않고 여전히 block으로 남아 있습니다.
이를 해결하기 위해서는 CSS 핵을 사용하여
;display:inline-block;*display:inline;*zoom:1;
로 작성하면 모두 해결됩니다.
또한 블록 속성인 요소도 css의 float 속성을 받으면 인라인 요소처럼 작동하여 더이상 좌우로 꽉 채우려 하지 않고 옆에 다른 요소들과 어울리는 것이 가능해집니다. (단, 자바스크립트로 현재 계산된 display 속성값을 받으면 여전히 block 입니다.)
---
(float 관련 내용 삭제, 레이아웃에서 다시 설명)
--- 한줄 팁
css에서 color는 글자 색상만이 아닌 전경색을 의미합니다. border의 지정된 색이 없다면 color 값을 사용합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 12438 |
JavaScript
배경음악 랜덤 재생 하기 입니다.
|
| 12437 |
JavaScript
css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
|
| 12436 |
JavaScript
하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
|
| 12435 |
JavaScript
개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
|
| 12434 |
JavaScript
랜덤으로 이미지 출력 되기 입니다.
|
| 12433 |
JavaScript
사용자 해상도 알아내기 입니다.
|
| 12432 |
JavaScript
붙여넣기 금지하기 입니다.
|
| 12431 |
MySQL
대소문자 데이터 조회하기
|
| 12430 |
JavaScript
퇴장시 팝업창 한번한 띄우기 입니다.
|
| 12429 | |
| 12428 |
PHP
신문 기사를 긁어오기 입니다.
|
| 12427 |
JavaScript
시도, 구군, 동 주소 select
|
| 12426 |
MySQL
커리로 DB 테이블 명세서 출력하기
|
| 12425 |
JavaScript
브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다
|
| 12424 |
PHP
rss 읽어오기 입니다.
|
| 12423 |
JavaScript
자바스크립트로 Ajax 효과내기 입니다.
|
| 12422 | |
| 12421 |
JavaScript
키보드,마우스 등 불펌방지 입니다.
|
| 12420 |
JavaScript
해상도에 따라 서로 다른 페이지로 접속 하기 입니다.
|
| 12419 |
JavaScript
특정페이지에서 자동으로 새로고침 하기 입니다.
|
| 12418 |
JavaScript
마우스 오버시 이미지 안쪽에 테두리주기
|
| 12417 |
node.js
git 사용메뉴얼 보면 깝깝 하네요
|
| 12416 | |
| 12415 | |
| 12414 |
JavaScript
간결한 레이어 메뉴 입니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기