'front-end/css'에 해당되는 글 4건

✔︎ [CSS] float:left 속성의 이해

▶ float의 등장 배경

img 태그는 block 성질을 가지고 있습니다. 

그래서 이미지의 width 값이 작더라도 한 줄을 통째로 차지해버립니다.

이 경우엔 이미지 바로 옆 쪽에 문장을 배치할 수 없습니다.

이러한 문제를 해결하기 위해 등장한 것이 float 속성입니다.

float 속성은 이미지의 왼쪽/오른쪽에 문장을 배치할 수 있도록 도와줍니다.

(물론 이미지 뿐만 아니라 다른 요소도 float 속성을 가질 수 있습니다.)

(다음 그림 참고)

출처 : https://www.1keydata.com/css-tutorial/float.php

▶ float:left 예제

float:left는 해당 속성이 적용된 태그를 왼쪽으로 배열하도록 합니다.

다음은 Aside와 Section에 float:left 속성을 적용시킨 결과입니다.

예상했던 대로, Aside 옆에 Section이 차례대로 붙어있는 것을 알 수 있습니다.

but, 

<div id="wrap"></div> 안에 있는 Aside와 Section 태그는 잘 배치되었지만,

wrap 태그를 벗어난 footer 태그마저 '부유'하고 있는 것을 확인할 수 있습니다.

이러한 문제를 해결하려면 어떻게 해야 할까요?

▶ float:left 실무

float:left가 적용된 태그의 '부모 태그'에다가 overflow:hidden 속성을 주면

다음과 같이 float:left 속성이 적용되지 않은 다른 태그들이 부유하지

않고 있는 것을 확인할 수 있습니다. 이러한 방법을 One True Layout 방식이라고 부릅니다.

✔︎ [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/