0. CSS - 기초

이 시리즈에서는 처음부터 CSS를 배운 CSS에 대한 이러한 사항을 언급했습니다. 이 시리즈가 모든 사람들이 CSS에 대한 지식을 상기시키는 데 도움이 되기를 바랍니다.

미디어 쿼리

나는 무언가를 하기 위한 조건으로 이해할 수 있다.

if(condition) {
 // doing some thing here
}

@media (condition) {
  // Doing something here
}

CSS에는 미디어 쿼리에 대한 두 가지 일반화된 조건이 있습니다. '최대 너비' 및 '최소 너비' 조건입니다.

max-width represent for these screens have width between 0 to max-width value

@media (max-width: 300px) {
  // the css code here only for these devices 
  // has width between from 0 to 300px.
}

min-width represent for these screens have width bigger than the value of min-width

@media (min-width: 300px) {
  // the css code here only for these devices
  // has width bigger than 300px
}

선택기

CSS 스타일을 적용할 요소를 지정하는 것을 의미합니다.

/* All a elements will be applied*/

a {
  color: pink;
  text-decoration: none;
}

/* All a elements into article element will be applied*/

article a {
  color: pink;
  text-decoration: none;
}

/* Only a elements has li parent will be applied */
li > a {
  color: pink;
  text-decoration: none;
}

의사 클래스

네비게이터 기록:visited, 콘텐츠 상태:checked 또는 마우스 위치:hover와 같은 외부 스타일에 사용되는 의사 클래스

button:hover {
  color: blue;
}

또한 더 알아볼 수 있습니다here.

의사 요소

의사 요소는 의사 클래스와 비슷하지만 특정 상태를 대상으로 하지 않습니다. 대신 요소 내의 "하위 요소"를 대상으로 합니다.

의사 클래스에서와 같이 :: 대신 : 구문을 사용해야 합니다.

몇 가지 일반적인 의사 요소

// setting color for pseudo-elements placeholder
input::placeholder {
  color: red;
}

// Adding a pseudo-element before p tag and style it
p::before {
  content: '>>';
  color: blue;
}

// Adding a pseudo-element after p tag and style it
p::after {
  content: '<<';
  color: blue;
}

그림 물감

CSS에는 색상을 표현하는 다양한 방법이 포함되어 있습니다.

색상 이름 사용

p {
  color: red;
}

16진수 코드 사용

strong {
  color: #ff0000
}

hsl 사용

// this is opacity is 1
.box {
  background-color: hsl(0deg, 100%, 50%);
}

// Setting opacity is 0.75
// using the '/' as separation for the opacity style
.box {
  background-color: hsl(0deg, 100%, 50% / 0.75);
}

단위

이러한 요소의 크기 관련 변경에 사용되는 3개의 단위가 있습니다. 그들은 px , em , rempx 단위는 공통 단위입니다. 각 요소에 직접 크기를 설정하는 데 사용합니다.

// setting width and height are 30px. It is fixed unit on the .box elements.
.box {
  width: 30px;
  height: 30px;
}

em 단위는 현재 요소의 글꼴 크기와 같은 상대 단위입니다.

// padding bottom is equal font-size*2, you can change font-size to view the changing of unit em.
p {
  font-size: 18px;
  border: 1px solid black;
  padding-bottom: 2em; // The real pixel is 2*18 = 36px;
}

rem 단위는 em 단위와 상당히 비슷하지만 한 가지 중요한 차이점이 있습니다. 항상 루트 요소인 태그에 상대적입니다.

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; // equal  2*16
  margin: 0;
}

h2 {
  font-size: 1.25rem; // equal 1.25 * 16
  margin-bottom: 1.5rem; // equal 1.5 * 16
  color: gray;
}

p {
  font-size: 1rem; // equal 1 * 16
}

타이포그래피

font-family를 사용하여 글꼴을 변경합니다.

글꼴 패밀리는 다양한 스타일로 제공됩니다.

가장 인기 있는 3가지:

세리프

산세리프체

모노스페이스

산세리프 vs 세리프

// try to use sans-serif or monospace to see what will happen?

p {
  font-family: serif;
}

텍스트 서식

3가지 일반적인 서식bold , italic 및 underline
굵은 텍스트

/* Light, thin text*/
font-weight: 300;

/* Normal text */
font-weight: 400;

/* Heavy, bold text */
font-weight: 700;

기울임꼴 텍스트

font-style: italic;

밑줄 텍스트

/* remove underlines from anchor tags: */
a {
  text-decoration: none;
}

조정

text-align 속성을 사용하여 문자를 가로로 이동할 수 있습니다.

div.left {
  text-align: left;
}

div.right {
  text-align: right;
}

div.center {
  text-align: center;
}

텍스트 변환

/* RENDER WITH ALL CAPS */
text-transform: uppercase;

/* Capitalize The First Letter Of Every Word */
text-transform: capitalize;

텍스트 간격

letter-spacing 속성을 사용하는 문자 사이의 간격입니다.

line-height 속성을 사용하는 선 사이의 거리입니다.

h2 {
  letter-spacing: 3px;
  line-height: 2;
}

읽어 주셔서 감사합니다.
즐거운 코딩!!!