CSS #1 기초 다지기, 첫 번째에 이어서 두번째 챕터!
CSS에서 가장 기본이 되는 display와 position에 대해서 공부를 해보겠습니다 👍
너무 간단해서 쉬워보이지만 , 현업에서 박스 위에 박스가 올라가고 박스 위에 또 박스,,
여기서 display와 position을 이해하지 못한다면..? 아무리 잘 짰다고 해도 금방 무너져 버립니다!
오늘 공부를 통해 position과 display는 그냥 끝내버리겠다는 마인드로 시작해보겠습니다 🔥🔥
jsbin을 통해 직접 해보면서 이해를 해보도록 하겠습니다.
display
Block 레벨의 대표 div 타입과 Inline level의 대표 span 이 있습니다.
각각은 기본값으로 블럭 단위로 세로로 차곡차곡 쌓이고, 한줄에 가로로 차곡차곡 쌓이는 특징이 있습니다.
이것은 css에서 display 속성을 이용해 변경이 가능합니다.
여기서 inline-block 이 아니라 inline 을 넣게 되면 빨간색(div) 박스가 아예 사라지게 됩니다!
inline 속성은 물건(컨텐츠) 자체만을 꾸며주는 것인데, css에서 박스에 정의해준 width 나 height 는 무시를 해버리고, 안에 들어있는 물건의 크기에 맞춰서 박스가 변경이 됩니다.
이와 다르게 inline-block 속성은 안에 있는 물건(콘텐츠)은 신경쓰지 않고, 미리 지정해놓은 박스의 사이즈에 맞춰서 블럭 단위로 한줄에(가로로) 배치하게 되는것입니다.
block 은 상자는 상잔데 한줄에 하나만(세로로) 배치되는 속성입니다.
한마디로 정리하자면,
inline 은 물건, inline-block 은 한줄에 전부(세로), block 은 한줄에 하나만(가로) !position
컨테이너의 top 과 top-left 에 공백을 좀 두고 싶은데 적용이 안되는 것을 볼 수 있습니다.
이것은 css 의 기본 속성(default) 으로 static 이 지정되어 있어서 그런거에요!
위의 코드에서 position : static 이라고 나와있는데, 이렇게 적어주든, 안적어주든 기본 값으로 static 이 적용되게 됩니다.
container 의 위치를 옮기고 싶다면 어떻게 하면 되냐!
바로 position 속성을 바꿔주면 됩니다.
이렇게 position 의 값을 relative 로 주면,
container 의 top 과 left 에 20px 만큼 여백이 맞게 들어간 것을 확인 할 수 있습니다.
box class에 relative 속성을 주고 top과 left에 20px 씩 공백을 주었는데, 위와 같이 파란색 박스가 밀려나는 것을 볼 수 있습니다.
자 여기서 알 수 있는것은!!
"원래 있어야 되는 그 자리에서 상대적으로 20px 씩 옮겨가는 거구나 !" 라고 이해가 가능합니다.
또 다른 속성으로 absolute 속성이 있습니다.
absolute 속성은 "내 아이템이 담겨있는, 가장 가까이 있는 박스 안에서 위치 변경이 일어나는것" , 즉 container 박스에서 20px 씩 옮겨간 것이라고 이해하면 됩니다.
가장 가까이 있는 부모(박스 단위)의 위치를 기준으로 위치 변경이 일어나는 것입니다.\
또 다른 속성으로 fixed 라는 것이 있습니다.
fixed 속성을 적용하니 완전 이상한 곳으로 박스가 옮겨진 것을 볼 수 있는데요,
fixed 속성은 상자에서 완전히 벗어나서, 박스가 아닌, 윈도우(웹 페이지)를 기준으로 위치 변경이 일어납니다.
마지막 속성!! 바로 sticky 입니다.
다음 코드를 실행시켜 본다면 스크롤을 해도 파란색 박스가 상단에 계속 붙어 있는걸 확인 가능합니다. 원래 있어야 하는 자리에 계속 있는데, 스크롤링을 해도 그게 유지가 되는 경우입니다. 일반적으로 사이드바나 헤더폼에 주로 이용됩니다. 웹 사이트를 스크롤하면서 내려가고 올라가도? 계속 그 자리에 유지되어 있는 경우이죠!!
예전에는 Bootstrap 이나 jquery 와 같은 라이브러리를 많이 이용했었습니다. 그것은 js 와 css 가 많이 발전되지 않은 상황이였기에 그랬습니다. 하지만 요즘 js 가 발전하고, css 의 강력한 기능들이 추가 되고 있는 이 시점에서는, 더 이상 Bootstrap 과 jquery 를 쓸 필요가 없어졌습니다. 그렇다고 해서 최신으로 업데이트 되고 있는 css를 그냥 가져다가 마음놓고 쓰면 절대 안됩니다!! 모든 브라우저에서 호환이 되는지, 호환성 여부를 항상 검사해봐야 합니다. MDN 사이트에서 속성별로 하단에 나오는 각각의 브라우저에서 호환 여부를 체크 할 수도 있지만, 그것보다 더 유용하게 자주 사용되는 사이트가 있습니다!!
바로 Can I use 입니다 !! 링크 남겨놓겠습니다 🖤
어떤 속성값이 얼마나 많은 브라우저에서 지원이 되는지, 전 세계적으로 얼마나 많은 사용자들이 사용하고 있는지에 대해 정말 자세하게 나와있습니다 👏
(웹 개발 입문자가 쓰기엔 아직은 이르다고 생각하지만 그래도..!!)
마지막 세 번째 챕터에서는 css 의 꽃 !!
Flex box 에 대한 공부를 마지막으로 해보고 끝내겠습니다 🤓
오늘은 여기까지 👏
