'css'에 해당되는 글 3건

✔︎ [CSS] display와 visibility 

: none과 hidden의 차이

화면에서 태그를 보이지 않게 하기 위한 속성으로는 

display:none과 visibility:hidden이 있습니다.

두 스타일 모두 어떤 태그를 표시하지 않고 가릴 때 사용됩니다.

그러나 두 스타일에는 차이가 있습니다. 어떤 차이가 있을까요?

▶ display:none

display:none 속성은 태그 자체를 html 상에서 제거시키는 힘이 있습니다.

때문에 inspect(요소 검사)를 해도 해당 태그를 검색할 수 없습니다.

▶ visibility:hidden

visibility:hidden 속성은 태그 자체를 html 상에서 제거시키는 게 아니라

그저 사용자가 해당 태그를 볼 수 없도록 만들어줍니다. 도자기로 덮어놓은 것처럼 말이죠.

때문에 inspect(요소 검사)를 해도 해당 태그를 확인할 수 있습니다.

✔︎ [CSS] display 속성 

: inline과 inline-block의 차이 

css에서 display 속성 중 block은 'div 태그'나 'p 태그'에 

기본적으로 적용되는 속성입니다. 자체적인 block을 가져서 

해당되는 태그가 아예 한 줄을 차지해버리죠. 

그렇다면 inline과 inline-block은 무엇일까요?

▶ inline

inline 속성을 가진 태그는 한 줄을 차지하지 않고, 다른 태그 옆에 나란히 표시됩니다. 

width와 height 값이 적용되지 않습니다.

▶ inline-block

inline 속성을 가진 태그는 한 줄을 차지하지 않고, 다른 태그 옆에 나란히 표시됩니다. 

덧붙혀 width와 height 값이 적용될 수 있습니다.

✔︎ [CSS] input 태그에 placeholder 스타일 효과 주기 

예제 1.

https://codemyui.com/input-field-placeholder-to-label-transition/

예제 2.

https://jsfiddle.net/273ntk5s/2/