티스토리 뷰

Frontend/CSS, HTML

[CSS] 선택자(전체, 그룹, 가상요소, 형제 요소), 레이아웃(float, flex, grid) 기본

blueprint-12 2023. 1. 30. 21:45

선택자(selector)

1.전체 선택자 

* {
 property: value
}

2.그룹 선택자

  • 수의 제한이 없다. 아래 예시에서는 두 클래스에게 같은 속성을 부여한다는 소리
.class1, .class2 {
	property: value
}

3.가상 클래스 선택자

: 실제로 html요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다. 

선택자:가상 클래스 {
	property: value
}

3-1.가상 클래스 선택자 예시🚗

 

:first-child (형제 요소 중 첫번째만 선택)

  • e.g. p:first-child 라고 지정해서 css 를 먹였는데 적용이 안되는 경우 -> 형제요소 중 첫번째 p태그를 지칭하는 것으로 만일 1번째 형제 요소가 p태그가 아니라 다른 태그라면 css가 당연히 적용되지 않는다. 
  • :frist-of-type 를 사용하면 해당 태그(p태그만 카운트) 중 첫번째를 가리키게 된다. 위의 경우를 해결하는 방법이다. 

:last-chilf (형제 요소 중 마지막 요소만 선택)

  • last-of-type 과 대응

:n-th-chilf(n) (형제 요소 중 n번째 요소만 선택)

  • (n) 이 소괄호 안에 연산자도 넣어줄 수 있다. 간단한 사칙연산도 가능
  • nth-of-type(n) 과 대응
.box1 p:nth-child(3){
 background: green; //p태그 중 3번째 요소만 백그라운드 컬러를 green으로 한다.
}

.box1 p:nth-child(2n){
 background: yellow; //p태그 중 2의 배수만 백그라운드 컬러로 옐로우 색상 부여
}
  • :hover (마우스가 해당 요소 위에 올라갔을 때) 
  • :active (활성화된 요소를 선택하는 가상 클래스 선택자 e.g.버튼을 누르고 떼는 순간까지 활성화 상태)
  • :focus (tab 키 등을 이용해서 입력창의 커서가 활성화되어있는 상태)
  • :visited (사용자가 방문한 적 있는 링크를 선택하는 가상 클래스 선택자) 방문한적 있는 링크는 기본 컬러가 "보라색"이다. 

3-2. 가상 요소 선택자

실제로 html 요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다. (가장 클래스 선택자와 공통점)

위와 차이점은 클래스인지 요소인지에 있다. 

  • ::before
  • ::after 
  • 두 가지는 이름만 다르지 같은 기능을 한다. 클래스 선택자와 차이점을 두기 위해 ::와 :로 구분한다. 모던 브라우저에서는 ::와 :를 둘 다 지원하기 때문에 :after 과 ::after에 구분없이 사용가능하다.
  • 가상 요소 선택자는 디자인적인 이유로 넣어줘야 하거나 의미가 없는(기능적 의미가 없는) 간단한 요소를 만들어낼 때 유용하다. float 레이아웃에서의 clearfix와 같은 요소들은 직접 HTML요소로 만들 것이 아니라 이런 가상 요소 선택자를 통해 만들어주면 좋다.
  • 이 외에도 가상 요소 선택자 사용 예시로 캐러셀 버튼, 메뉴바 아래에 하이라이트 라인 등..

test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css 가상 요소 선택자</title>
    <link rel="stylesheet" href="test.css" />
  </head>
  <body>
    <div class="box1">나는 박스1입니다.</div>
  </body>
</html>

test.css

.box1 {
  width: 200px;
  height: 200px;
  background-color: yellow;
  padding: 10px;
  box-sizing: border-box;
}
.box1:after {
  content: '나는 가상 요소이다.';
  display: block;
  background-color: blue;
  color: white;
}
❗가상 요소 선택자로 만들어준 css 가상 요소는 HTML요소가 아니기 때문에 content값이 들어있지 않으면 화면상에 그려지지 않는다. 내용이 필요하지 않은 요소라면 ""로 빈값이라도 속성값으로 줘야 한다. 

clearfix 가상 요소 적용 ver

<body>
    <div class="box1 clearfix">나는 박스1입니다.</div>
</body>
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
  • clearfix라는 클래스 요소에 가상 클래스 요소를 붙여서 내용은 없지만 clear:both 라는 디자인적 기능을 하게 만들 수 있다. 

4. 형제 요소 선택자(일반 형제 선택자: ~)

기본 문법

A ~ B {
	property: value
}

: A와 같은 부모를 가지고 있는 형제 요소들 중 B를 선택한다. 

~ 기호인 일반 형제 선택자는 뒤에 있는 모든 같은 요소를 동시에 선택자로 지정한다. 즉, 기준이 되는 A요소가 B요소보다 먼저 나와있어야 하며 뒤에 위치하게 되면 CSS가 적용되지 않는다. 

4-1 인접 형제 선택자: +

A + B {
	property: value
}

인접 형제 선택자는 + 기호를 사용하며, A와 B가 같은 계층에 있을 때 바로 뒤 B를 선택자로 지정한다.

 

📌결론적으로 ~ 는 뒤에 나오는 모든 B요소에 해당하는 태그 전부를 CSS 적용시키고, +는 바로 인접한 하나의 B요소만을 적용시킨다.

CSS 레이아웃(Layout)

레이아웃의 흐름

Float -> Flex -> Grid 
  1. Float: 현대 웹에서는 거의 사용하지 않음, 필요할 때만 사용하며 전체 레이아웃을 잡을 때는 거의 사용되지 않음 (이유: 반응형 웹에 적합하지 않기 때문이다. *반응형 웹이란? 모바일, 태블릿, PC등 접속하는 기기의 너비에 맞춰 레이아웃이 변하는 웹페이지)
  2. Flex, Grid : 순서상으로 Grid가 나중에 나왔기 때문에 뒤에있을 뿐 Grid가 더 모던하고 좋은 레이아웃 속성은 아니다. 상황에 따라 Flex와 Grid를 혼용한다.

float tip

  • flot은 HTML요소를 일반적인 흐름으로부터 벗어나서 특정한 컨테이너의 좌측 혹은 우측을 감싸는 형태로 강제 배치할수있도록 도와주는 속성입니다. 
  • clear는 가장 가까이 붙어있는 float속성에 영향을 받는 요소에 주는 속성이다. clear를 통해 float에 영향으로부터 벗어날 수 있다. 근처의 float속성이 right라면 영향을 받는 요소의 clear값은 right로 줘야한다. float요소가 많을 경우, 아무런 기능을 하지 않는 div박스를 만들어 clearfix라는 관례명을 붙여주고 해당 div를 float속성을 적용한 요소의 마지막에 위치시켜주면 된다. clearfix는 clear: both의 기능만 한다.
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box1 box">첫번째 박스</div>
    <div class="box2 box">두번째 박스</div>
    <div class="clearfix"></div>
    <div class="box3">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis
      minima iure libero, expedita voluptate accusantium magni, quaerat
      voluptates nemo quae odio amet iste! Ipsa vero unde quia nesciunt! Iusto,
      iste!
    </div>
  </body>
</html>
/* style.css */

.box {
  width: 300px;
  padding: 20px;
  box-sizing: border-box;
}

.box1 {
  height: 400px;
  background-color: red;
  float: left;
}
.box2 {
  height: 200px;
  background-color: blue;
  float: right;
}

/* 컨텐츠가 없는 div박스에 clearfix 라는 관례명을 붙여주고
float된 요소들의 가장 맨 아래에 해당 div를 넣어주면 간편하게 모든 요소에 clear속성을 적용할 수 있다. */
.clearfix {
  clear: both;
}
음..float은 어떻게 쓰는 지만 알고 있으면 될 거 같고.. 불편하니까 그냥 flex와 grid를 쓰시는 걸 추천

1. Flex 레이아웃(한 줄짜리)

justify-content: space-between(첫번째 요소와 마지막 요소의 양 끝 쪽 공백이 없고 간격이 균일)

justify-content: space-around (첫번째 요소와 마지막 요소를 제외한 나머지 요소 사이의 간격이 앞 뒤 간격의 2배)

justify-content: space-evenly(space-around와 달리 모든 여백의 공간이 균일)

 

align-items 중심축 반대 방향 정렬 

stretch가 기본값(세로 사이즈를 꽉 채워준다.)

주의❌: align-items는 flex-items이 한 줄일 때 우선 적용된다. 
두 줄 이상일 때에는 align-content라는 다른 속성을 써주어야 한다. 

flex-direction이 바뀌면 중심축의 방향이 바뀐다. justify-content와 align-item의 정렬방향도 함께 바뀜

1-1. flexbox가 2줄 이상되었을 때 속성

📌기본적으로 flex container에 flex-wrap은 지정되어 있지 않다면 nowrap(기본값)으로 한 줄에 모든 item이 꾸겨져서 들어가는 경우가 생긴다. wrap으로 속성을 직접 명시해주면 item이 찌그러지지않고 여러 줄로 만들어 줄 수 있다.  
-> 즉, 해당 컨테이너의 item들의 width를 보장하고 여러 줄로 해주고 싶다면 flex-wrap: wrap 으로 설정값을 주면 된다. 

flex-wrap: nowrap(기본값)

flex-item이 여러 개일 때,  item들의 줄바꿈을 허용할 것인지 말 것인지 결정, 개행과 관련

*align-items 는 flex-item이 한 줄일 때 우선적용된다. 두 줄 이상일 때에는 align-contnent라는 다른 속성을 써줘야 한다.

 

align-content: stretch(기본값)

여러 줄이 된 flex-item의 중심 반대 축 정렬을 어떻게 할 지 결정한다.

  • flex-start //간단히 말하면 item들이 위로 붙음
  • flex-end // 아래로 붙음
  • center // 중앙
  • space-between // 상,하에 요소가 딱붙은 상태로 균일하게 붙음
  • space-around // 상,하에도 여백의 사이즈가 x1 라면 요소와 요소 사이의 여백은 x2
  • space-evenly // 상,하 요소와 요소 사이 여백 간격이 동일 

🚗flex-flow

flex-direction과 flex-wrap을 합쳐놓은 단축 속성

(*단축 속성은 유사한 속성을 한 데 묶어놓은 속성 e.g. border: 1px solid red)

flex-direction: row; 
flex-wrap: wrap;

/* 위의 css코드가 */

flex-flow: column wrap 

/* 과 같다. */

위의 속성들은 flex-container에 주는 속성들이었다. 

flex-item에게 줄 수 있는 속성은 아래와 같다. 

  • order: item의 순서를 지정
  • flex-basis: item의 기본 사이즈 지정
  • flex-shrink, flex-grow 등등

flex layout 예시

2. Grid 레이아웃

📌 flex 레이아웃과 다르게 1차원이아닌 2차원적 구조를 가지고 있다. 즉, row와 column 레이아웃을 동시에 설정할 수 있다. ⭐ fr (fraction, 분수)의 약자, grid-template에서 사용할 수 있는 비율 단위 
  1. display: grid 를 해준다. 
  2. grid-template-rows : grid의 행의 개수 및 크기를 지정할 수 있다. 
    • e.g.)grid-template-rows: 1fr 2fr 200px // 이 그리드는 총 3개의 행을 가지고 각 행의 규격은 200px이다.
    • gird-template-columns 도 지정할 수 있다 대신 행이 아니라 열의 개수 및 크기를 지정한다.
    • repeat(a,b): grid-template에서 사용할 수 있는 반복 함수! -> b 규격의 grid-template을 a개 생성한다. e.g.) grid-template-columns: repeat(4, 1fr)  = grid-template-columns: 1fr 1fr 1fr 1fr 
* {
  box-sizing: border-box;
}
.container {
  border: 2px solid red;
  display: grid;
  /* repeat의 두번째 속성값은 여러개를 줄 수 있으며 띄어쓰기로 구분 */
  grid-template-columns: repeat(2, 1fr 2fr);
  grid-template-rows: repeat(4, 100px);
  /* grid-gap 은 gap속석으로 replace됐음  */
  gap: 5px;
}
.item {
  border: 2px solid blue;
}

-> 위의 예시에서 grid-gap을 적용하려고하니 제대로 적용이 되지않아 오류 메세지를 확인해봤다. 찾아보니 아래와 같이 grid-gap 이 gap으로 CSS3에서 rename되었다고 한다.(2023-02-05 기준)

또한, gap은 column-gap과 low-gap의 shorthand(단축속성)입니다. 

This property was renamed to gap in CSS3.  

2-1. 그리드 관련 속성

grid-column / grid-row

: grid-item이 얼마만큼 영역을 차지할 지 정의한다. (grid-item에 적용하는 속성으로,  각 셀의 영역을 지정합니다.

출처:&nbsp;https://studiomeal.com/archives/533

 

이때, grid-column은 grid-line의 번호, grid-row는 grid-number의 번호를 기준으로 영역을 할당한다.

e.g.) grid-column: 1/3  (시작점과 종료지점을 쓴 것, 1시작 3끝)

grid-column: 1/3 , grid-row: 2/3

span 키워드로 끝 셀번호 지정하기

"시작번호 / 끝번호"를 지정하는 방법 외에, 몇 개의 셀을 차지하게 할 것인지 "span"이라는 키워드를 통해 지정해줄 수 있다.

3. Flex vs Grid

Flex는 비교적 작은 단위의 레이아웃 구성에 적합하다.

작업 유동성이 높기 때문에, 디자인이나 기획이 확실히 잡히지 않아 변경 가능성이 있는 경우에 적합하다.

 

Gird는 큰 규모의 레이아웃 구성에 적합하다. 

레이아웃 구조가 확실하게 잡혀있는 경우, 효율적으로 반응형 디자인을 구현할 수 있다. 

-> 기획이 확실하게 잡혀있는 서비스의 경우 grid를 활용하는 것이 좋다.

단, 그리드는 상대적으로 최신 기술이기 때문에 모든 브라우저에서 지원하지 않는다. 

※참고: 지원 여부를 확인할 수 있는 체크 사이트: caniuse

'Frontend > CSS, HTML' 카테고리의 다른 글

[CSS] 배경  (0) 2023.02.01
[CSS] 상속, 웹 폰트, cascading  (0) 2023.01.31
[CSS] box-sizing, display, <hr> in HTML5  (0) 2023.01.25
[CSS ] CSS 구조 공통 명칭  (0) 2022.10.31
[CSS] Grid, scrollTo, 스크롤 주기  (2) 2022.10.03
댓글