simple html, css layout 흐름

- 보통 배경색은 가장 바깥 태그에 적용하고, 그 내부 div 에 container class, 그 내부 div 에 display: flex 하고 구조 잡으면서 css 를 적용한다

    <section class="bg-dark">
      <div class="container">
        <div class="split">
        ........

 

- 배경색, 폰트 같은 건 변수로 관리되도록 일반 css 에서도 --clr 이런 식으로 선언한다. :root 선택자를 이용해 선언한다 (?) 그러면 css 파일 내에서 var() 로 접근 가능하다

:root {
  --clr-primary-200: #f3eed9;
  --clr-primary-400: #824936;

  --clr-neutral-100: #fff;
  --clr-neutral-900: #222c2a;

  --ff-primary: "Roboto", sans-serif;
  --ff-accent: "Playfair Display", serif;
}

h3 {
  color: var(--clr-primary-400);
  font-family: var(--ff-accent);
}

 

- utility class 로 class 이름 1개 당 하나의 기능만 부여하여 css 를 만들 수 있다 ( 배경색, 글자 중앙배치 등 )

.text-center {
  text-align: center;
}

.bg-light {
  background-color: var(--clr-primary-200);
}

.bg-primary {
  color: var(--clr-neutral-100);
  background-color: var(--clr-primary-400);
}

 

- body 태그 내부에 font 관련 css 설정을 기본적으로 해주고, 필요하다면 세부 태그별로 덮어씌운다

body {
  font-family: var(--ff-primary);
  font-weight: 400;
  font-size: 1.3125rem; /* 21px */
  line-height: 1.6;
}

 

- display: flex; 넣는 순간, 태그 배치가 바뀐다. desktop 화면 기준에서는 flex-direction: row; 으로 default 상태 그대로 이용해주고, mobile 화면에서는 flex-direction: column; 로 배치하여 주는 것이 자주 사용된다

- 그런데 기본 .split 에는 flex-direction: column; (mobile 기준) 를 써주고, desktop 화면 기준은 media query min width 를 적용해서 내부에 .split 을 정의한다

.split {
  display: flex;
  flex-direction: column;
}

@media (min-width: 40em) {
  .split {
    flex-direction: row;
  }
  ...
}

 

- desktop 화면일 때 div 태그 내부에 img 태그를 배치했는데, 크기가 어긋날 수 있다. 동일한 크기로 배치하고 싶을 때 flex-basis 를 활용한다. img 태그를 계속 추가해 확장하더라도 동일한 width 를 갖게 하려면 속성을 100% 로 설정한다. 선택자는 .split 내부 모든 자식 태그 > everything becomes equal width

@media (min-width: 40em) {
  .split > * {
    flex-basis: 100%;
  }
  ...
}

 

- 전체 width 를 잡아줄 때 container class 를 많이 이용하는데, 이 때 margin-inline 태그를 사용하면 left, right margin 에만 적용된다. width 는 전체 width 와 max-width 를 설정해주면 된다. css 의 새로운 문법 min() 을 사용했다

.container {
  margin-inline: auto; /* left and right margins only */
  width: min(90%, 70.5rem); /* width 90%, max-width: 70.5rem */
}

 

- 전체 .container 에 적용되는 것, 전체 container 보다 좀 더 specific 한 적용이 필요한 것은 .container--xxx 라고 쓴다

*max-width 만 바꿔준 거였는데 specific class 를 만들어서 class 를 2개 적용했다

- 아래 내용은 넓은 화면 header 에서 줄글을 띄어쓰기할 때, <br> 이 아니라 max-width 를 이용해 반영했다

.container--narrow {
  max-width: 35rem;
}

 

do the base styling first, get everything working and then start adding in the complexity as you need to

- 먼저 html 태그로 전체 layout 을 완성해주고, 조금 더 디테일한 조정이 필요할 때 media query 를 사용하는 것이다

- 처음 디자인을 보고, 어 컬럼 2개 / 컬럼 2개 전부 컬럼 2개니까 같은 class 를 써야겠다 > 이런 식으로 큰 그림을 그리고 점점 좁히면서 complexity 를 부여한다

 

++ img 태그가 어긋나서 

img overflowing out the side and they're actually causing some side scrolling which is not ideal > 이게 뭐였지? 다시듣기

img {
  display: block; /* it's working at small screens without very much work */
  max-width: 100%; /* images will not stretch cause it's a max width of 100% */
}

 

++ HTML 구조를 잡을 때

- display: flex 할 때 column 이 계속 2개, 3개로 늘어날 수 있다는 걸 고려한다

- 내부 태그가 현재는 하나여도, 확장에 대응하기 쉽게 div 로 감싼다

 

깃허브: https://github.com/salybu/html-css-layout/tree/master/responsive-page.v1