고정 헤더 영역
상세 컨텐츠
본문
CSS ( = Cascading Style Sheets ) 란?
HTML 요소를 꾸며 주는 역활을 합니다. CSS를 사용하는 이유는 HTML 요소를 쉽고 빠르게
스타일을 지정할 뿐아니라 나중에 유지 및 변경에도 매우 편리하기 때문입니다.
그럼, 본격적으로 배워 볼까요?
CSS는 3가지 방법으로 사용할 수 있습니다.!!
1, 인라인 스타일 ( Inline Style )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Inline Style</title>
</head>
<body>
<p style= "color: red; font-size: 20px">
인라인 스타일 적용</p>
</body>
</html>바로 위에 " <p style= "color: red; font-size: 20px"> 인라인 스타일 적용</p> " 부분이
인라인 스타일로 적용하는 방법입니다. <p> </p> 부분은 단락을 의미합니다. p => paragraph
2, 내부 스타일 ( Internal Styel Sheet )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Internal Style Sheet</title>
<style>
body { background-color: silver; }
</style>
</head>
<body>
<h1>Let's learn CSS</h1>
</body>
</html>위에 <style> </style> 안에 코드를 삽입하여 적용하는 방법입니다.
body부분의 배경을 silver색으로 한다는 뜻이네요.
3, 외부 스타일 ( External Style Sheet )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS External Style Sheet</title>
<link rel="stylesheet" type="text/css" href="css/repeat_1.css">
</head>
<body>
<h1>Let's learn CSS</h1>
</body>
</html><head> </head> 부분에 <link> 코드로 외부에 있는 CSS 소스코드를 가져와 적용하는 방법입니다.
CSS를 사용하는 대부분의 사용자들은 이 외부스타일 방법을 주로 사용합니다.
위 내용 <link rel="stylesheet" type="text/css" href="css/repeat_1.css">에서
- rel은 연결하는 문서 ( 외부 문서 CSS ) 와의 관계를 표시하는 것 입니다.
( stylesheet는 스타일 시트로 연결한다는 뜻 입니다. )
- type은 css 파일의 경우는 text/css,
js 파일의 경우는 text/javascript xml 파일의 경우는 application/xml 입니다.
- href 은 실제 CSS 소스코드 파일의 위치를 이야기 합니다.
그러면 외부에 있는 CSS 소스코드는 어떤 식으로 작성이 될까요 ?
@charset "EUC-KR";
*{
margin: 0;
padding: 0;
font-family: Century Gothic;
}이런 식으로 작성이 됩니다.
여기서 @charset 은 어떤 언어를 사용하는지 결정하는 겁니다.
( 즉, 스타일 시트에 쓰이는 문자 인코딩을 지정하는 것 입니다. )
*{ } 코드 부분은 html 전체요소를 대상으로 하는 것을 의미합니다.
( 즉, html 특정 요소가 아닌 모든 요소에 적용한다는 말 )
'IT > Programming' 카테고리의 다른 글
| [html/css] 선택자 사용법 ( 종류들 ) 2편 (0) | 2020.07.09 |
|---|---|
| [html/CSS] 선택자 사용법 ( 종류들 ) 1편 (0) | 2020.07.09 |
| [html/css] 의사클래스 ( a:link, a:visited, a:active, a:hover) 사용법 (0) | 2020.07.08 |
| C언어, C++, Java, Python 장단점 / 선택 / 활용분야 (0) | 2020.06.11 |
댓글 영역