CSS float, display, visibility, opacity 요약 정리

 

CSS float, display, visibility, opacity 요약정리를 해보았습니다.

 

위의 명령들은 CSS로 레이아웃을 할 때 꼭 필요하고 자주 쓰이는 명령들입니다.

 

위의 것들만 이용해도 정적인 페이지는 얼마든지 디자인대로 구현이 가능하며, 기본적인 CSS 지식입니다.

 

레이아웃을 더 편하게 할 수 있는 flex와 grid도 display 명령에 속하지만 내용이 길어져 다음 글에서 이어가겠습니다.

 

 

 

 

float

 

float은 웹 초기에 쓰던 레이아웃 방식이지만, 최근에도 쓰이지 않는 것은 아니라서 알아두시면 좋습니다.

 

float은 간단하게 말해서 공중에 흐르는 흐름입니다. 물결이라고 생각해도 좋습니다.

 

div에 float : left를 하면 div와 그 이후에 나오는 요소들이 왼쪽으로 흘러갑니다. right는 오른쪽으로 흐르고요.

따라서 그 흐름에 끌려가지 않아야 되는 요소에 clear:both를 해서 흐름을 끊어주어야 합니다.

 

제 경험으로는 clear 하기도 귀찮고, 요소가 추가되면 뜻하지 않게 흐름을 따라가서 번거롭더군요.

 

복잡한 레이아웃에는 float 보다는 flex나 grid 레이아웃을 추천합니다. float이 나와도 당황하지 않도록 알아만 두세요.

 

 

display

 

display는 보이는 부분에 대한 명령들이 있습니다. 

 

속성 변경

 

요소가 어떻게 보이는지는 태그의 속성과 관련이 있습니다.

 

지난 글에서 어떤 태그가 블록, 인라인, 인라인 블록의 성질을 가지고 태어났는지 설명해두었습니다.

 

블록, 인라인, 인라인 블록 성질과 정렬 방법

 

원하는 요소를 블록, 인라인, 인라인 블록 속성을 display 명령으로 바꿀 수 있습니다.

 

왜 이렇게 하느냐면, 필요에 따라 요소의 속성을 바꿔서 원하는 대로 레이아웃을 배치하기 위해서입니다.

 

예를 들어 인라인 성질을 가진 태그에 display : block;을 하면 크기와 위치 등을 변경할 수 있게 됩니다.

 

참고로, 속성을 변경하더라도 마음대로 조정이 안 될 때가 있을 것입니다.

 

뼛속까지 완전히 다른 타입의 요소로 바뀌는 것은 아니기 때문입니다.

 

인라인 요소는 내부에 다른 요소를 포함할 수 없습니다. 처음부터 블록인 요소만이 내부에 다른 요소를 포함할 수 있습니다.

 

이 얘기는 지금은 참고만 하시고 원하는 대로 배치가 안 될 때 알아보시면 됩니다.

 

 

요소의 속성을 변경시키는 것 외에도 자주 쓰이는 display 명령이 몇 가지 있습니다.

 

 

none

이 명령을 요소에 하면 실제로는 존재하지만 레이아웃 영역을 차지하지 않고, 보이지 않게 합니다.

display : none; 했다가 마우스를 올리거나 할 때 display : block; 을 해서

 

평소에는 보이지 않다가 마우스를 올리면 보이는 드롭 다운 메뉴 등에 사용할 수 있습니다. 

 

 

마지막으로 display 명령은 아니지만, 연관해서 자주 쓰이는 명령들이 있습니다.

 

 

visibility

 

visibility는 가시성이라는 뜻을 가지고 있습니다. display : none;과 마찬가지로 요소를 숨기거나 나타내는 데에 쓰입니다.

 

그러나 display : none;과는 달리 visibility : hidden; 명령은 레이아웃 영역을 차지한다는 차이점이 있습니다.

 

사용법은 다음과 같습니다.

1. visible: 요소를 나타냅니다. 나타나 있는 게 기본값이므로, 숨겼던 요소에 사용할 수 있습니다.
2. hidden: 요소를 숨기지만 레이아웃 영역을 차지하고 있습니다.
3. collapse: 동적인 테이블에서 테이블 테두리를 한 줄만 보여줍니다. 저는 거의 안 썼습니다.

요소가 존재하는데 눈에 보이지 않게 감춰둔 것뿐 이기 때문에, 민감한 정보에는 사용하지 않아야 합니다.

 

개발자 도구(F12)를 눌러 visibility : visible;이라고 타이핑만 하면 드러나기 때문입니다.

 

그래서 툴팁 같은 부연 설명 등에 주로 사용됩니다.

 

 

opacity

 

opacity로 요소의 투명도를 조절하거나 보이지 않게 할 수 있습니다.

 

opacity : 0;을 하면 요소가 보이지 않게 되고, 1을 하면 원래의 투명도를 가집니다.

 

0과 1 사이에 소수점으로 투명도를 조절할 수 있습니다. opacity : 0.5;를 하면 투명도 50%입니다.

 

CSS 애니메이션이나 자바스크립트로 페이드 효과를 줄 때 많이 사용합니다.

 

참고로 alpha-value라는 명령도 있는데, 알파와 다른 점은 opacity 명령은 자식 요소까지 투명도가 적용된다는 것입니다.

 

자식 요소 개별로도 또 투명도를 설정할 수 있습니다. 하지만 부모의 투명도 범위 내에서 조절하는 것입니다.

 

부모의 투명도가 0.5라면 자식은 아무리 1로 해도 0.5 이상 선명해지지는 않을 것입니다.

 

 

이상으로 CSS float, display, visibility, opacity 요약정리를 마치겠습니다.