CSS 스터디 with 종찬님 🎃
*본 내용은 종찬님의 CSS 스터디 강의를 듣고 정리한 내용입니다.
margin: auto; 💡
block level 요소의 width와 height가 지정되지 않으면 둘 다 모두 auto값이 기본적으로 지정된다.
width는 부모요소(컨테이닝 블럭)의 width값 만큼 가득 차게 되고 height는 자기가 가진 컨텐츠의 height값 만큼 차지한다.
컨테이닝 블럭은 일반적으로 자기 자신의 직계부모가 제공해주는 컨텐츠 영역이다.
<div class="item"></div>.item { background-color: orange;}이렇게 작성하면 브라우저 화면에 아무것도 안나온다.
width가 안보이는 이유
→ width는 이미 부모요소의 전체 width를 auto속성으로 쫙 먹은 상태이다.
height값이 지금 없기 때문에 브라우저 상에 표현되지 않고 있다.
height가 안잡히는 이유
→ height는 자기가 가진 컨텐츠의 height값을 가지는데 지금 가진 컨텐츠가 없기 때문에 height값을 못 잡고 있는 것이다.
<div class="item">wow</div>.item { background-color: orange;}
텍스트 값을 넣어주어 텍스트의 height를 div가 인식하게 되어 브라우저 상에 요소가 보여진다.
지금 width 와 height는 auto값이 기본 값으로 설정되어있다.
width: auto가 기본 값이라면 width: 100%와는 어떤 점에서 다를까?
auto와 100%는 컨테이닝 블럭을 꽉 채운다는 것에서는 같은 개념이다.
auto
컨텐츠의 padding, border도 자기자신 너비에 포함해서 전체 컨텐츠를 계산한다.
% 유닛
컨텐츠 본래 너비 + padding 값 + border 값 이렇게 계산되고, 전체 크기에 반영된다.
이미 브라우저에서 컨텐츠의 width값이 계산이 끝난 상태이고, padding, border값이 추가되는 개념이다.
% 유닛을 쓸때는 무슨 값을 기준으로 하는 지 정확히 알아야 한다.
→ 즉 auto가 좀 더 유연한 방법이라고 볼 수 있다.
box-sizing: content-box; 컨텐트 박스 본래 너비 값에 padding과 border 값이 더해진다.
box-sizing: border-box; 컨텐트 박스 전체 너비에 padding과 border 값이 포함된다.
→ 이 경우 padding과 border를 추가하면 컨텐트 박스 너비가 그만큼 줄어든다. 결론적으로 우리가 보통 상상하는 구현이 된다.
왼쪽에서 각 요소에 padding: 40px 값을 줬을 때 오른쪽 처럼 망가진 레이아웃이 구현되었다.
이는 지금 각 요소에 width값이 50%로 설정되어있고 엇갈린 배치를 위해 스타일을 주었다.
% 유닛이 사용되어있기 때문에 추가된 패딩 값을 컨텐트 너비에 포함시키지않고 추가로 더해줘서 레이아웃이 망가져버렸다.
💡 고칠 수 있는 방법 💡
- 각 요소에 box-sizing: border-box; 주기
- 각 요소에 설정 된 width값을 애초에 적용할 padding 값을 고려해 지정해주기
→ width: 50%; → width: calc(50% - 80px);
왼쪽: width: calc(50% - 80px); 오른쪽: width: 50%;
나중에 들어갈 padding 값을 미리 계산해 넣으면 레이아웃이 망가지지 않는다.!
- 부모요소안에 자식요소로 저 컨텐츠들을 넣어준다. 그리고 자식요소에 padding 40px값을 부여한다.
→ 자식요소의 width는 부모 영역 width를 auto로 쫙 먹고 심지어,, padding과 border를 컨텐츠 너비에 포함하니까, 자식요소에 들어간 padding 40px는 컨텐츠 너비로 포함되어 예쁘게 레이아웃이 잡힘
flex 💡
각 개구리들이 flex 속성으로 row 방향으로 정렬되어있다.
여기서 나머지 물웅덩이 공간은 div와 비슷하게 생각해볼 수 있다. 사용가능한 공간이지만 div의 경우 그 공간 전부를 혼자 사용했고, 위 예제에서는 사용가능한 물웅덩이 공간을 개구리 3마리가 공평하게 나눠가질 수 있다.
맨 오른 쪽 개구리를 물웅덩이 오른쪽 가로 보내려면 어떤 속성을 줘야할까?
난 항상 flex를 쓰면 flex 속성에있는 것들로만 생각을 했다. 여기서 마진을 이용해 해결할 수 있으리라고는 전혀 생각도 못했다. 저 공간도 사용가능 공간이기 때문에 세 번째 개구리에게 margin-left: auto;를 주면 오른쪽 가로 보내버릴 수 있다.
각 요소에 width값을 주고 flex-grow: 1;을 주면 물웅덩이 여백을 사이좋게 같은 공간만큼 요소들이 차지하게 된다.
여기서 생기는 의문이 한 요소가 특별히 많은 컨텐츠를 가지고 있다면 어떻게 될까 인데,, 특별히 많은 컨텐츠를 가지고 있다하더라도 남은 여백을 사이좋게 같은 공간만큼 차지하는 것은 같기 때문에, 요소가 가진 컨텐츠의 양과는 상관없다. 다만 눈으로 봤을 때 여백을 나눠가진게 안보여서 바로 이해가 안되는 것 같다.! 나도 어제까지 이거 공부하면서 헷갈렸는데 초큼 이해되는 느낌,,
flex로 배치한 레이아웃을 마진을 이용해 깔쌈하게 정리하는 예제를 하나 더 보도록하자
.cover {
display: flex;
flex-direction: column;
align-items: center;
background-color: #222;
color: white;
}스타일링을 간단하게 끝낸 모습이다.
여기서 잠깐 체크해야할 점이 align-items의 기본 값은 strech라는 것인데, 이것때문에 flex를 쓰다가 당황한 적이 한 두번이 아니다... 지금은 위에 center 값을 주어 재정의 된 것이다. 그전에는,, 아래와 같은 모습이니, 당황하지말고 원하는 속성을 재정의해주면 된다. 이런걸 오버라이딩이라하나? ㅎㅎ
여튼, 맨 위 잘 정렬된 상태에서 버럭이 캐릭터 위에 공간과 빔플렉스 로고 위 공간을 두고 싶다.
나라면 이미 direction이 column으로 정렬되어있겠다. 거침없이 justify-content: space-between; 이걸 쓰고 어라 왜 안되는건가 하고 있었겠지,,? height값이 따로 부모요소에 지정되어있지 않기 때문에 가진 컨텐츠 높이 값 안에서 이미 space-between이 잘 설정되어 있었던 것이다.ㅎㅎ
height에 800px를 주고, 로고와 이미지에 margin-top: auto;를 주면,, 잘 정렬된 것을 볼 수 있다!
→ 동기분이 쉬는 시간에 직접 그려서 공유해주신 그림
굳이 space-between이나 space-around 같은 flex 기본 속성을 쓰지 않더라도 margin을 충분히 활용해서
내가 원하는 레이아웃을 구현할 수 있구나를 깨닫게된 시간이었다.!
매번 flex속성만 써왔던 것도 margin에 대한 이해가 그동안 부족해서 사용할 줄 몰라서 못썼던 것이었다.
CSS는 파도파도 배울 것만 가득,, 그래서 재밌다!!
position 💡
positon 속성은 absolute를 어떻게 활용하느냐에 따라서 내가 활용할 수 있는 범위가 결정되는 것 같다.
이때까지 position: absolute를 쓰고 상위 요소에 position: relative가 없으면 body를 기준으로 위치를 잡는 줄 알았다. 근데,, 아니었다. 이건 간단히 알아볼 수 있다.
속성 값에 left: 0과 bottom 0을 줬을 때 결과화면을 보면 착각이 바로 해결된다.
즉 body를 기준으로 위치를 잡는 것이 아니라 뷰포트를 기준으로 하여 위치를 잡는 것이었다.!
아부지 영역에 wow div를 만들어 position: absolute;에 대해 좀 더 알아보자
현재 div만 만들고 배경 색만 넣어주었다. 여기서 wow div에 position: absolute; 를 주면 어떻게 될까?
이게 보면 wow div가 인라인 요소가 된건가? 하는 착각을 할 수 있는데, 그런건 아니고 position: absolute;를 줌으로써 요소가 normal flow에서 벗어나 띄워지게 된다. 그렇게 되면 부모요소 없이 혼자 자립을 하게 되는데, 그 과정에서 내가 가진 요소만큼의 크기를 너비로 가지게 되는 것이지 인라인 요소가 된 것이 아니다.!!
(가족 집에서 살다가 독립하면 좁은 원룸에서 살게된다는 동기분의 찰떡같은 비유를 흘리고 간다,,👍🏻)
+참고로 position값을 주면 그 값을 받은 요소의 display는 block으로 변경된다.
이는 float도 마찬가지, flex도 마찬가지다.
지금 아부지 영역에 position: relative;가 설정되어있다. 그리고 wow div에 몇 가지 속성값을 줬다.
.wow {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: pink;
}
???? 이게 무슨 뜻일까
일단 top 0 left 0 이니까 왼쪽 상단에 붙었는데, right 0 속성 값을 주니까 position을 안줬던 것 처럼의 결과가 나타났다. 이는, left 0으로 왼쪽에 붙으면서 right 0 오른쪽에도 붙어라?? 그니까 오른쪽 까지 늘어나라는 말이다! 여기서 bottom에 0을 주면 어떻게 될까?
아부지 영역을 덮어버린다. 왜 이게 가능하냐면 abosolute로 wow div가 띄워져 있는 상태에서 왼쪽 상단에 붙은 요소를 right, bottom 까지 잡아 늘렸다고 생각하면 이해가 쉬울까..?
벤딩머신 라이브 코딩할 때 강사님이 top left 0을 주고 width와 height에 100%를 줘서 저렇게 만들었는데, 다른 동기분이 top left right bottom을 모두 0을 주면 요소를 덮을 수 있다고 하셨는데 그 말이 이제서야 이해가 간다.
그래서, height 100%을 주는 것 보다, bottom 0을 주는 것이 조금 더 좋은 방법이라고 할 수 있겠다.
왜냐면 좀 더 유연하게 부모 크기 만큼 가득차게 되는 것을 볼 수 있기 때문이다.(auto 개념으로다가!)
이제 여기서 또 마진의 장난을 느낄 수 있다..
.wow {
position: absolute;
width: 100px;
top: 0;
left: 0;
right: 0;
background-color: pink;
}
지금 아부지 너비가 300px이고, wow div에 너비 값을 100px 지정해주면 이렇게 구현이 된다.
wow div 옆 공간은 뭘까~? 사용가능한 공간!!! 이제 마진 값 조정으로 위치 조정을 해줄 수 있다.
margin: auto를 주면 무려 중앙정렬까지 된다는,,
right: 0; 을 준 게 빛을 발하는 순간은 언제일까? 요소를 중앙정렬할 때, wow div의 width 값을 20px로 바꾸고, 중앙에 기둥처럼 한 번 세워보자. 그리고 top 50% left 50%로 중앙정렬을 시도했을 때와 비교해보자
.wow {
position: absolute;
width: 20px;
top: 50%;
left: 50%;
height: 100%;
background-color: pink;
}
top 50% left 50% 으로 기둥처럼 중앙정렬을 시도했더니 이상하게 구현된 것을 볼 수 있다.
왜 이렇게 된걸까? top과 left의 기준은 우리가 생각하기 쉬운 기둥 전체가 아니라 저 사각 기둥의 왼쪽 상단 모서리를 기준으로 정렬이 된다. 즉 모서리만 기준으로 보면 정렬이 아주 잘 된것이다. 그러나 우리가 원하는 모양은 아니니까, 이걸 고쳐줄 필요가 있다.
.wow {
transform: translate(-50%, -50%);
}
위 속성을 추가 해주면 비로소 우리가 원하는 기둥을 세울 수 있다. 각 x와 y의 50% 만큼 back 해주는 것이다.
→ 이렇게 된 것이다.. 처음에 이거 배웠을 때 이해를 못해서 그냥 외워서 썼는데 이제는 진짜 완벽 이해!!!
‼️ 하지만 이것은 right 0을 줌으로써 세상 편안하게 해결할 수 있는 문제였다.
.wow {
position: absolute;
width: 20px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: pink;
}
top left에 0을 주고 right에 0을 줘서 부모 요소 너비 전체를 가용공간으로 설정했다. 그리고 bottom 0을 줘서 기둥을 길게 세워주었다. 그럼 여기서 중간에 기둥을 세우면 어떻게 해야될까???? 너무 간단하지
.wow {
margin: auto;
}
margin: auto; 값을 추가로 적어주면 된다..
+참고
.wow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.wow {
position: absolute;
inset: 0;
}top left right bottom을 0으로 매번 주지않고 단축속성인 inset: 0을 사용해 한 번에 해결해 줄 수 있다.
