HTML-CSS
컴퓨터/HTML&CSS
※ 주의 !
이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다.
문제가 있다면 말씀 부탁 드리겠습니다.
안녕하세요 Gon입니다.
이글에서는 HTML을 이용하여 전자문서를 만드는 과정에서 계속해서 언급된 CSS에 대하여 알아 보겠습니다. CSS를 알게 되면서 조금 더 유용하고 가독성이 좋은 전자 문서를 만들 수 있게 될 것입니다.
CSS는 무엇일까요?
CSS - Cascading Style Sheet의 약자로 HTML을 통해 만드는 전자문서의 계단식 레이아웃을 만들수 있게 도와줍니다.
CSS를 사용하면 단순히 글로 이루어진 전자문서들의 요소들의 크기 형태 색 위치 배경 등을 자유롭게 변경하여 조금 더 효율적인 전자문서가 될 수 있게 도와줍니다.
* 계단식 레이아웃의 의미는 상위 요소에서 설정된 CSS 스타일을 상속받을수 있다는 말 입니다.
CSS 의 사용 방법
CSS는 크게 3가지 방법으로 HTML 문서에 적용할수 있습니다.
- Inline 방식 - 하나의 요소의 속성 값으로 사용하기
- Internal 방식 - 하나의 HTML 웹페이지에 사용하기
- External 방식 - 여러 HTML 웹페이지에 동시에 사용하기
가장 보편적인 방법은 External 방식으로 여러 웹페이지에 동시에 적용을 시키는 방식을 사용합니다.
위 3가지 방법에 대하여 예시를 보여드리도록 하겠습니다.
Inline 방식
웹페이지에 특정 요소에만 CSS 스타일을 적용시키는 방법으로 이전 글에서 종종 사용하였습니다.
style이라는 속성이 바로 CSS를 사용하겠다는 의미입니다.
<h1> 그냥 제목문</h1>
<h1 style="color:blue;">CSS 사용한 제목문</h1>위 코드처럼 하나의 요소에 style 속성을 이용하여 해당 요소를 변경 할 수 있습니다.
Internal 방식
Internal 방식은 하나의 HTML로 작성된 웹페이지에서 특정 요소들의 공통적인 부분을 동일하게 작성하려 사용됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-colr:powderblue;}
h1 {color:blue;}
p {color:red;}
</style>
</head>
<body>
<h1>Internal</h1>
<p>모든 요소들이 동일한 속성을 적용 받습니다</p>
</body>
</html>이런식으로 하나의 HTML에서 공용된 레이어를 사용하기 위해 주로 사용합니다.
External방식
수 많은 웹페이지들을 만들고 이 웹페이지들에 동시에 동일한 CSS스타일을 적용시키고 싶을 때 이 방식을 사용하게 됩니다. 주로 사용하는 이유는 대부분의 웹사이트들이 하나의 웹페이지로 구성되어 있지 않기 때문입니다.
사용 방식은 다음과 같습니다.
- .css 의 확장자를 가진 파일로 코드를 작성한다.
- 사용되는 HTML문서들에 <link> 태그를 통하여 해당 .css 파일을 연결시켜 준다.
<!-- Style.css파일의 내용 -->
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
<!-- 적용할 HTML 파일의 내용 -->
<!DOCTYPE html>
<html>
<head>
<!-- External 방식 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>해당 링크를 통하여</h1>
<p>css 스타일을 불러옵니다..</p>
</body>
</html>위 처럼 link 태그와 속성 값을 이용하여 CSS파일을 만들어 모든 웹페이지에 동일하게 적용시킬 수 있습니다.
다음글에서는 이 CSS에서 레이아웃을 구성하기 위해 사용되는 대표적인 property(속성)값들에 대하여 알아보도록 하겠습니다.
감사합니다.
Gon
'컴퓨터 > HTML&CSS' 카테고리의 다른 글
| HTML-Image(이미지) (0) | 2021.01.19 |
|---|---|
| HTML-Links(링크태그) (0) | 2021.01.11 |
| HTML-Colors (0) | 2020.12.30 |
| HTML Comments(주석) (0) | 2020.12.29 |
| HTML - Quotation Elements(인용 표현의 태그) (0) | 2020.12.23 |
Commnet