반응형
Responsive width with finitely filling the parent, and I wanna use
display: flex; to align elements. display: flex; 로 정렬하고 싶은데, 코딩을 해보면서 꽤 헤맸던 부분이라 정리할 겸 포스팅.
## PH
- 2024-07-30
<div class="sub"> 이 추가된 걸 볼 수 있는데... CSS 는 다음과 같음.
```[.lang-css]
header {
height: 70px;
position: sticky;
z-index: 100;
top: 0;
background-color: white;
border-width: 0 0 1px;
border-color: var(--border-color);
}
header, main, footer {
max-width: 1920px; /* max-width 를 주고 margin:0 auto 로 중앙 정렬. */
margin: 0 auto;
display: flex; /* Sub elements 들에 대한 정렬을 위해 flex 를 씀. */
align-items: center;
}
* {
box-sizing: border-box;
}
.sub {
flex-grow: 1; /* 이게 핵심인데, 이 값은 default 0 이기 때문에 div.sub 의 width 가 fit-content 처럼 되어버려서 전체 width 를 차지하지 못함. 이 값을 1로 줘서 전체 width 를 채우도록 강요. */
margin: 0 12.5rem;
}
header .sub-header {
display: flex; /* 위의 flex-grow 설정으로 안쪽 elements 들의 정렬이 깔끔하게 이어질 수 있음. */
justify-content: space-between;
align-items: center;
}
```/
## RRA
- 코드잇 과제 - 판다마켓 by kipid, 2024-07-30
반응형
'[IT|Programming] > HTML related' 카테고리의 다른 글
| week2 위클리 페이퍼 (브라우저가 어떻게 동작하는지 설명) (2) | 2024.08.06 |
|---|---|
| Pattern Replace 를 이용한 http, https 링크 (그림, 동영상, 유튜브, 인스타그램, 틱톡, Soundcloud, 카카오TV, 네이버TV 등) 처리 | URI (Unique Resource Identifier) Rendering (12) | 2024.08.04 |
| Learning Node.js (0) | 2024.08.04 |
| Vertical center align by CSS in HTML (0) | 2024.05.05 |
| HTML CSS composes, and pseudo-element :after, :active:after, and transition (0) | 2024.04.23 |
| 순수한 완전 쉬운 편집 (SEE: Super Easy Edit) 문서K (Markdown: 마크다운): 사용 설명서. (1) | 2024.04.23 |
| HTML a href tag with onclick return (2) | 2024.04.07 |
http/https 링크및 수식 (\ [ Outline 수식 \ ],\ ( inline 수식 \ )::\이후 띄어쓰기 없이) 을 넣으실 수 있습니다. 또한 code 는```시작,```/마지막으로 감싸 주시면 pretty-printed 되어서 나타납니다.```[.lang-js.scrollable.no-linenums]같이 언어를 선택해 주실수도 있고, 긴 수식의 경우 scroll bar 가 생기게 만드실 수도 있습니다. .no-linenums 로 line numbering 을 없앨수도 있습니다.댓글 입력 후 rendering 된 형태를 보시려면, Handle CmtZ (단축키: N) 버튼을 눌러주세요. 오른쪽 아래 Floating Keys 에 있습니다. 아니면 댓글 젤 아래에 버튼이 있습니다.