스타일이 필요한 이유
HTML 로만 웹 사이트를 작성하면 단순히 글, 그림 등이 나열된 문서가 됩니다.
그렇게만 사이트를 만들면 예쁘지가 않죠
배경색과, 글씨, 그리고 블록 배치등을 통해 꾸며줘야 평소에 사용하는 웹사이트가 됩니다.
예를들어 네이버 사이트를 본다면
위와 같은 페이지를
이렇게 바꿔줄 수 있다는 거죠.
간단하게 요약하자면, 스타일은 html로 정의된 문서가 실제로 표현되는 방법을 말합니다.
그리고 이를 위해 우리는 css를 사용합니다.
css 란?
css 는 Cascading Style Sheets의 약자로,
HTML 로 정의된 문서가 실제로 표현되는 방법을 정해주는 스타일 시트 언어입니다.
HTML에 적용할 디자인을 따로 분리하여 적용해 놓을수 있으며, 이는 가독성에 도움을 줍니다.
W3C에 의해 권고안이 작성되며, 현재 Level 3까지 존재합니다.
css는 위에서 아래로 적용되며, 아래에서 같은 선언 블록이 존재하면, 위의 선언블록이 무시됩니다.
주의할 점은, 각 브라우저별로, 버전별로 지원하는 css가 다르단 점입니다.
따라서 css 작성 시 해당 브라우저에서 지원하는지 확인해야 합니다.
css의 적용
css 스타일은 인라인 스타일, 임베디드 스타일, 외부 스타일 총 3가지가 존재합니다.
1) 인라인 스타일 : HTML 태그 내에 style을 적용하여 설정합니다.
사용 예시
<div style="color: white; background-color: black; width: 500px; height: 100px;"> 인라인 스타일 </div>
2) 임베디드 스타일 : HTML 태그가 아닌, 파일 내에 독립적인 style 태그를 만들어 입력합니다.
주로 head 태그 내에 style 태그를 입력합니다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width: 1000px;
height: 200px;
color: white;
background-color: blue;
font-size: 20px;
font-weight: bolder;
}
</style>
</head>
<body>
<div> 임베디드 스타일 </div>
</body>
</html>
3) 외부 스타일 : 외부에 css 파일을 만들고 html 에는 link 태그로 연결시킵니다.
css 파일을 따로 관리하게 되므로 유지보수 측면에서 가장 좋습니다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div> 외부 스타일 </div>
</body>
</html>
css의 구조
css 는 선택자와 선언 블록으로 구성되어 있습니다.
선택자란, 스타일을 적용할 HTML 태그를 지정하는데 사용하며
선언 블록은 해당 HTML 태그에 어떤 스타일을 적용하는지 정의합니다.
이를 위해 선언 블록은 속성과 값으로 구성되어 있습니다.
다음 글에서는 우선 선택자부터 알아보도록 하겠습니다.
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| css 알아보기 - 선택자 : 속성과 속성선택자 (0) | 2024.10.02 |
|---|---|
| css 알아보기 - 선택자 : 전체선택자 * 와 타입선택자, class와 id (0) | 2024.09.30 |
| html 알아보기 - 시멘틱 웹과 div 태그 (1) | 2024.09.26 |
| html 알아보기 : 글씨 태그 - inline속성 태그 (0) | 2024.09.24 |
| html 알아보기 : 글 태그 - 제목과 문단, preformat 태그 (0) | 2024.09.23 |
