CSS의 빠른 개요

8621 단어 webdevcodenewbiecssbeginners
Css는 cascading style의 약자로 HTML 문서용 스타일 언어입니다. html 요소의 모양을 정의하는 데 사용됩니다.

즉, 우리는 그것을 HTML의 구성이라고 부를 것입니다.



CSS를 HTML에 어떻게 첨부합니까?



외부 CSS
css 파일을 외부에 첨부하려면 별도의 파일을 만들어 .css 확장자로 저장하고 html 문서의 head 섹션에 첨부해야 합니다. href 속성은 CSS 파일의 경로를 정의하는 데 사용됩니다. 따라서 경로 이름이 올바른지 확인해야 합니다.

<html>
<head>
    <link rel="stylesheet" href="myStylesheet.css">
</head>
<body>
<!--the body-->
</body>
<html>


내부 CSS
내부 css를 사용할 때 스타일은 head 섹션의 <style> 태그 안에 정의됩니다.

<head>
    <style>
        body{
            background-color: blue;
        }
    </style>


인라인 CSS



스타일은 다음과 같이 요소의 여는 태그 안에 정의됩니다.

<h1 style="color:red;">This is the first heading</h>


선택기



선택기는 스타일을 적용하려는 코드 블록을 선택하는 데 사용됩니다.
통사론;

    Selector{
Style: value;
   }


다섯 가지로 나눌 수 있습니다.

1. 간단한 선택자
여기에는 다음이 포함됩니다.
-요소 이름 예: p , h1 , span , div
<p>Content</p>




    p {
color: red;
   }


-예를 들어 #title , #first-par . 참고: ID 이름은 # 기호로 시작해야 합니다.
예를 들어;

<p id='first-par'>Content</p>




    #first-par {
color: red;
   }


-클래스 선택자 예. .title 클래스 이름 앞에 마침표가 붙습니다.
예;

<p class='par'>Content</p>




    .par{
color: red;
   }


2. 조합기 선택기
요소 간의 관계를 나타냅니다. 그들은 포함합니다
- 후손 선택자 예. div p{…..} div의 모든 단락 요소를 선택합니다.
-자식 선택기(>) 예: div >p{……}는 a<div>의 자식인 모든 p 요소를 선택합니다.
-인접 형제( + )는 다른 특정 요소 바로 뒤에 있는 요소를 선택합니다. div + p{…..} div 요소 뒤의 모든 단락을 선택합니다.

3. 의사 클래스 선택자

특정 조건을 충족한 후에만 선택자에 스타일을 추가하는 데 사용됩니다.
통사론

    Selector: pseudo-class {
Property: value;
   }


예시:

a:hover {
  color: #FF00FF;
}


4. 의사 요소 선택자
요소의 특정 부분만 선택
통사론

Selector: pseudo-class {
Property: value;
   }


예시:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}


플렉스 박스 및 GRID



Flexbox는 항목을 가로로 정렬할지 세로로 정렬할지 지정하는 1차원 레이아웃 디자인입니다.
참조: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
그리드는 2차원 레이아웃 디자인, 즉 행과 열입니다.
https://css-tricks.com/snippets/css/complete-guide-grid/

전환



CSS의 전환은 CSS에서 변경되는 속성의 속도를 제어하는 ​​방법을 제공합니다.
예를 들어 개체의 너비를 늘리면 즉시 발생합니다. 그러나 전환을 사용하면 발생하는 모든 변경 사항을 관찰할 수 있도록 이 속도를 줄일 수 있습니다.
참조:
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
- https://www.w3schools.com/css/css3_transitions.asp

애니메이션



CSS 애니메이션을 사용하면 JavaScript 또는 라이브러리를 사용하지 않고도 다양한 스타일에 애니메이션을 적용할 수 있습니다.

참조:
- https://www.w3schools.com/css/css3_animations.asp
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

반응형 웹 디자인



반응성은 웹 페이지가 모든 장치에서 잘 보이도록 하는 기술입니다. 즉, 웹 디자인은 화면 크기, 방향 및 플랫폼에 따라 적절하게 조정되어야 합니다.
응답성을 달성하는 일반적인 방법은 유연한 그리드, 미디어 쿼리 및 뷰포트 설정을 사용하는 것입니다.

미디어 쿼리



미디어 쿼리는 특정 조건을 의미할 때 적용할 스타일을 지정합니다.
예시;

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}


중단점



CSS 중단점은 웹 사이트 콘텐츠가 장치 너비에 따라 응답하는 지점입니다.
이전 예제에서 화면 크기를 최대 너비 600px로 조정하면 지정된 스타일이 적용됩니다. 즉, 600px가 중단점입니다.
Rocky Linux 8에 WordPress 5.3 설치
LaTeX 및 매크로: 매크로의 수학

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage