[CSS] 헷갈리는 문법 정리

네이버 메인페이지 클론코딩을 진행하고 CSS에서 중요하다고 판단되거나 아차 싶던 내용들을 포스팅하는 글입니다.

position

CSS의 position 속성은 요소가 웹 페이지에 어떻게 위치할지 결정합니다.

간단 정리

• static : 초기값. 기준 위치를 설정하지 않음.
• relative : 현재 위치를 기준으로 상대 위치를 지정.
• absolute : 부모 위치를 기준으로 절대 위치를 지정.
• fixed : 윈도우(브라우저 창)를 기준으로 절대 위치를 지정하여 요소를 그 위치에 고정(fix)시킴
• sticky : 지정된 위치에 뷰포트가 도달했을 때, 요소가 그 위치에 고정(fix)됨

static

• static은 position의 기본값으로, position을 지정하지 않아도 기본적으로 적용된다.
• position이 static인 상태에는
  top, bottom, left, right, z-index를 지정해도 위치가 변경되지 않는다.

따라서, 요소를 원하는 위치에 배치시키고 싶은 경우에는
적합한 상황에 따라 아래에서 언급하고 있는 다른 position 값을 지정해줘야한다.

relative

• relative는 현재 위치를 기준으로 상대 위치를 지정하게 해준다.
  상대 위치라는 말이 좀 어렵지만 요소 자신의 원래 위치가 기준점이 된다고 생각하면 쉽다.
• 특징
  • top, bottom, left, right의 지정이 가능해진다.
  • z-index의 지정이 가능해진다.
  • relative의 기준점은 요소 자기 자신이 원래 배치되었던 위치이다.
  • absolute의 기준 위치가 된다.

absolute

• absolute는 relative나 fixed가 지정된 부모 위치를 기준으로 자신의 위치를 지정할 수 있게 해준다.
• 특징
  • 부모 요소(=기준 위치)에 relative 또는 fixed를 지정해야한다.
  • 자식 요소(=이동시키고 싶은 요소)에 absolute를 지정한다.
  • 자식 요소를 top, bottom, left, right 등으로 구체적인 위치를 조절할 수 있다.

fixed

• fixed는 브라우저 화면(윈도우)을 기준으로 요소를 정해진 위치에 고정(fix)시킬 수 있다.
• 페이지의 top 버튼 과 header를 상단에 고정시킬 때 자주 사용된다.
• 특징
  • 브라우저 화면(윈도우) 전체가 기준점이 된다.
  • 스크롤을 해도 요소가 지정된 위치에 계속 고정되어 있다.
  • top, bottom, left, right의 지정이 가능하다.
  • z-index의 지정이 가능하다.

sticky

• sticky는 요소가 지정된 기준점(top, bottom, left, right 등으로 설정해둔 위치)에 도달했을 때, 그 기준점에 요소를 고정(fix)시켜준다.
• ex) 페이지를 스크롤하여 div.menu(sticky)가 top: 30에 도달했을 때 그 위치(top: 30)에 그대로 고정(fix)된다.
• 특징
  • 브라우저 화면(윈도우) 전체가 기준점이 된다.
  • 기준점에 도달했을 때 요소가 그 위치(기준점)에 고정(fix)된다.
  • top, bottom, left, right의 지정이 가능하다.
  • z-index의 지정이 가능하다.

display

CSS의 display 속성은 요소가 화면에 어떻게 표시될지 결정합니다.

block

• block은 요소가 뷰 포트의 가로 영역을 100% 점유하게 되는 특징이 있다.
  따라서 block 요소와 인접된 다른 요소는 양 옆으로 배치될 수 없다.
• 대표적인 요소로는 <div>,<p>,<h1>,<ul> 등이 있다.
• 특징
  • 블럭처럼 세로로 쌓이는 듯이 나열되는 것이 특징
  • width, height, margin, padding의 설정이 가능하여 자유도가 높다.

inline

• inline은 각 요소가 인접된 요소의 양 옆으로 나열되는 것이 가능
• 대표적인 요소는 <a>,<span>,<img>,<svg> 등이 있다.
• 특징
  • 요소를 가로로 나열할 수 있다.
  • width, height의 설정이 불가능하다.
  • margin은 좌우 값만 설정이 가능하다.
  • padding은 상하좌우 설정이 가능하지만, 상,하의 padding은 다른 요소에게 영향을 줄 수 없다.
  • text-align와 vertical-align을 지정하는 것이 가능하다.

inline-block

• inline-block은 inline과 block의 장점들을 모아놓은 것이다.
• 요소의 배치는 inline적인 성질을 갖고 형태는 block적인 성질을 갖는다.
• 특징
  • inline처럼 요소를 가로로 나열할 수 있다.
  • block처럼 width, height의 설정이 가능하다.
  • block처럼 상하좌우에 margin, padding의 설정이 가능하다.
  • inline처럼 text-align, ertical-align을 사용하는 것이 가능하다.

flex

• flex는 요소를 Flexbox로 만듭니다.
• 1차원(한 축)레이아웃을 다룰 때 유용하다.
• Flexbox는 item 간의 공간 배분과 정렬을 쉽게 할 수 있는 레이아웃 모델입니다.
• 특징
  • 1차원 적인 레이아웃이며 꼬지처럼 한 방향으로만 갈 수 있다.
  • flex 내부의 자식들을 flex item 이라고 부르며 flex-direction,flex-wrap,justify-content,align-items,align-content 등의 속성을 사용해 item들을 배치하고 정렬할 수 있다.

grid

• grid는 행과 열을 기반으로 복잡한 레이아웃을 만들 수 있다.
• 2차원(행과 열)레이아웃을 다룰 때 유용하다.
• 특징
  • flex가 꼬지라면 grid는 신문에 각 부분처럼 공간을 나눌 수 있다.
  • grid-template-rows, grid-template-columns, grid-template-areas, grid-row, grid-column 등의 속성을 사용하여 item들을 grid에 배치하고 정렬할 수 있다.

nth

• nth 선택자 중 first-child, last-child, nth-child, nth-of-type 처럼 자주 사용되는 선택자들을 정리해 두려고 합니다.

nth-child

/* 첫번째 요소 선택 */
.section01 li:first-child{background:skyblue;}

/* 마지막 요소 선택 */
.section02 li:last-child{background:skyblue;}

/* 6번째 요소 선택 */
.section03 li:nth-child(6){background:skyblue;}

/* 홀수 선택 */
.section04 li:nth-child(odd){background:skyblue;}

/* 짝수 선택 */
.section05 li:nth-child(even){background:skyblue;}

/* 세번째 요소마다 선택 */
.section06 li:nth-child(3n){background:skyblue;}

/* 두번째 요소부터 세번째 요소마다 선택 */
.section07 li:nth-child(3n+2){background:skyblue;}

/* 6번부터 모든 요소 선택 */
.section08 li:nth-child(n+6){background:skyblue;}

/* 1번부터 3번까지 요소 선택 */
.section09 li:nth-child(-n+3){background:skyblue;}

/* 3번부터 6번까지 요소 선택  */
.section10 li:nth-child(n+3):nth-child(-n+6){background:skyblue;}

/* 끝에서 3번째 요소 선택 */
.section11 li:nth-last-child(3){background:skyblue;}

/* 끝에서 3번째 요소까지 선택 */
.section12 li:nth-last-child(-n+3){background:skyblue;}

/* 끝에서 3번째 요소부터 세번째 요소마다 선택 */
.section13 li:nth-last-child(3n+3){background:skyblue;}

/* 끝에서 3번째 요소부터 첫번째 요소까지 선택 */
.section14 li:nth-last-child(n+3){background:skyblue;}

/* 그룹 내 형제요소가 5개 이상일 때 전체 선택 */
.section15 li:nth-last-child(n+5),
.section15 li:nth-last-child(n+5) ~ li{background:skyblue;}

/* 그룹 내 형제요소가 3개 이하일 때 전체 선택 */
.section16 li:nth-last-child(-n+3):first-child,
.section16 li:nth-last-child(-n+3):first-child ~ li{background:skyblue;}

/* 3번째 요소만 제외하고 전체 선택 */
.section17 li:not(:nth-child(3)) {background:skyblue;}

nth-of-type

/* group 내 첫번째 div 요소 선택 */
.section01 .group div:first-of-type{background:skyblue;}

/* group 내 마지막 div 요소 선택 */
.section02 .group div:last-of-type{background:skyblue;}

/* 두번째 span 요소 선택 */
.section03 .group span:nth-of-type(2){background:skyblue;}

/* 첫번째 p 요소 부터 두번째 p요소마다 선택 */
.section04 .group p:nth-of-type(2n+1){background:skyblue;}

/* 세번째 p 요소부터 전체선택 + 첫번째 p 요소부터 6개 선택의 교집합 */
.section05 .group p:nth-of-type(n+3):nth-of-type(-n+6){background:skyblue;}

가상요소 (::before, ::after)

::before,::after

• ::before - 선택한 elements 앞에 가상 콘텐츠 삽입
• ::after - 선택한 elements 뒤에 가상 콘텐츠 삽입

content를 쓰는 이유

content는 가상 요소 before,after를 사용할 때 꼭 써줘야하는 속성.
content=""; HTML에는 존재하지 않고 CSS에서만 존재하는 가상요소이며
가상요소이기 때문에 JS에서 제어하기 어렵다는 특징이 있음.

example ( divider )

CSS 속성 선택자

example

• div[attr="val"] (=) : "attr" 속성 값이 "val" 인 div 요소를 선택
• div[attr~="val"] (~=) : "attr" 속성 값 중 "val" 단어가 있는 div 요소를 선택
• div[attr^="val"] (^=) : "attr" 속성 값이 "val" 로 시작하는 div 요소를 선택
• div[attr$="val"] ($=) : "attr" 속성 값이 "val" 로 끝나는 div 요소를 선택
• div[attr*="val"] (*=) : "attr" 속성 값이 "val"을 어느식으로든 포함하는 div요소를 선택
• div[attr|="val"] (|=) : "attr" 속성 값이 "val" 이거나 "val" 으로 시작하는 div 요소를 선택

출처
https://developer.mozilla.org/ko/docs/Web/CSS
https://velog.io/@hsecode/nth-child