CSS 는 Cascading Style Sheets 의 줄임말로 계단식 스타일 시트이다.
CSS는 많은 일을 저장하며, 모든 웹페이지 레이아웃을 제어할 수 있다.
What is CSS?
CSS 는 웹페이지 레이아웃 형식을 지정하는데 사용되며, 다음과 같은 것들을 제어할 수 있다.
- 색깔
- 폰트
- 텍스트 크기
- elements사이의 간격
- elements 배치 및 배치 간격
- 사용할 배경 이미지 또는 배경 색상
- 다양한 장치 및 화면 크기에 대한 다양한 디스플레이
- 그 외
*** 알아두기 !!
cascading(계단식)단어는 부모 element에 적용된 스타일이 부모의 자식 element에도 적용됨을 의미한다. 그래서 만약 body 텍스트의 색상을 파란색으로 설정하면 body내에 모든 elements가 동일한 색상으로 적용된다.(단, 다른 항목을 적용하지 않는 다는 가정에서 성립힌다.)
Using CSS?
HTML문서에 CSS를 적용하는 방식은 다음 3가지가 있다.
Inline: HTML element에서 style attribute를 사용한다.Internal: head섹션에서 style element를 사용한다.External: link element를 사용하여 외부의 CSS파일에 연결하여 사용한다.
자세한 설명은 다음과 같다.
Inline CSS?
Inline CSS 는 하나의 HTML element에 고유한 스타일을 적용한다.
Inline CSS는 HTML element의 style attribute 를 사용한다.
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>위의 예에서 h1 element는 파란색의 텍스트 색상이며 p element의 텍스트 색상은 빨간색이다.
style태그 는 어떤 element에도 적용하여 사용할 수 있다.
Internal CSS?
Internal style sheet(내부 스타일 시트) 는 하나의 HTML 페이지의 스타일을 정의한다.
Internal CSS는 HTNL페이지에 head섹션 내에 style element내에 정의 된다.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>위의 예는 작성되고 있는 페이지 내에서 모둔 h1 elements의 텍스트 색상은 파란색이며, 모든 p elements의 색상은 빨간색이다. 또한 페이지의 배경색은 powderblue색상으로 표현된다.
External CSS?
External style sheet(외부 스타일 시트) 는 많은 HTML페이지의 스타일에 적용된다.
External style sheet를 사용하기 위해서 HTML페이지의 head 섹션에 링크를 추가 한다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>외부 스타일 시트는 텍스크 편집기 에의해 쓰여질 수 있다. 파일에 반드시 어떤 HTML코드라도 포함되면 안되며, .css확장자 로 저장해야만 한다.
즉, 위에 예시의 html코드의 색깔이나 폰트, 배경색 등등은 styles.css파일에 지정해놓은 설정이 적용된다.
아래는 styles.css파일의 내용이다.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}*** 알아두기 !!
외부 스타일 시트를 사용하면 하나의 파일만을 변경하여 전체 웹사이트의 모양을 변경할 수 있다.
만약, 이처럼 html파일와 css파일을 분리하여 사용하지 않는다면 각 elements마다 원하는 모양을 직접 설정을 해야하기 때문에 불편함이 있다. 따라서 외부 스타일 시트를 사용하는 것은 매우 유용하다.
CSS Colors, Fonts and Sizes?
다음은 일반적으로 사용되는 몇가지 CSS 속성이다. 뒤에 더 자세히 공부할 것이다.
CSS color: 사용할 텍스트 색상을 정의한다.CSS font-family: 사용할 폰트를 정의한다.CSS font-size: 사용할 텍스트 크기를 정의한다.
이러한 속성을 사용한 예는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>CSS Border?
CSS border 는 HTML element를 둘러싼 선을 정의한다.
p {
border: 2px solid powderblue;
}
CSS Padding?
CSS Padding 은 텍스트와 선(border)사이의 간격을 정의한다.
p {
border: 2px solid powderblue;
padding: 30px;
}
CSS Margin?
CSS Margin 은 border밖에 공간여백을 정의한다.
p {
border: 2px solid powderblue;
}Link to External CSS?
외부 스타일 시트는 현재 url 또는 현재 웹페이지와 관련된 경로를 참조할 수 있다.
다음은 주소의 경로에 대한 세가지 예시이다.
완전한 full url인 경우
<link rel="stylesheet" href="https://www.naver.com/html/styles.css">외부 스타일 시트가 현재 웹사이트의 html 폴더에 있는 경우
<link rel="stylesheet" href="/html/styles.css">외부 스타일 시트가 현재 웹페이지와 동일한 폴더에 있는 경우
<link rel="stylesheet" href="styles.css">요약
style: attribute로 하나의 element를 스타일링하고 싶을 때 사용< style >: element로 내부의 CSS를 결정< link >: element로 외부의 CSS파일을 참조< head >: element로 < style >와 < link > elements를 저장color: 텍스트 컬러를 결정font-family: 텍스트 폰트를 결정font-size: 폰트 사이즈를 결정border: elements를 감싸는 선을 만듦padding: border 내부의 여백을 결정margin: border 외부의 여백을 결정
CSS에 대해서는 html시리즈와 구분하여 CSS시리즈에서 따로 자세하게 공부할 예정이다.
