코드스테이츠 SEB 12일차 TIL - CSS 중급, 웹 앱 화면 설계

오늘은 CSS 중급으로 들어섰다. 처음 CSS를 시작할 때만 해도 문법도 어렵지 않게 쉽게 할 수 있겠다고 생각했다. 그 때의 나는 바보다...

이 짤의 의미를 이제서야 이해해버렸다. CSS는 아주 극악무도하다.

---

셀렉터

셀렉터란 CSS에서 HTML의 태그, id, class 등을 스타일링 하기 위해서 그에 해당되는 태그, id, class 등의 값을 지정하는 것을 일컫는다. 셀렉터는 다양한 종유가 있는데 그 부분은 아래에 정리해뒀다. 그 중에서도 개념적으로 이해가 필요한 것이 후손 셀렉터와 자식 셀렉터가 있다. 후손 셀렉터는 특정 요소의 자신, 손자 그리고 그 이후의 후손을 모두 포함한다. 자식 셀렉터는 특정 요소의 직계 자식만 포함되며 그 이후의 후손들은 포함되지 않는다.

셀렉터 정리

셀렉터
직접적으로 대상이 HTML의 태그를 지정한다.

h1 {}
div {}

전체 셀렉터
HTML문서 전체의 태그를 지정한다.

* {}

태그 셀렉터
쉼표로 구분하여 복수의 태그를 지정할 수 있다.

section, h1{}

id 셀렉터

id를 기준으로 지정한다.

#only {}

class 셀렉터

클래스를 기준으로 지정한다.

.widhet{}
.center{}

attribute 셀렉터

태그에 적용된 속성 값을 기준으로 지정한다.

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

후손 셀렉터

특정 요소의 후손을 모두 포함하여 지정

header h1 {}

자식 셀렉터

특정 요소의 직계 자식만 지정

header > p {}

인접 형제 셀렉터

+를 기준으로 +앞의 요소 뒤에 바로 있는 +이후의 요소를 지정

section + p {}

형제 셀렉터

~를 기준으로 ~앞의 요소와 형제격인 ~뒤의 요소 모두를 지정

section ~ p {}

가상 클래스

특정 태그 요소에 커서를 올리거나 혹은 포커싱 상태를 지정

a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { }

요소 상태 셀렉터

체크박스가 체크된 것과 같은 상태를 지정

input:checked + span { }
input:enabled + span { }
input:disabled + span { }

구조 가상 클래스 셀렉터

몇 번째 자식요소, 첫번째 혹은 마지막 자식을 지정할 수 있는 셀렉터

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 셀렉터

지정하는 것과 반대되는 상태의 요소를 지정

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 셀렉터

정합성 확인 조건에 맞는 요소를 지정

input[type="text"]:valid { }
input[type="text"]:invalid { }

---

flex 박스 속성

flex는 부모 객체에 display : flex CSS 값을 부여하여 적용할 수 있다. 그리고 flex의 적용이 이루어지면서 자식 객체의 레이아웃이 변형되는데 이 경우에 자식 객체에 대하여 추가적인 flex 속성에 따른 값을 부여할 수 있다. 아래는 그에 대한 내용이다.

[flex 속성에 적용되는 세 가지 값의 종류]

flex : <grow> <shrink> <basis>

/* ↓별도 설정없이 없는 경우에 기본 값 */
flex : 0 1 auto

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

(위 코드와 같이 개별로 입력도 가능하다)

[flex 속성 적용]
display: flex 는 부모 요소에게 적용.
flex: <grow> <shrink> <basis> 는 부모 요소에 속해있는 자식 요소에게 적용

grow

자식 박스의 길이를 조정
적용하는 속성 값은 비율을 의미함( 1 = 100%)
적용 내용
value<설정 값> / n<요소 수> = %
예시
3개 객체에 1을 적용할 경우
1 / 3 = 33%

shrink

grow와 반대로 설정한 비율만큼 박스 크기가 축소
가급적 flex-grow와 flex-shrink를 함께 사용하는 일은 추천되지 않음

basis

자식박스가 flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기
flex-grow 가 0일 때, basis 크기를 지정하면 그 크기가 유지됨
width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선
콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않는다.
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있다.

---

flex 콘텐츠 정렬 방법

flex 속성을 가진 객체 내에 있는 콘텐츠를 정렬시키는 방법에 대해서 아래 내용과 같이 정리하였다.

[flex 정렬 속성]

justify-content : 콘텐츠 수평 정렬

align-items : 콘텐츠 수직 정렬

[flex 정렬 속성의 값]

 

flex-start : 아이템들을 시작점으로 정렬한다.(기본 값)

flex-end : 아이템들을 끝점으로 정렬한다.

center : 아이템들을 가운데로 정렬한다.

space-between : 아이템들의 사이(between)에 균일한 간격을 만들어 준다.

 

stretch : 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어난다.(기본 값)

flex-start: 아이템들을 시작점으로 정렬한다.

flex-end : 아이템들을 끝점으로 정렬한다.

center : 아이템들을 가운데로 정렬한다.

---

웹 앱 화면 설계

오늘 웹 앱 화면 설계까지 학습하게 되면서 알게된 관련 용어를 아래와 같이 정리해보았다.

와이어프레임(Wireframe)
웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임
레이아웃과 제품의 구조를 보여주는 용도

목업(Mock-up)
웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML문서로 작성. 예를 들어 트윗 작성자, 트윗 내용, 작성한 날짜, 팔로우 버튼 등을 HTML 문서 내에 하드코딩하는 방식

하드코딩
모든 변수를 HTML문서에 하나씩 직접 입력하는 작업