CSS | CSS 셀렉터와 레이아웃

SURI·2021년 11월 23일

1. 개념

1.1 HTML 문서로 레이아웃 작성

원하는 레이아웃을 와이어 프레임으로 그려내고 HTML으로 구성하는 것이 프론트엔드 개발자의 소양이다.

큰 틀에서 영역을 나눈다.
각 영역을 태그로 표현한다.
id와 class를 목적에 맞게 사용해 태그에 이름을 붙인다.
- id는 전체 문서를 통틀어 고유한 이름을 붙이고 싶을 때
- class는 반복되는 영역을 유형별로 분류할 때
선택자 표기법으로 적어본다.

와이어 프레임 : 화면 단위의 레이아웃을 설계하는 방법
목업 : 실물과 비슷하게 시제품 작업을 하는 것. 기능 작동은 하지 않는 빈 깡통과 같다. 퍼블리셔가 하는 게 목업까지다. 하지만 최근에는 디자이너가 목업을 넘어 프로토타입의 간단한 기능까지 구현하고 있다. 앗.
프로토타입 : 처음부터 종료까지 핵심 동작이 기능하게 구현된 앱. 목업 + 핵심기능
하드코딩 : 데이터를 서버에 연결하지 않고 코드 내부에 직접 입력하는 것. e.g. 트위틀러 스프린트

<div id="container">
  <div class="col w30">
    <div class="image">그림1</div>
    <div class="image">그림2</div>
    <div class="image">그림3</div>
    <div class="image">그림4</div>
  </div>
  <div class="col w30">
    <div class="row h30">기본</div>
    <div class="row h30">특기</div>
    <div class="row h40">취미</div>
  </div>
  <div class="col w40">
    <div class="row h60">회사</div>
    <div class="row h40">집</div>
  </div>
</div>

수직 -> 수평
작은 영역들을 한 번 더 크게 감싸준다.
반복되는 영역은 같은 클래스 이름으로 묶어주었다.
- col(열), row(행)
클래스 이름에 구현되는 내용을 부여했다.

Atomic CSS

CSS를 작성할 때, 구현에 맞게 클래스 이름을 지정해주는 방법론이다.

레이아웃 리셋

HTML 문서가 갖는 스타일의 디폴트 값이 있는데, 레이아웃을 짜는 데 방해가 되기도 한다. 따라서 스타일 초기화를 위한 여러 라이브러리가 있지만 굳이 사용할 필요는 없다. 기본 스타일링 제거로도 충분하다.

box-sizing
body 태그의 margin과 padding
초기화를 항상 한다고 생각하지는 않고, 필요에 따라 하게 된다. 브라우저마다 html 태그에 적용되는 디폴트 값이 다르기 때문에 초기화가 필요한 경우가 있다.

* reference site : mdn, http://necolas.github.io/normalize.css/

1.2 CSS 셀렉터

section, h1 : 복수 선택
section h1 : section의 후손 엘리먼트 중 h1 엘리먼트를 선택
.row#comments : .row 클래스와 comments 아이디를 둘 다 가진 엘리먼트 (공백주의)
.row #comments : .row 클래스 안에 comments 아이디를 가진 엘리먼트
section > div : section의 자식 엘리먼트 중에 div 태그. 순서는 상관없다.
article + p : article과 인접한 형제 엘리먼트 p. 바로 인접해 있지 못하면 읽지 못하는 걸 확인했다. ~ 로 바꾸니 읽어냈다. HTML 문서는 위에서부터 불러오기 때문에 위에 인접해 있으면 읽지 못한다.
section ~ p : 동일한 위치에 있는 p태그를 가져온다. 인접한 형제 엘리먼트 p를 모두 가져온다. 이게 위에 보다 더 넓은 개념일 것 같다.

자식 셀렉터 vs 후손 셀렉터

자식 셀렉터는 자신의 바로 밑에 있는 자식만 선택하는 셀렉터이고, 후손 셀렉터는 자식, 손자, 그 아래 후손을 모두 선택하는 셀렉터다.

<div class="container">     
  <h2> to-do-list </h2>     
  <ul>         
    <li>list 1</li>         
    <li>list 2</li>         
    <li>list 3</li>     
  </ul> 
</div>

div 태그의 자식은 h2와 ul이고 li는 후손에 해당한다.
.container > h2 : 자식 셀렉터
.container li : 후손 셀렉터

1.3 Flexbox

flexbox를 통해 박스를 유연하게 늘리거나 줄여 레이아웃을 만들어갈 수 있다.

display: flex

부모 박스 요소에 이 속성을 추가하면 자식 요소는 왼쪽부터 차례대로 배치된다.
- 기본값이 row로 되어 있어서 이 속성을 적으면 가로로 줄을 서는 걸 확인할 수 있다.
- 이 속성은 부모 요소에 적용해야 한다.

flex-direction: row
flex-dirextion: column

박스가 분할되는 방향을 설정해줄 수 있다. 기본값은 수평(row)이지만 수직(column)으로 변경할 수도 있다.

flex : <grow> <shrink> <basis>

grow와 shrink는 비율에 대한 값이다.
- 두 속성은 상충하는 개념이기 때문에 동시에 사용하지 않는다.
세 속성의 기본 값은 flex : 0 1 auto 이다.
세 속성을 따로 입력하는 것도 가능하다. (margin, padding 처럼)

flex-grow

다른 자식 박스 요소들과의 비율에 따라 박스가 늘어난다.(해당 grow 값/총 grow 값)
0보다 큰 값을 자식 박스들이 모두 동일하게 나눠 갖는다면 동일한 비율로 늘어난다.
- 크롬 개발자 도구로 확인을 하니 실제 크기가 같지는 않다. 하지만 flex-basis를 0%로 하니 동일해지는 걸 확인할 수 있었다.

flex-basis

자식 박스가 앞에 두 속성에 의해 늘어나거나 줄어들기 전 가지는 기본 크기이다.
flex-grow 속성 값이 0인 경우에만 값이 유지된다.
width와 동시에 적용하는 경우 flex-basis가 우선한다.
- 콘텐츠가 많아 자식 박스가 넘치는 경우 max-width를 쓸 수 있다.

justify-content

main axis를 기준으로 정렬한다.
flex-start flex-end space-between center

align-items

cross axis를 기준으로 정렬한다.
flex-start flex-end stretch center

2. 에러로그

모든 엘리먼트를 선택하는 셀렉터와 html 태그만 선택하는 셀렉터와 헷갈렸다.

*{}가 작용하는 범위를 직접 그린다고 했을 때, 내가 상상한 것과 달랐다. 모든 박스를 하나하나 다 그렸어야 했다.

min-height로 최소 높이를 지정해준다.

twittler mock-up 스프린트에서 놓친 부분

float textarea
반복되는 파트는 복사하기 전에 확인을 하고 복사를 하는 게 좋다.
rem 단위 사용해보기
전체 태그에 box-sizing: border-box를 지정한다.
form, section 태그를 활용해 semantic 하게 html 문서를 작성해보자.
- form 태그를 제대로 이해하지 못하면 의도하지 않은 상황이 나올 수 있다.
댓글을 ul-li 태그를 활용해 담는다.
- dot이 생기는 문제는 list-style : none; 이라는 속성을 추가해서 지워줄 수 있었다.