이 스타일링 언어는 텍스트 스타일, 크기, 색상 및 웹 페이지의 위치 지정을 담당하므로 CSS가 없으면 웹 사이트가 지루해 보일 것입니다.

CSS란 무엇입니까?

CSS로 약칭되는 Cascading Style Sheets는 HTML 요소가 화면이나 종이에 표시되는 방식을 설명하는 언어입니다. CSS는 1996년 W3C(World Wide Web Consortium)에서 만들었습니다.

HTML 요소는 웹 페이지의 형식을 지정하는 데 도움이 되는 태그를 갖도록 설계되지 않았으며 개발자는 페이지에 대한 마크업만 작성하면 됩니다. HTML 3.2가 출시되었을 때 와 같은 태그의 도입은 개발자들에게 새로운 문제를 안겨주었습니다.

웹 페이지에는 색상이 지정된 배경, 다양한 글꼴 및 여러 스타일이 있으므로 코드를 다시 작성하는 데 비용이 많이 들고 고통스러워졌습니다. W3C 학교는 이러한 문제를 해결하기 위해 CSS를 도입했으며 수년에 걸쳐 계속 발전해 왔습니다.

왜 CSS인가?

#1. CSS는 효율적입니다

CSS는 모든 웹 페이지에 글꼴, 요소 정렬, 테두리, 색상, 배경 스타일 및 크기와 같은 태그를 추가하는 수고를 덜어줍니다.

#2. 시간을 절약

외부 CSS 파일을 변경하여 전체 웹 사이트의 모양을 쉽게 변경할 수 있습니다.

#삼. 다중 장치 호환성

현대 웹 사용자는 PC, 태블릿, 스마트폰과 같은 다양한 화면 크기의 가젯에서 사이트에 액세스합니다. CSS를 사용하면 화면 크기에 반응하는 웹 페이지를 쉽게 만들 수 있습니다.

#4. 유지 관리가 쉬운 애플리케이션

최신 웹 애플리케이션은 항상 진화하고 있습니다. CSS를 사용하면 코드베이스를 변경하지 않고도 단일 구성 요소 또는 전체 웹 사이트를 쉽게 변경할 수 있습니다.

CSS는 HTML과 함께 웹 사이트를 만드는 데 어떻게 사용됩니까?

HTML은 웹 페이지 생성에 사용되는 표준 마크업 언어입니다. 반면에 CSS는 웹 페이지(HTML을 사용하여 생성됨)가 표시되는 방식을 설명합니다. HTML 및 CSS를 사용하여 만든 웹 페이지에는 이상적으로 텍스트, 이미지 링크 및 HTML 태그의 HTML 파일이 있습니다.

트래픽이 많은 웹 사이트를 위한 10가지 프리미엄 WordPress 호스팅

이 HTML 파일에는 링크 태그를 사용하여 연결된 별도의 CSS 파일이 있거나 내부 또는 인라인 CSS 스타일을 사용할 수 있습니다. HTML 파일에는

과 같은 제목과

로 표시된 단락이 있을 수 있습니다. CSS를 사용하여 단락의 모든 콘텐츠를 굵게 표시하거나 머리글 콘텐츠를 50픽셀 및 녹색으로 표시하도록 브라우저에 지시할 수 있습니다.

다음 섹션에서 HTML과 CSS가 어떻게 작동하는지 보여드리겠습니다.

CSS의 종류

#1. 외부 CSS

CSS를 외부로 분류하려면 HTML 파일과 확장자가 .css인 별도의 CSS 파일이 있어야 합니다. 예: style.css. CSS 파일은 링크 태그를 사용하여 HTML 파일/문서와 연결됩니다.

외부 CSS 파일의 예:

.main {

    text-align:center;   

}

.GF {

    color:red;

    font-size:50px;

    font-weight:bold;

}

#TP {

    color:blueviolet

    font-style:bold;

    font-size:20px;

}

CSS 파일은 다음 HTML 문서와 연결할 수 있습니다.

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/>

    </head>

    <body>

        <div class = "main">

            <div class ="GF">Geek Flare!!!! </div>

            <div id ="TP">

               Your favourite tech portal

            </div>

        </div>

    </body>

</html>

link 태그는 외부 스타일 시트를 HTML 문서와 연결하는 반면 href 속성은 외부 스타일 시트의 위치를 지정합니다.

최종 웹 페이지는 다음과 같이 나타납니다.

외부 CSS는 재사용 가능한 구성 요소를 쉽게 만들고 코드베이스를 보편적으로 변경할 수 있으므로 가장 권장되는 접근 방식입니다.

#2. 내부 CSS

고유한 스타일을 지정하려는 단일 HTML 문서가 있는 경우 내부 CSS가 이상적입니다. 스타일 규칙 세트는 헤드 섹션 내의 HTML 문서에 작성됩니다.

다음은 내부 CSS의 예입니다.

<!DOCTYPE html>

<html>

    <head>

        <title>Internal CSS Example</title>

        <style>

            .main {

                text-align:center; 

            }

            .GF {

                color:Red;

                font-size:70px;

            }

            .custom {

                font-style:bold;

                font-size:20px;

            }

        </style>

    </head>

    <body>

        <div class = "main">

            <div class ="GF">Internal CSS Demonstration</div>

            <div class ="custom">

                The Results

            </div>

        </div>

    </body>

</html>

렌더링된 웹 페이지는 다음과 같이 나타납니다.

내부 CSS는 HTML 문서의 코드를 너무 크게 만들어 로딩 속도에 영향을 미치기 때문에 대부분의 경우 이상적이지 않습니다.

#삼. 인라인 CSS

인라인 CSS는 본문 내에 CSS 스타일을 포함합니다. 예를 들어 인라인 CSS를 사용하여 단락, 제목 또는 div의 스타일을 지정할 수 있습니다.

<!DOCTYPE html>

<html>

    <head>

        <title>Inline CSS</title>

    </head>

    <body>

        <p style = "color:red; font-size:50px;

                font-style:bold; text-align:center;">

            Inline CSS Demonstration

        </p>

    </body>

</html>

렌더링된 문서는 다음과 같이 나타납니다.

인라인 CSS는 모든 HTML 태그에 CSS 속성을 추가하는 데 시간이 걸리므로 웹 애플리케이션을 확장하려는 경우 적합하지 않습니다.

CSS를 마스터하기 위한 최고의 온라인 과정과 책을 살펴보세요.

HTML 및 CSS로 반응형 웹 사이트 구축

반응형 실제 웹사이트 구축 과정에서는 HTML5 및 CSS3를 사용하여 반응형 웹사이트를 구축하는 방법을 가르칩니다. 상자 모델, 선택기 충돌 해결, 포지셔닝 체계 및 상속과 같은 개념을 탐구하는 이 과정을 배우기 위해 웹 개발에 대한 사전 지식이 필요하지 않습니다.

전문 웹 사이트를 브레인스토밍, 계획, 스케치, 코딩, 테스트 및 최적화하는 방법을 배우려는 경우에도 이상적인 과정입니다.

고급 CSS 및 Sass

고급 CSS 및 Sass 과정에서는 캐스케이드, 특이성 및 상속과 같은 주제를 탐색하여 CSS가 배후에서 작동하는 방식을 소개합니다.

이 과정에는 강력하고 반응이 빠른 웹 페이지를 만들기 위한 많은 최신 CSS 기술이 있습니다. 이 과정에서는 CSS, 전역 변수를 설계하고 미디어 쿼리를 관리하면서 Saas와 이를 프로젝트에서 사용하는 방법을 소개합니다.

또한 @keyframes, 애니메이션 및 전환을 다루기 때문에 CSS 애니메이션을 배우고자 하는 경우에도 이상적인 과정입니다.

CSS 배우기

Codecademy의 CSS 배우기는 CSS를 사용하여 HTML을 시각적으로 눈길을 끄는 웹사이트로 변환하는 방법을 알려줍니다. 이 과정은 8개의 레슨으로 나뉘며 이해도를 테스트하기 위한 6개의 프로젝트가 있습니다.

이 과정에서 배우게 될 주요 사항은 HTML 요소에 스타일을 추가하는 방법, HTML 및 CSS 파일을 연결하는 방법, 웹 페이지에 대한 고유한 레이아웃을 만드는 방법입니다.

HTML 및 CSS로 첫 번째 웹 페이지 구축

첫 번째 웹 페이지 만들기 과정에서는 HTML5 및 CSS3를 사용하여 반응형 웹 사이트를 만드는 방법을 배웁니다. 이 무료 과정은 4개의 모듈로 제공되며 완료하는 데 약 10시간이 필요합니다. 이 과정을 배우기 위해 프로그래밍에 대한 사전 지식이 필요하지 않습니다.

CSS 기초

CSS 기본은 W3Cx에서 만듭니다. 이 과정에서 배우게 될 몇 가지 사항은 다음과 같습니다. 웹 디자인의 모범 사례, 기본 CSS 선택기 및 CSS 속성을 선택하는 방법. 과정은 5개의 모듈로 나뉩니다. 주당 5-7시간 공부할 때 완료하는 데 약 5주가 필요합니다.

CSS3 소개

CSS3에 대한 이 과정은 Cascading Style Sheets를 소개합니다. 이 과정은 University of Michigan에서 준비했으며 CSS 규칙을 작성하고 좋은 프로그래밍 습관을 확립하고 코드를 테스트하는 방법을 가르칩니다. 완료 시 공유 가능한 인증서와 함께 제공되는 이 과정을 완료하는 데 약 12시간이 필요합니다.

HTML 및 CSS 소개

HTML 및 CSS에 대한 이 입문 과정은 HTML 및 CSS를 사용하여 스타일이 지정되고 잘 구성된 웹 사이트를 만드는 방법을 가르칩니다. 이 과정은 학습자에게 나무와 같은 구조를 사용하여 웹 사이트를 만든 다음 CSS를 사용하여 스타일을 지정하는 방법을 가르칩니다.

이 무료 과정은 초보자에게 적합하며 자기 주도 학습 모델을 사용합니다. 업계 전문가가 가르치는 이 과정을 완료하려면 약 3주가 소요됩니다.

CSS 튜토리얼

CSS Tutorial은 W3schools의 무료 과정입니다. 과정은 쉽게 이해할 수 있도록 장으로 나뉩니다. 각 장에서는 예제와 연습을 제공합니다. 플랫폼에는 “Try it Yourself” 버튼을 통해 다양한 개념을 실험할 수 있는 온라인이 있습니다.

CSS: 최종 가이드

CSS: The Definitive Guide 책은 선택자 및 특이성에서 캐스케이드에 이르기까지 CSS의 기본 사항을 배우려는 경우에 유용합니다. 이 책은 또한 flexbox, positioning, float 트릭을 자세히 설명합니다.

또한 CSS를 사용하여 2D 및 3D 변환, 전환 및 애니메이션을 생성하는 방법을 배우고 싶다면 주문할 책입니다. Definitive Guide는 Kindle 및 페이퍼백 버전 모두에서 사용할 수 있습니다.

HTML5와 CSS를 사용한 반응형 웹 디자인

HTML5 및 CSS를 사용한 반응형 웹 디자인에 관한 이 책은 HTML5 및 CSS를 사용하여 미래에 대비한 반응형 웹 사이트를 만드는 방법을 알려줍니다.

이 책에서 요령을 배운 후에는 여러분이 만든 웹사이트가 데스크톱, 태블릿, 휴대폰에서 완벽하게 실행될 것입니다. 이 책은 따라하기 쉬운 형식으로 작성되었으며 페이퍼백 및 Kindle 형식으로 제공됩니다.

HTML 및 CSS: 웹사이트 디자인 및 구축

HTML 및 CSS에 관한 이 책은 취미 생활자, 학생 또는 전문가 모두에게 이상적입니다.

저자는 다양한 개념을 쉽게 파악할 수 있도록 정보 그래픽과 라이프스타일 사진을 통해 이 책의 내용을 전달한다. 리소스는 고유한 구조로 제공되므로 모든 장을 쉽게 탐색할 수 있습니다.

CSS 마스터를 위한 12가지 최고의 온라인 코스 및 책