홍장군의 기록

0. 오늘의 배울 것 grid 는 2차원적 배치 방식이다!! 앞서 flex box는 1차원적 배치 방식이라고 말했다. container 박스 안에, 가로든 세로든 한 방향으로 일렬 정렬하기 때문이다. 이 대신 바둑판처럼, 즉 2차원배열처럼 요소를 배치하려면 부모 박스에 grid 속성을 주어야 한다. 이번 포스팅에서는 그리드를 어떻게 활용할지 알아보자. 1. 그리드, Grid? flex는 1차원적으로 한 방향으로 요소를 배치한다면, grid는 2차원적으로 바둑판처럼 요소를 배치한다. 이 때 각 칸을 나누는 줄을 그리드 라인이라 한다. 그리고 각 칸을 그리드 셀이라고 한다. 2. 그리드 나누기 먼저 요소를 담을 컨테이너를 grid 형식으로 만들어보자. 아래 코드를 예시로 들면, 2행 3열로 나누고 세로를 5..

(css는 사실 cascading style sheets의 줄임말이다. cascading은 '위에서 아래로 흐르는' 이라는 뜻인데, 왜 이런 뜻이 있을지 알아보자.) 0. 오늘의 배울 것 css의 선택자를 잘 써먹어야 코드가 예쁘다!! css를 작성할 때엔, 스타일을 지정할 선택자를 고르고 그 선택자에 스타일을 선언하면 된다. 그런데 사실, 선택자는 단순히 태그나 class, id 이름만 적는 곳이 아니다! class 이름을 여러 개 섞을 수도 있고, class 내부 하위 태그를 선택할 수도 있다. 선택자를 쓰는 법을 알아보자. css에도 상속이 있다. css도 프로그래밍 언어처럼 스타일을 상속한다! 부모 태그에 스타일을 주면, 그의 자식 태그에게도 그 스타일이 상속된다. 그런데 만약 하나의 속성이 여러..

(css를 배울 때 가장 신기했던건 class나 id 이름으로 하이픈을 넣을 수 있단 것이었다...) 0. css의 기본 개념. html이 너무 길어지면 각 태그 하나하나에 style을 넣는 건 너무 번거로워진다. 때문에 각 태그들에게 어떤 style을 적용해줄지 규칙을 세워야 한다. 바로 이렇게 h1에 대한 규칙을 세우듯 태그들의 규칙을 세워 style을 적용하는 게 좋다. 즉, css를 개발한다는 것은 css 규칙을 만든다는 것이다. 1. css 규칙 html 의 내용과 그에 대한 css를 분리하는 것을 관심사의 분리, seperation of concern 이라고 한다. 관심사 분리의 장점: 내용과 스타일을 고치기 편하다. css 규칙은 선택자와 선언의 짝으로 이루어졌다. 선택자란 어떤 요소에 규칙..