5/27 Dev.Feedback(CSS)

셀렉터 규칙

* { } // - 전체 셀렉터
tag { } // - tag 셀렉터 ** tag 는 html의 tag를 직접 불러오는 것
tag, tag { } //- ,를 통해 다중 선택도 가능하다.
#ID { } // - ID 셀렉터 ** 유일한 ID 값!
.class { } // - class 셀렉터
ancestor descendants { }//- 후손 셀렉터 (조상과 후손 사이에 공백을 두는 것이 point)
parent > child { } //- 자식 셀렉터 (>)
brother + brother { } //- 가장 인접한 형제 요소를 부르는 셀렉터
brother ~ brotehr { } //- 모든 형제를 선택하는 셀렉터

기초로 생각해야 하는 셀렉터들은 위를 참고하면 된다. 이건 가장 기초적이고 기본적인 것이므로 꼭 기억해둬야 한다.

밑에 것들은 응용된 것들 시간을 들여 틈틈히 정리해야 할 부분들이다.

a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { } // - 가상 클래스

input:checked + span { }
input:enabled + span { }
input:disabled + span { } // - 요소 상태 클래스

p:first-child { } //- p엘리먼트 중 첫 번째 자식요소만 선택
ul > li:last-child { } 
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { } //- section의 자식 중 홀수 번째의 요소만 선택
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { } //- 자식엘리먼트인 div 중 마지막에서 2번째인 요소만 선택
section > p:nth-last-child(2n + 1) { }
p:first-of-type { } // - p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택. 
(first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택)//
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 { } // - 정합성 확인 셀렉터

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { } //- attribute 셀렉터 이건 참고만 해도 괜찮다.

Flexbox

1. flex-direction

flex-direction은 부모 요소에 적용해주어야 한다.

2가지 경우가 있다. row, column;

일단 default는 row값으로 (가로로 정렬) 정해져있다.

column을 입력하면, 세로로 정렬이 된다.

flex-direction에 따라 main axis , cross axis의 기준이 변경된다. row 일때는 가로가 main axis, column일때는 세로가 main axis

위의 축은 justify-content와 align-items를 적용할 때, 기준이 되는데

justify-content는 main axis를 기준으로 하여 적용이되고 align-items는 cross axis를 기준으로 하여 적용이 된다.

 

2. grow(팽창 지수), shrink(수축 지수), basis(기본 크기)

자식 요소에는 flex 를 적용해줄 수 있다.

flex의 default는 0, 1, auto 인데

flex: 0, 1, auto;

이 세가지 요소는 기본 크기를 바탕으로 하여 줄이거나 늘리거나 할 수 있는 것이다.

물론 각각 나눠서 정리할 수도 있지만, 이 기본을 유지하며 적용하는 연습이 필요할 것 같다.

grow와 shrink는 따로 단위가 존재하지 않고, 비율에 따라 달라진다.

*flex grow

만일 부모 박스 안에 n개의 자식 박스가 있다고 가정해보면, 각 자식 박스가 갖는 grow값의 총 합이 n이라면, grow 속성의 값을 1로 설정하는 것은 1/n 가로 또는 세로길이를 적용한다는 의미이고, grow 속성의 값을 2로 지정하면, 2/n의 길이를 의미한다.

 

<div id="outer">
  <div class="box target">.box.target</div>
  <div class="box">.box</div>
  <div class="box">.box</div>
</div>

실제 예시를 들어 설명해보면,

#outer {
  display: flex;
  border: 1px dotted red;
  padding: 10px;
}

.box {
  border: 1px solid green;
  padding: 10px;
  flex: 1 1 auto;
}

.target {
  flex: 1 1 auto;
}

이렇게 설정을 해주면, 3개의 박스에 각자 1의 비율을 제공해주어 각각의 박스가 1/3씩의 넓이를 가지게 된다.

#outer {
  display: flex;
  border: 1px dotted red;
  padding: 10px;
}

.box {
  border: 1px solid green;
  padding: 10px;
  flex: 1 1 auto;
}

.target {
  flex: 5 1 auto;
}

이번엔 타겟 박스 grow에 5를 설정을 해주었다. 그러면 target 클래스를 가진 박스에는 5만큼의 비율이 그리고 나머지 박스에는 각각 1만큼의 비율이 적용된다. 즉 5+1+1의 비율대로 적용이 되는 것인데 target 클래스를 가진 박스는 5/7만큼의 크기를 그리고 나머지 박스는 각각 1/7만큼의 크기를 갖게 되는 것이다.

즉 각 클래스가 박스인 요소에 준 grow를 전부 더해준 후 그리고 각 그 전체 값에 각각에 넣어준 값만큼의 비율을 가진다고 생각하면 되는 것이다.

 

*flex-shrink

shrink는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아진다. 그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 지양해야 한다. 그 이유는 flex-shrink 속성은 width나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문이다.

 

flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방하다.

 

 

*flex-basis

flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지된다.

diplay 속성에 flex가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라 달라지게 된다.

basis로 설정된 크기가 항상 유지되지 않는다.

flex-grow 속성의 값이 1 이상인 경우, flex-basis 속성에 적용한 값보다 커질 수 있다.

 

***실제 레이아웃을 구현하면서 막히는 경우에는, 다음의 원리를 참고할 수 있다.

• width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선 적용
• 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않는다.
• (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있다.

원리적으로 이렇게 써야하는 것을 참고는 할 수 있겠지만, 아직 머리로 이해가 안된다. 어떻게 해야 적용해볼 수 있을까?

 

콘텐츠 수평 정렬 (justify-content)

부모 박스에 justify-content 속성을 적용하면, 부모 박스의 main axis를 기준으로 자식 박스를 정렬할 수 있다.

• flex-start - default 값 왼쪽으로 정렬
• flex-end - 우측으로 정렬
• center - 중앙으로 정렬
• space-between - 중앙을 기준으로 컨텐츠들을 양쪽으로 동일한 비율로 하여 정렬해줌

콘텐츠 수직 정렬 (align-items)

부모 박스에 align-items 속성을 적용하면, 부모 박스의 cross axis를 기준으로 하여 자식 박스를 정렬할 수 있다. 

• flex-start - default 값 위쪽에 정렬
• flex-end - 각 박스에 정해진 높이에서 아래쪽 정렬
• center - 각 박스에 정해진 높이에서 중앙으로 정렬
• stretch - contents의 크기와 상관없이 모든 박스를 가득 채움