210803 CodeStates 12일차

공윤배·2021년 8월 4일

210803 CodeStates 12일차

어제는 10일차에 배운 자바스크립트의 객체와 배열에 관한 코플릿만 하루종일 풀었다.
오늘은 css의 좀더 다양한 선택자(selector)와 flexbox를 이용해 레이아웃을 잡는법, 그리고 html과 css만을 이용해 기능적인 부분은 제외하고 외형만 똑같이 트위터의 클론을 만들어보았다.
밑의 내용은 코드스테이츠의 자료와 PoiemaWeb의 CSS3-셀렉터를 보며 공부한 내용을 정리한 것이다.

CSS의 다양한 선택자

선택자[어트리뷰트]
지정된 어트리뷰트를 갖는 모든 요소를 선택한다.

a[target] 
a태그(anchor)중 target어트리뷰트를 갖는 모든 요소 선택

선택자[어트리뷰트="값"]
지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택한다.

a[target="_blank"]
a태그중 target어트리뷰트의 값으로 _blank를 갖는 모든요소 선택

이후의 선택자를 이해하기 위해서는 HTML요소들간의 관계에 대해 알아야한다.

상위요소: 해당태그를 포함하는 모든 요소(들)을 의미한다.
하위요소: 해당태그가 포함하는 모든 요소(들)을 의미한다.
부모요소: 해당태그의 바로 위의 상위요소를 의미한다.
자식요소: 해당태그의 바로 밑의 하위요소(들)을 의미한다.
형제요소: 해당태그와 같은 부모요소를 갖는 요소(들)을 의미한다.

  <div>
    <h1>h1 tag</h1>
    <ul>
      <li>li tag</li>
    </ul>
    <span>span tag</span>
  </div>

다음과 같이 HTML요소들이 있다면 그림으로 이렇게 표현될 수 있다.

표로 각 요소들의 상위요소, 하위요소, 부모요소, 자식요소, 형제요소를 정리하면 다음과 같다.

	상위요소	하위요소	부모요소	자식요소	형제요소
div	X	h1,ul,span,li	X	h1,ul,span	X
h1	div	X	div	X	ul,span
ul	div	li	div	li	h1,span
span	div	X	div	X	h1,ul
li	div,ul	X	ul	X	X

선택자A 선택자B
선택자A의 하위요소중 선택자B와 일치하는 모든요소를 선택한다.

선택자A > 선택자B
선택자A의 자식요소중 선택자B와 일치하는 모든요소를 선택한다.

선택자A +선택자B
선택자A의 형제요소중 선택자A의 바로뒤에 위치하는 선택자B요소를 선택한다. 선택자A의 바로뒤의 요소와 선택자B요소가 다르다면 아무런 요소도 선택되지 않는다.

선택자A ~ 선택자B
선택자A의 형제요소중 선택자A 뒤에 위치하는 모든 선택자B요소를 선택한다.

가상클래스 선택자
가상클래스는 요소의 특정상태에 따라 스타일을 정의할 때 사용된다.
특정상태란 마우스가 올라와 있을때, 링크를 방문했을때 혹은 아직 방문하지 않았을때 등등 CSS표준에 의해 정의된 특정상태와 그에 대응하는 키워드가 있다.

선택자:link
선택자가 방문하지 않은 링크일때

선택자:visited
선택자가 방문한 링크일때

link와 visited 가상클래스는 주로 <a>에 많이 사용된다.

a:link{
  color:red;
}
a:visited{
  color:blue;
}

위와같이 CSS를 작성하게되면 a태그중 방문하지 않은 링크는 모두 글자색이 빨간색이되고 방문했던 링크는 모두 글자색이 파란색이 된다.

선택자:hover
선택자의 요소에 마우스가 올라와 있을때

button{
  background-color: green;
}
button:hover{
  background-color: orange;
}

위와같이 CSS를 작성하게 되면 모든 버튼은 평소엔 배경색이 초록색이었다가 마우스가 올라가게 되면 주황색으로 배경색이 바뀌게된다.

선택자:first-child
선택자에 해당되는 모든 요소들 중 첫번째 요소를 선택한다.

선택자:last-child
선택자에 해당되는 모든 요소들 중 마지막 요소를 선택한다.

선택자:nth-child(n), 선택자:nth-last-child(n)
뒤의 괄호 안에는 자연수 혹은 n을 이용한 수식이 들어가게된다.
괄호안에 자연수가 들어갈 경우, 선택자에 해당되는 모든 요소들 중에 숫자번때의 요소 하나만을 선택하게된다.
괄호안에 n을 이용한 수식이 들어갈 경우, 수식으로 수열을 생성해 수열의 모든 숫자번째 요소들을 선택한다.
nth-child는 앞에서부터 숫자번째 요소를 선택하고, nth-last-child는 뒤에서부터 숫자번째 요소를 선택한다.

span:nth-child(3)
모든 span요소들 중에서 앞에서 3번째 요소를 선택한다.

span:nth-last-child(3n+1)
모든 span요소들 중에서 뒤에서 1번째, 4번째, 7번째,... 요소들을 선택한다.

Flex box를 이용한 레이아웃

flex는 '잘 구부러지는, 유연한'이라는 의미를 갖는 영단어이다.
flex의 의미와 비슷하게 flex box로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여서 레이아웃을 잡는 방법이다.

레이아웃이란?
문자,그림,사진 등을 지면위에 시각적 효과와 사용 목적을 고려하여 구성, 배열하는 일 또는 기술이다.
우리는 HTML요소들을 웹페이지에 구성,배열해야한다.

부모박스요소의 display속성에 flex라는 값을 할당하면 자식요소들은 flex요소가 되어 왼쪽부터 오른쪽으로 차례로 정렬된다.

//HTML
<div id="container">
  <div class="inner A">AAAAA</div>
  <div class="inner B">BBBBB</div>
  <div class="inner C">CCCCC</div>
  <div class="inner D">DDDDD</div>
</div>

//CSS
.A{
  background-color:red;
}

.B{
  background-color:yellow;
}

.C{
  background-color:green;
}

.D{
  background-color:blue;
}

위와 같은 코드를 작성하면 아래와 같은 결과가 나온다.

CSS파일에서 부모요소의 스타일에 display:flex;를 설정한다면 다음그림과 같이 자식요소들이 가로방향(flex속성의 기본값)으로 정렬됨을 확인할 수 있다.

부모요소의 display속성에 flex값을, 자식요소의 flex속성에 값을 할당하여 유연하게 레이아웃을 구성할 수 있다.

부모요소의 flex관련 속성

부모요소의 스타일에 정의되어야하는 속성들이다.

flex-direction: flex컨테이너의 주축방향(main axis)을 설정한다.
- row: 가로방향, 왼쪽에서 오른쪽으로(기본값)
- row-reverse: 가로방향, 오른쪽에서 왼쪽으로
- column: 세로방향, 위쪽에서 아래쪽으로
- column-reverse: 세로방향, 아래쪽에서 위쪽으로
flex-wrap: 자식요소들의 줄바꿈을 설정한다.
- nowrap: 자식요소들을 한줄로 배치한다.(기본값)
- wrap: 자식요소들을 너비의 합이 부모요소보다 큰 경우 자식요소들을 복수행에 배치한다.
- wrap-reverse: wrap과 동일하나 역방향으로 배치한다.
justify-content: 부모요소의 main-axis방향으로 자식요소들을 정렬한다.
- flex-start: 자식요소들을 main-start부터 정렬한다.
- flex-end: 자식요소들을 main-end부터 정렬한다.
- center: 자식요소들을 중앙정렬한다.
- space-between: 첫번째 자식요소는 main-start에, 마지막 자식요소는 main-end에 배치한 후 나머지 요소들을 균등한 간격으로 정렬한다.
- space-around: 모든 자식요소들이 균등한 간격으로 정렬된다.
align-items: 부모요소의 cross-axis방향으로 자식요소들을 정렬한다.
- stretch: 부모요소의 cross-axis만큼 자식요소의 높이를 늘린다.(기본값)
- flex-start: 자식요소들을 cross-start부터 정렬한다.
- flex-end: 자식요소들을 cross-end부터 정렬한다.
- center: 자식요소들을 중앙정렬한다.
- baseline: 자식요소들을 문자기준선에 정렬한다.

자식요소의 속성

flex-grow: 자식요소의 증가 너비 비율을 설정한다.(기본값은 0)
속성의 값으로 더 큰숫자를 갖는 자식요소가 더 많은 너비를 갖는다
flex-shrink: 자식요소의 감소 너비 비율을 설정한다.(기본값은 1)
속성의 값으로 더 큰숫자를 갖는 자식요소가 더 많은 너비가 감소한다.
flex-basis: 자식요소의 기본 너비를 설정한다.(기본값은 auto)
값이 auto일 경우 width와 height로 자식요소의 크기를 설정할 수 있다.
하지만 단위 값이 주어진 경우는 width와 height를 설정할수 없다.

Flexbox를 공부하면서 https://heropy.blog/2018/11/24/css-flexible-box/ 의 블로그를 많이 참고했다. 굉장히 상세하게 설명을 해주셔서 공부하는데 많이 도움이됬다.
다만..... flex보단 grid가 나한테 더 맞는 것 같다. ㅜㅜ

공윤배

이전 포스트

210730 CodeStates 10일차

다음 포스트

210803 CodeStates 12일차

210803 CodeStates 12일차

CSS의 다양한 선택자

Flex box를 이용한 레이아웃

부모요소의 flex관련 속성

자식요소의 속성

210730 CodeStates 10일차

210804 CodeStates 13일차

0개의 댓글