[TIL] 220913
🧸 오늘 학습한 내용과 빈곳 채우기
id와 class의 차이
종찬님 bucketlist 과제 회고조 리뷰 후 궁금점
- 과제 링크: bucketlist
수정 전)
[HTML]
<ul class="contents">
<li class="contents-txt">Travel all around the world</li>
<li class="contents-txt special-txt">Learn a new language</li>
<li class="contents-txt">Try a profession in a different field</li>
<li class="contents-txt">Achieve your ideal weight</li>
<li class="contents-txt">Run a marathon</li>
</ul>[CSS]
.contents {
background-color: #EFEFEF;
/* display: flow-root; */
padding: 20px;
list-style: none;
}
.contents-txt {
margin: 15px;
padding: 10px;
border: 4px solid #BFBFBF;
background-color: white;
border-radius: 5px;
}
.special-txt {
color: #468FF7;
border: 4px solid #468FF7;
}여기 부분에서 오는 의문들 ..
- 위의 코드에서 나는 왜 display: flow-root;를 주었을까? contents-txt의 패딩/마진에서 해결이 된 부분인 것 같은데...
-> 마크업을 먼저 하고 스타일을 쓰다 보니까 주석 처리해둔 display: flow-root; 로 먼저 마진 병합을 없애고 contents-txt 부분에서 padding/margin 상하좌우에 주어서 간격을 조정하는 방법을 써서 그런 것 같음
- 그렇다면 display: flow-root; 를 지워도 되는 것일까?
-> display: flow-root; 는 부모 자식간의 마진병합 현상을 없애주는 것이라 넣지 않아도 됨!
(padding과 border가 없을경우 부모-자식간의 마진병합이 생기는데 이때 display: flow-root; 를 사용하면 해결)
💡 질문:
1) 하단에만 마진을 줬다가 삭제하는 방법
(margin-bottom 주고 마지막 리스트에서 margin-bottom: 0;)
2) 상하좌우에 마진을 줘서 간격을 조절하는 방법 (내가 한 방법)
모두 마진 병합과는 상관이 없을까?
답변:
마진병합을 알고, 해당 15px로 일정하게 여백이 발생한다면 주신 코드 처럼 사용해도 될것 같음!
만약 의도했던 방식이 아니면.contents li:not(:first-child){ margin-top:15px }형태로 주는 것도 좋을 듯하다!
💡 :not(selector) 용법
선택된 요소가 아닌 다른 모든 요소를 선택
.wrapper {
width: 400px;
margin: 100px auto;
box-shadow: 2px 2px 7px #a5a5a5;
border-radius: 30px;
overflow: hidden;
}- 이 부분 border-radius 안 먹혀서 헤더/콘텐츠에 각각 border-radius 줬었는데 overflow: hidden; 하니 깔끔하게 해결되어버림 왜 그런 거지?
💡 overflow: hidden;
- 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리
- header&contents(자식) 부분이 부모 요소를 덮어 overflow 된 것이므로 hidden 처리로 잘라내면 됨!
body에 background 주었을 때
- Q. 왜 body 영역이 아닌 모든 캔버스 영역에 백그라운드가 깔리게 되는 걸까?
A. background 특별 취급
body 영역 너버 캔버스 영역까지 보내겠다하는 컨셉(ㅋㅋ)
-
만약 html에 background가 깔리게 된다면 html의 background가 캔버스 영역(저 너머의 영역)에 보내지게 되고 body는 일반 요소가 되어 height 만큼의 영역만 차지하게 됨
-
background-attatchment: fixed; 하면 기준이 뷰포트가 됨(더이상 body/html 기준이 아님)
🚀 회고
연휴 마치고 첫 날이라 그런지 뭔가 집중이 잘 안 됐음. 강사님 말씀대로 아는 거 50% 모르는 거 50%라 집중력도 많이 흐려져서 정신차리느라 힘들었다. 이번 과제 하면서 몰랐던 것도 많이 알고 헷갈렸던 부분도 다시 찾아 볼 수 있어서 좋았던 것 같음! 아직 갈길이 멀다는 생각. 마진 겹침 현상에 대해서는 아직도 아리까리한 상태인 것 같아서 주말에 한번 정리해야겠음.... ㅠㅠ 그리고 나도 영역 나눠서 처리하는 습관(유린님처럼 리셋/레이아웃/스타일)을 기르면 좋을 것 같음 코드 볼 때 내가 왜 이렇게 했을까? 하는 부분이 종종 생긴다. 그래도 overflow:hidden;과 background 너머 현상은 이제 제대로 이해한 것 같음! 그리고 과제를 계속 수정하게 돼서 앞으로 어제처럼 링크 올릴 땐 수정 전 코드도 같이 올려두면 좋을 것 같음.(어차피 깃헙에 올리긴 하지만...😅)
