CSS3

[ css3 ] 선택자 , 스크롤, root , coding Convention

변쌤(이젠강남) 2023. 8. 24. 01:30
반응형

선택자 , 스크롤, root , coding Convention

# 가상 클래스

타입 설명
:link 방문하지 않은 링크에 스타일을 적용합니다.
:visited 방문한 링크에 스타일을 적용합니다.
:active 요소가 활성화 상태(예: 클릭된 상태)일 때 스타일을 적용합니다.
:hover 마우스가 요소 위에 올라갔을 때 스타일을 적용합니다.
:focus 요소가 포커스를 받았을 때(예: 키보드로 선택) 스타일을 적용합니다.

이 가상 클래스들을 사용하면 링크나 버튼 등의 사용자 인터페이스 요소에 동적인 스타일을 쉽게

 

# 구조적 가상 클래스 선택자

속성 설명 mdn
:first-child 형제요소 중 첫번째 바로가기
:last-child 형제요소 중 마지막 바로가기
:nth-child 형제요소 중 ?번째, 홀수, 짝수 바로가기
:nth-last-child 마지막부터 요소를 선택하는 데 사용 바로가기
:first-of-type 같은 요소중 첫번째 바로가기
:last-of-type 같은 요소중 마지막 바로가기
:nth-of-type 같은요소 중 ?번째, 홀수 , 짝수 바로가기
:root 문서의 root 요소를 선택함 바로가기
::first-letter 첫글자만 바로가기
::first-line 첫 라인만 바로가기
::before 요소 내용 맨앞 바로가기
::after 요소 내용 맨뒤 바로가기
::selection 선택한 부분 바로가기
:not() 부정 선택자 바로가기
:hover 마우스를 올렸을때 바로가기

 

# root

가장 상위 요소를 선택하는 가상 선택자입니다. 이는 HTML 문서의 최상위 요소인 <html> 태그를 선택하는 데 사용됩니다. 그러나 <html> 태그와 다르게, CSS 변수(커스텀 속성)를 선언하거나 전체 문서에 공통 스타일을 적용할 때 주로 사용됩니다.

 

 

  • HTML 최상위 요소 선택
    :root는 <html> 요소와 동일하게 작동하지만, 스타일 계층에서 가장 높은 우선순위를 가집니다.
  • CSS 변수 선언
    :root는 주로 CSS 변수를 전역으로 선언할 때 사용됩니다.
:root {
  --main-color: #3498db;
  --font-size: 16px;
}

body {
  color: var(--main-color);
  font-size: var(--font-size);
}
  • --main-color와 --font-size라는 변수를 선언했습니다.
  • var(--변수명)을 통해 다른 요소에서도 재사용할 수 있습니다.
:root {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f4;
}

 

:root와 <html>의 차이점

  • 둘 다 HTML의 최상위 요소를 선택하지만, :root는 스타일 우선순위에서 더 높습니다.
  • :root는 전역 스타일 정의 및 CSS 변수 선언 시에 더 적합합니다.

 

 

:root {
  /* background: red; */
  /* font-size: 100%; */
  /* font-size: 150%; */
  font-size: 62.5%;
}

/* 1rem === 16px */
/* 1.5rem === 1.5 * 16 ==> 24px */
/* 1rem === . 1 * 10px ==> 10px */
/* 2.5rem == 2.5 * 10px ===> 25px */

h1 {
  font-size: 3rem;
}

.absolute {
  font-size: 24px;
}

.responsive {
  /* font-size: 1.5rem; */
  font-size: 2.4rem;
}

 

:root {
  --primaryColor: #1100f8;
  --secondaryColor: #f15025;
  --mainTransition: all 0.4s linear;
}
.heading {
  color: var(--primaryColor);
}
.heading:hover {
  color: var(--secondaryColor);
  transition: var(--mainTransition);
}
.secondHeading {
  color: var(--primaryColor);
}
.mainDiv {
  --primayRed: red;
}
.mainText {
  color: var(--primayRed);
}
.thirdHeading {
  color: var(--primayRed);
}

 

 

 

 

# 스크롤

scroll

 

 ::-webkit-scrollbar { 스크롤 } 
 ::-webkit-scrollbar-track { 전체스크롤  } 
 ::-webkit-scrollbar-thumb { 스크롤바 }

선택자 설명
::-webkit-scrollbar 스크롤바 자체의 스타일을 지정합니다.
::-webkit-scrollbar-track 스크롤바의 트랙(스크롤바가 움직이는 배경 영역)을 스타일링합니다.
::-webkit-scrollbar-thumb 스크롤바의 손잡이 부분(사용자가 드래그하는 부분)을 스타일링합니다.

 

/* 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 12px; /* 스크롤바의 너비 */
  height: 12px; /* 가로 스크롤바의 높이 */
}

/* 스크롤바의 트랙 */
::-webkit-scrollbar-track {
  background: #f4f4f4; /* 트랙의 배경색 */
  border-radius: 10px; /* 트랙의 모서리를 둥글게 */
}

/* 스크롤바의 손잡이 */
::-webkit-scrollbar-thumb {
  background: #888; /* 손잡이의 색상 */
  border-radius: 10px; /* 손잡이의 모서리를 둥글게 */
}

/* 스크롤바에 마우스를 올렸을 때 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 호버 시 색상 변경 */
}

 

 

# scroll  예시

 

scroll mdn

 

 

scroll-snap-type, scroll-snap-align, scroll-snap-stop, scroll-margin, scroll-padding 등의 스크롤 스냅 속성을 사용하면 스크롤 가능한 뷰포트에서 자식 요소들이 특정 위치에 정렬되도록 제어할 수 있습니다.

 

scroll-snap-type

스크롤 컨테이너에서 스냅이 활성화될지, 필수인지 혹은 선택적인지, 그리고 스냅이 발생할 축(수평, 수직 또는 양방향)을 정의합니다.

.container {
  scroll-snap-type: x mandatory;
}

 

스크롤 컨테이너가 수평축(x축)을 따라 필수적으로 스냅하도록 합니다.

 

scroll-snap-align

스크롤 컨테이너의 각 자식 요소에 대해 스냅 위치를 설정합니다. 이 속성은 각 자식 요소가 스냅될 위치(start, end, center 등)를 정의합니다.

 

.item {
  scroll-snap-align: start;
}

 

각 자식 요소의 시작 부분이 스크롤 컨테이너의 스냅 위치에 맞춰지도록 합니다.

 

scroll-snap-stop

스크롤 중에 해당 자식 요소가 반드시 스냅되어야 하며 스크롤 중에 건너뛰어지지 않도록 합니다.

 

.item {
  scroll-snap-stop: always;
}

 

스크롤 중에 해당 요소가 반드시 스냅되도록 합니다.

 

scroll-margin

스냅되는 각 자식 요소 주위에 마진을 추가하여, 스냅 포인트와 요소 사이에 여백을 설정할 수 있습니다. 이 마진은 스냅 위치를 조정하는 데 사용됩니다.

 

.item {
  scroll-margin-top: 10px;
}

 

요소의 상단에 10픽셀의 스크롤 마진을 추가합니다.

 

 

scroll-padding

스크롤 컨테이너에 패딩을 설정하여 스냅 오프셋을 만듭니다. 이는 스냅 포인트에서 컨테이너 가장자리까지의 거리를 조정할 때 사용됩니다.

 

.container {
  scroll-padding-top: 20px;
}

 

스크롤 컨테이너의 상단에 20픽셀의 패딩을 추가합니다

 

 

 

# coding Convention

 

코딩 규칙 또는 코딩 컨벤션은 프로그래밍에서 코드를 작성할 때 사용되는 일련의 규칙과 규약입니다. 이는 코드의 일관성과 가독성을 유지하고 개발자 간 협업을 용이하게 만들어줍니다. 

 

  1. 들여쓰기: 코드 블록을 보다 명확하게 표현하기 위해 들여쓰기의 사용 여부와 들여쓰기에 사용되는 공백 또는 탭의 수를 명시합니다.
  2. 명명 규칙: 변수, 함수, 클래스 등의 이름을 작성하는 방법에 대한 규칙을 제시합니다. 이는 의미있는 이름을 사용하여 코드의 이해도를 높이고 혼란을 줄입니다.
  3. 주석: 코드에 설명을 추가하는 방법에 대한 규칙을 제시합니다. 이는 코드의 의도를 명확히하고 다른 개발자가 코드를 이해하는 데 도움이 됩니다.
  4. 코드 레이아웃: 중괄호의 위치, 빈 줄의 사용 등과 같은 코드의 레이아웃에 대한 규칙을 제시합니다.
  5. 문법 규칙: 특정 언어의 문법적인 규칙을 준수해야 함을 명시합니다. 예를 들어, 세미콜론의 사용 여부, 따옴표의 종류 등이 여기에 해당됩니다.
  6. 코드 스타일: 코드의 일관된 스타일을 유지하기 위한 규칙을 제시합니다. 이는 코드의 가독성을 높이고 유지 보수성을 향상시킵니다.
  7. 파일 구조: 파일 및 디렉토리의 구조에 대한 규칙을 제시합니다. 이는 프로젝트의 구조를 일관되게 유지하여 코드를 관리하기 쉽게 합니다.

코딩 규칙은 개발팀이나 프로젝트에 따라 다를 수 있으며, 종종 특정 언어나 프레임워크에 대한 커뮤니티에서 정의된 규칙을 따릅니다. 이러한 규칙을 따르면 코드의 일관성과 품질을 향상시키고 개발 프로세스를 보다 효율적으로 만들어줍니다.

 

회사마다 규칙은 조금 다를수 있습니다.

 

 

 

 

https://nuli.navercorp.com/tool/codingCon

 

NULI

Coding Convention 마크업 개발은 프론트-엔드 페이지의 기본 골격을 형성하기 때문에 디자인, 브라우저, 스크립트, 성능, 접근성 등과 긴밀한 관계가 있습니다. 즉, 마크업 개발을 잘 해야 모든 브라

nuli.navercorp.com

 

 

 

 

반응형

'CSS3' 카테고리의 다른 글

[ CSS3 ] position  (0) 2023.08.27
[ css3 ] flex , 레이아웃구조  (0) 2023.08.27
[ css3 ] 상속, 단위, 웹폰트, 컬러,둥근 사각형, 그림자 , float , 배경  (0) 2023.08.22
[ css3 ] border, font, text, display  (0) 2023.08.21
[ css3 ] css 문법, 선택자, margin, padding, box-sizing  (0) 2023.08.21

'CSS3'의 다른글

  • 현재글[ css3 ] 선택자 , 스크롤, root , coding Convention

관련글

티스토리툴바