생각 작업실 The atelier of thinking

10. <CSS> 란 ? 본문

웹(Web) 이야기

10. <CSS> 란 ?

knowledge-seeker 2024. 2. 15. 10:45

지금까지 <HTML> 태그를 이용하여 웹페이지를 만들어 봤습니다. 텍스트관련 태그, <img>태그, <table> 태그, <a> 태그 등을 이용해서 웹페이지를 작성할 수 있습니다. 하지만, <HTML> 태그만으로는 뭔가 아쉬움이 있습니다. 웹페이지를 보다 풍성하게 꾸미기 위해서는 CSS의 도움이 필요합니다.

1. CSS의 유래

 

초기 웹 문서는 HTML만을 사용하여 구조를 정의했으며, 디자인이나 레이아웃과 관련된 기능은 HTML에 내장되어 있었습니다. 이로 인해 HTML 문서의 구조와 디자인이 강하게 결합되어 있었고, 웹 페이지의 디자인을 변경하려면 모든 페이지의 HTML을 수정해야 했습니다.
CSS는 이러한 구조와 디자인을 분리하고자 하는 요구에 응답하기 위해 개발되었습니다. 1996년에  W3C(World Wide Web Consortium)에서 CSS Level 1이 처음 공식적으로 발표되었습니다.

CSS는 구조(HTML)와 스타일(CSS)을 분리함으로써 웹 문서의 유지보수성과 확장성을 향상시켰습니다. 이를 통해 HTML을 사용하여 문서의 구조를 정의하고, CSS를 사용하여 디자인과 스타일을 담당할 수 있게 되었습니다.

 

2. CSS (Cascading Style Sheets)란?

 

Cascading Style Sheets(CSS)는 HTML이나 XML과 같은 마크업 언어로 작성된 문서의 전반적인 레이아웃, 디자인, 스타일을 정의하는 스타일 시트 언어입니다. CSS는 웹 페이지의 시각적인 표현을 관리하고 개선하기 위해 사용되며, HTML이 문서의 구조를 정의하는 데에 반해 CSS는 문서의 스타일을 정의합니다.

CSS(Cascading Style Sheet)는 HTML 문서의 색이나 모양 등 외관을 꾸미는 언어라고 말할 수 있습니다.

그리고 CSS로 작성된 코드를 스타일 시트(style sheet)라고 부릅니다.

3. CSS의 기능

CSS는 다양한 기능을 제공하여 HTML 문서의 디자인과 레이아웃을 효과적으로 제어합니다. 주요한 CSS의 기능은 다음과 같습니다:

(1) 스타일 지정 (Style Definition)
CSS는 HTML 요소에 대한 스타일을 지정하는 데 사용됩니다. 텍스트의 색상, 글꼴, 크기, 배경 색상 등을 정의할 수 있습니다.
(2) 레이아웃 제어 (Layout Control)
박스 모델을 사용하여 각 HTML 요소의 크기, 여백, 테두리, 패딩 등을 조절하여 전반적인 레이아웃을 제어할 수 있습니다.
(3) 폰트 및 텍스트 스타일링 (Font and Text Styling)
텍스트의 스타일을 조절할 수 있으며, 글꼴, 글자 간격, 텍스트 정렬 등을 설정할 수 있습니다.
(4) 색상 및 배경 관리 (Color and Background Management)
요소의 배경 색상, 테두리 색상, 그림자 효과 등을 지정할 수 있습니다.
(5) 애니메이션 및 전환 (Animation and Transition)
CSS를 사용하여 요소에 애니메이션 및 전환 효과를 부여할 수 있습니다. 예를 들어, 페이드 인/아웃, 이동, 회전 등의 효과를 적용할 수 있습니다.
(6) 반응형 웹 디자인 (Responsive Web Design)
미디어 쿼리를 사용하여 화면 크기에 따라 다른 스타일을 적용함으로써 반응형 웹 디자인을 구현할 수 있습니다.
(7) 플렉스 박스 및 그리드 레이아웃 (Flexbox and Grid Layout)
복잡한 레이아웃을 쉽게 다룰 수 있도록 플렉스 박스와 그리드 레이아웃을 지원합니다.

이러한 기능들을 통해 CSS는 웹 페이지의 시각적인 디자인과 레이아웃을 효과적으로 제어하며, 콘텐츠와 스타일을 분리하여 유지보수성을 높일 수 있습니다.

4. CSS 디자인 구문 구조

(1)선택자(Selectors)
CSS 스타일 시트를 HTML 페이지에 적용하도록 만든 이름입니다.
선택자는 스타일을 적용하려는 HTML 요소(Element)를 정의하는 역할을 합니다.

(2) 속성(Property) 과 값(Value)
선택자에 스타일을 적용하기 위해 속성과 값의 쌍을 사용합니다.
속성과 값의 구분은 콜론(:) 으로 하고, 속성과 값 사이는 세미콜론(;) 으로 구분합니다.
약 200개 정도의 속성이 있습니다. 속성을 전부 다 외우기는 어렵기 때문에 자주 사용하는 속성외에는 필요할 때마다 검색으로 찾으면 됩니다.

CSS 관련 코딩은,
"어떻게 지정해야 선택자를 내가 원하는 위치로 나타낼 수 있을까?",
"원하는 스타일 지정을 위해서 어떤 속성과 어떤 값이 필요할까?" 라는 질문에 대한 답을 찾아가는 것이라 할 수 있습니다.

 

5. HTML 문서에 CSS 스타일 시트를 만드는 법

 

(1) <style> </style>태그를 사용 (내부)
<style> 태그는 <head> 태그 내에서만 사용
<style> 태그에 작성된 스타일 시트는 웹 페이지 전체에 적용

<head>
 <title> 인터넷과 웹(Web) </title>
 <style>
    body { background-color: linen;
           margin: 20px; }           
    h1 { text-align: center; color: blue;} 
    hr { border: 5px solid yellowgreen; }   
 </style>
</head>

 

 

(2) inline - style 속성 사용
HTML 태그 안에 style 속성을 이용하여 CSS 스타일 시트 작성할 수 있습니다.
해당 태그에만 스타일이 적용됩니다.

<body>
    <p style="color: blueviolet;">
    코딩을 시작할 때 <u><b>'HTML'</b></u>를 추천하는 이유는 우리가 매일 접하는 인터넷 
    사용과 밀접한 관계가 있기 때문에 접근하기가 쉽다는 것이 가장 큰 부분입니다. </p>
    <p style="background-color: cadetblue;">
    우리가 인터넷에서 가장 많이 접하는 것인 <mark><ins> 웹(Web) </ins></mark>이라
    할 수 있습니다. 사실 웹(Web) 이란 말은 처음에 익숙하지는 않았습니다. 
    우리가 <i> "인터넷에서 찾아봐"</i> 혹은  "홈페이지에 들어가봐" 라고 말하지 웹사이트를 
    찾아봐, 웹페이지를 확인해봐 등 웹이란 말은 잘 사용하지 않았던 것 같습니다.
    </p>
    <p>
    <u><b>'HTML'</b></u>은 이 웹페이지를 만드는 가장 기초적인 언어입니다. 
    우리가 매일 접하고 있는 웹페이지의 한꺼플 아래 위치해 있습니다. 
    즉, 우리는 매일 <u><b>'HTML'</b></u>을 접하고 있다고 할 수 있습니다. 
    이러한 이유로 HTML로 코딩을 시작한다면 쉽게 입문할 수 있을 것입니다.
    </p>
    <p>
    HTML의 코드를 시작하기 전에 미리 알아두면 좋을 인터넷과 웹에 대한 기본 개념을 먼저 
    알아보도록 하겠습니다.
    </p>
    <hr>
    <h1> 1. 인터넷 (Internet) </h1>
    <p>
    인터넷을 정의한다면 네트워크(Network)를 하나로 묶는 기술이라 할 수 있습니다.
    인터넷은 컴퓨터 네트워크 (Computer Network)이며 네트워크의 네크워크 (Network of network)라
    할 수 있습니다.
    </p>
    <h2 style="text-align: center; color:blueviolet"> (1) 인터넷의 유래 </h2>
    <p>
    인터넷은 1960년에 미국에서 군사적 목적으로 분산된 통신시스템을 구축하는 과정에서
    만들어졌다고 합니다.</p>
    <p>
    1960년대 미국 국방성은 서로 호환되지 않는 육군,해군,공군의 근거리 통신
   (LAN, Local Area Network)을 하나로 묶는 연구를 진행하였다고 합니다.
    1969년 알파넷(ARPAnet, Advanced Research Project Agency net)을 만들어 서로 다른 
    종류의 LAN들을 선으로 연결하였습니다. <br>
    이것이 인터넷의 시초라고 합니다.
    </p>
    <hr>
    <h2> (2) 인터넷 프로토콜(Protocol) - TCP/IP </h2>

 

(3) 스타일 시트를 별도 파일로 작성(외부)

css 확장자로 저장한 스타일 시트를 별도 파일을 불러들여 스타일 시트를 작동시킵니다.

<link> 태그를 이용할 수 있습니다. 

 <link rel="stylesheet" href="mystyle.css" type="text/css">


@import 이용할 수 있습니다.

 

<style>
    @import url('mystyle.css');
 </style>



3가지를 별도로 사용하는 것보다는 조화롭게 같이 사용하는 것이 훨씬 효과가 좋습니다.

'웹(Web) 이야기' 카테고리의 다른 글

12. <CSS> 텍스트 스타일 표현 속성  (0) 2024.02.18
11. <HTML> 요소(Element) 와 <CSS> 선택자 (Selector)  (0) 2024.02.17
9. <HTML> 하이퍼링크 태그 - <a>  (1) 2024.02.11
8. <HTML> <Table> 태그  (0) 2024.01.31
7. <HTML> 이미지 태그 - <image>  (1) 2024.01.30
'웹(Web) 이야기' Related Articles more