CSS 를 활용하여 레이아웃을 구상하고 잡기 위해서는 꼭 알아야할 것들이 있다.
위코드 개강 첫주이며 2일차 CSS 의 레이아웃을 위해 알아야할 요소들에 대해서 공부할 것이다.
이것을 공부해야 어떤 방식을 통해 요소들을 배치할지를 구상할 수 있으니까.
오늘 공부한 것을 정리해보았다.
☑️ position 속성 - relative, absolute, fixed
'포지션(position)' 은 단어 의미대로 태그들의 위치를 결정할 수 있는 CSS 이다.
CSS 의 포지션에는 'static, relative, absolute, fixed' 이렇게 4가지가 있다.
이 중에 static 의 경우 모든 태그들의 기본값으로 설정된 포지션이다. 따라서 따로 position: static; 을 적어주지 않아도 된다. 기본적으로 태그가 적힌 순서대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.
따라서 기본값인 static 을 제외한 나머지 태그들에 대해서 자세히 공부해보려한다.
-
relative
태그의 위치를 변경하고 싶다면 position: relative; 를 적용하면 현재 태그가 원래 위치해야 하는 방향을 기준으로 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 으로 값을 주면 위치를 이동합니다.
밑의 포지션의 적용을 보면 이해가 더 쉽다.
위와 같이 고양이 사진 하나를 넣어서 html 파일을 만들었다. 위는 코드이며 아래는 결과 이미지이다.
CSS 파일에 위 고양이 사진을 100px 정도 오른쪽 방향으로 밀어보겠다.
위와 같이 CSS 를 이용해 오른쪽 방향으로 100px 만큼 사진이 밀린 것을 확인할 수 있다.
(주소창과 사진의 위치를 보면 밀린것을 확실히 확인 가능) -
absolute
위의 relative 는 기본값인 static 일 때를 기준으로 위치가 움직였다면 absolute 는 부모 객체의 포지션을 기준으로 움직인다. 만약 부모 객체가 없다면 <body> 태그를 기준으로 움직인다.
이해를 위해 위의 고양이 사진에 다른 고양이 사진을 추가하겠다.
위와 같이 고양이 이미지가 2개가 되었다. 이제 추가된 아래 고양이 이미지를 위의 원래 고양이 이미지를 기준으로 움직이는 것을 확인할 수 있게 이동값을 넣을 것이다.
내가 이해하기 쉽게 top: 100px; 을 주었더니 첫고양이에서 100px 내려온 것 같다. -
fixed
단어 그대로의 의미 그대로 고정시키는 것이다. 홈페이지를 보면 메뉴바 같은 것이 position: fixed; 로 고정되어 스크롤을 내려도 함께 내려온다. 간단하게 네이버를 켜서 스크롤을 내려보면 알 수 있다.
보다시피 검색어를 입력하는 검색창이 스크롤과 함께 내려오고 상단에 고정되어 있다. 위와 위치를 고정시킬 수 있는 것이 fixed 이다.
☑️ inline, inline-block, block 에 대해서
위의 inline, inline-block, block 은 display 속성 이다.
우선 inline 과 block 은 무엇인가 부터 아는 것이 좋다.
display: block; 은 기본적으로 width 가 100% 가 되어 가로의 줄을 모두 차지 하게 된다. 간단하게 직접 코드를 적어서 이해해보았다.
첫번째 div 태그에 block 을 주니 가로를 모두 차지하고 백그라운드 컬러가 가로를 모두 차지하고 있는 것으로 시각적으로 확인가능하다.
display: inline; 은 기본적으로 컨텐츠 만큼의 공간만 차지 한다. 위와 같이 코드로 확인하는게 이해하기 빠르다.
백그라운드 컬러를 통해 영역이 시각적으로 확인된다. 딱 텍스트 만큼의 공간만 차지하고 있는 모습을 볼 수 있다.
display: inline-block; 는 위 두가지의 속성이 퓨젼했다고 보면 된다. 컨텐츠 만큼의 양만 공간을 차지하지만 크기를 조정해줄 수 있다. 개인적으로 이 속성은 위코드 사전 1주차때 자기소개 페이지를 만들며 상단 메뉴를 구성할 때 활용하였었다. 위의 메뉴바에 '홈' 과 '소개페이지가' 가로로 나란히 들어갈 수 있게 설정할 때 사용하였다. 간단한 코드로 이해를 해보겠다.
결과물을 보면 알 수 있지만 inline-block 속성으로 인해 컨텐츠 만큼의 공간을 차지하면서 끝나면 그 뒤에 바로 이어서 다음 컨텐츠 만큼 다음 태그가 들어왔다. 이러한 속성 덕에 페이지를 만들때 상단 메뉴바 구성으로 잘 사용하였다.
☑️ float에 대해서
단어 그대로의 의미는 '띄우다' 인데 적용되는 것도 비슷하다. 하긴 의미랑 비슷하게 동작하니까 저 이름을 당연히 붙였겠지만... 이미지를 띄워서 텍스트로 감싸안아 레이아웃을 구성할 수 있다. 코드를 통해서 이해하는게 가장 빠른 것 같다.
보다시피 글과 이미지 2개가 있다. 그럼 저 고양이 이미지를 왼쪽으로 띄워서 이동시켜보겠다.
float: left; 로 인하여 이미지가 왼쪽으로 이동하였고 그 주변을 텍스트가 감싸고 있다. 예를 들면 프로필 이미지를 왼쪽에 플로팅을 띄우고 프로필에 대한 텍스트가 이미지 오른쪽에 들어가는 식으로 레이아웃을 꾸며주는 방식으로 사용가능하다.
