[CSS] 5. 인라인 앨리먼트를 블록 앨리먼트로 바꿔보자. (display) 강의이야기 | Posted on 2012. 2. 4. 23:33
해당 강의의 저작권은 Pure Ani's Blog의 주인장 Pure Ani에게 있습니다.
이번에 사용할 display는 사실, 잘 사용되지는 않습니다.
제가 주로 사용하는 용도라면 마우스를 가져다 되면 펼쳐지는 기능을 만들때 사용하는 정도..
(참고로 jQuery로 만들때..)
그것보다 더 많이 사용하는건 앨리먼트를 숨길때겠네요.
관련 옵션은 엄청나게 많습니다.
관심있으신분은 검색해보세요.
전 주로 쓰는 block, none을 설명합니다.
일단 샘플 예제로 아래와 같은 코드를 준비하겠습니다.
<span>a</span><span>b</span>
실행을 해보면 ab로 나타납니다.
이것을 CSS로 블록 앨리먼트처럼 줄바꿈 시켜보겠습니다.
<span>a</span><span style="display:block">b</span>
위의 코드를 실행해보면..
a
b
로 나타납니다.
이것은 b의 span이 인라인이 아닌 블록으로 변경되었기 때문입니다.
추가적으로 이번에는 앨리먼트를 숨겨보겠습니다.
<span style="display:none">a</span><span>b</span>
결과는 b만 화면에 나타납니다.
이유는 a앨리먼트가 숨겨졌기 때문이지요.
출처 : Pure Ani's Blog
이번에 사용할 display는 사실, 잘 사용되지는 않습니다.
제가 주로 사용하는 용도라면 마우스를 가져다 되면 펼쳐지는 기능을 만들때 사용하는 정도..
(참고로 jQuery로 만들때..)
그것보다 더 많이 사용하는건 앨리먼트를 숨길때겠네요.
관련 옵션은 엄청나게 많습니다.
관심있으신분은 검색해보세요.
전 주로 쓰는 block, none을 설명합니다.
일단 샘플 예제로 아래와 같은 코드를 준비하겠습니다.
<span>a</span><span>b</span>
실행을 해보면 ab로 나타납니다.
이것을 CSS로 블록 앨리먼트처럼 줄바꿈 시켜보겠습니다.
<span>a</span><span style="display:block">b</span>
위의 코드를 실행해보면..
a
b
로 나타납니다.
이것은 b의 span이 인라인이 아닌 블록으로 변경되었기 때문입니다.
추가적으로 이번에는 앨리먼트를 숨겨보겠습니다.
<span style="display:none">a</span><span>b</span>
결과는 b만 화면에 나타납니다.
이유는 a앨리먼트가 숨겨졌기 때문이지요.
출처 : Pure Ani's Blog
