'library'에 해당되는 글 1건

  1. 2007.02.04 CSS Design libary [ display : block, inline, none ]
AllAcc?ess2007. 2. 4. 00:41
IE와 Fox를 사용하면서 알게된 표준적 코드사용에서 CSS부분 또한 많은 차이가 있음을 알았고 그로인해 기존의 지식들에 새로운 추가적 정보들을 끼워넣어야 하는 상황에 이르렇다.

ASP,net을 하면서 visual studio를 사용하니 표준적 코드를 사용하는 것을 알고 하는지 코드가 자동생성되어 사용하는것인지 모를정도로 나의 지식을 형편없었다.. 처음으로 돌아가는 것은 내가 바보로 다시 돌아간다는 뜻인 것같다... 새롭게 시작한다는 것도 이상하다.. 돌아갈곳이 있는 곳도 아니지만..

그저 이제 또 걸어야지 라는 생각으로 해봐야지...

CSS Design 에서 display의 역활은 중요하고 할수있겠지..

none이되면 없어져 버리니까..
block이되면 나타나고.. 그런데.. inline 이것은 무엇일까...

div 와 span의 차이 tr과 td의 차이 세로의 나열과 가로의 나열 그러면 어떻게 사용할까?

우선 사용해보자..

layer를 준비하고 소소한 style을 적용할 준비를 하고..

<div style="display:;">block</div>
<div style="display:;">inline</div>
<div style="display:;">none</div>

이제 스타일 적용. all block

block
inline
none

당연 이렇게 나온다..

div 이기에 이렇게 나온다.. 그럼 all inline으로

block
inline
none

span이 아니다. div이다.. 모두 display를 inline으로 주니 span처럼 같은 line에서 뿌린다..
단어의 뜻만큼 inline 이다..
 none은 안한다..

해봐야 볼수없으니..

그럼 block에만 block을 준다.

block
inline
none

block에 display block을 하니 block에서 줄을 바꾸어 다음 소스를 뿌린다.

그럼 block 과 none에 block을 준다.

block
inline
none

생각해보면 inline을 선언하면 다음소스를 같은 라인으로 뿌려야 하지만 다음 소스의 display가 block이니 block 되어 버렸다.

그런데 중요한 사실은 display의 선언에서 inline의 설정이다. inline 다음의 dispaly가 없다면 어떻게 될까

block
inline
무설정
inline
무설정

무설정 즉 style 설정자체가 없다면 본래의 tag 속성되로 뿌려진다. inline다음에 span이 오면 같은 라인에 뿌려지지만 div가 오면 다음라인으로 내려간다...

display의 설정으로 모두 inline으로 만든다면 어떻게 될까?

block
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline


같은 라인에서 계속 뻗어나가 뿌려진다...

이로써 inline 속성을 잘 알아 보았다..




Posted by aspirinirony