CSS 기본 문법
css(cascading style sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일 시트 등이 있습니다.
실제로는 외부 스타일 시트를 많이 사용하는 편이지만 간단한 스타일은 내부 스타일 시트 만으로 사용할 수 있습니다. 또한 인라인 시트는 거의 사용하지 않지만 가장 우선 순위가 높아서 꼭 필요한 경우는 간단하게 사용할 수 있습니다.
01. 내부 스타일 시트
CSS를 HTML 문서 안에 <style> 태그를 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일 시트</title>
<style type="text/css">
p { color: blueviolet;}
</style>
</head>
<body>
<p>우리를 기쁘게 하는 것들</p>
</body>
</html> 확인하기
우리를 기쁘게 하는 것들
02. 외부 스타일 시트
스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고 HRML에서는 < link >태그를 이용하여 선언합니다.
내부 스타일 시트는 그 스타일이 기술된 페이지에만 적용되는 반면, 외부 스타일 시트는 그 스타일을 선언한 모든 HTML 페이지에 적용 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일 시트</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>우리를 기쁘게 하는 것들</p>
</body>
</html>
@charset "utf-8"
p { color : blueviolet; } 확인하기
우리를 기쁘게 하는 것들
03. import
@import는 CSS안으로 다른 CSS 파일을 불러들일 경우 사용합니다 CSS의 맨 윗중에 기술합니다.
<!DOCTYPE html>
<html lang="ko"><
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일 시트</title>
<style type="text/css">
@import url("style.css")
</style>
</head>
<body>
<p>우리를 기쁘게 하는 것들</p>
</body>
</html>
@charset "utf-8"
@import url("common.css") 확인하기
우리를 기쁘게 하는 것들
또한 @import는 공통으로 들어가야할 스타일을 따로 저장하여 다른 CSS에 삽인시켜 사용할 수 있도록 해줍니다.
04. 인라인 스타일
인라인 스타일은 태그에 직접 CSS를 정의해주는 기법으로 해당 요소에 style = "" 형식으로 기술됩니다.
우선 순위가 절대적으로 높아야 할 경우 사용할 수 있으나 스타일을 공통 css로 수정할 수 없고 일일이 html을 열어서 편집해야하는 단점이 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일 시트</title>
</head>
<body>
<p style = " color = blueviolet ">우리를 기쁘게 하는 것들</p>
</body>
</html> 확인하기
우리를 기쁘게 하는 것들
댓글