728x90
반응형
CSS기본문법
CSS기본 문법에 대해 설명드리겠습니다.
내부 스타일시트
CSS를 HTML문법 안에 <style> 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<style type = "text/css">
p { color : red ; }
</style>
</head>
<body>
<p>우리를 기쁘게 하는 것들</p>
</body>
</html>
p { color : red ; }의 의미는 p태그 안의 글자 색상을 빨간색으로 설정하라는 뜻입니다.
결과보기
우리를 기쁘게하는 것들.
외부 스타일시트
스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장
자를 가진 별도의 파일로 저장하고, HTML에서는 <link> 태그를 이용하여 선언합니다.
내부 스타일시트는 그 스타일이 기술된 페이지에만 적용돠는 반면, 외부 스타일시트는 그 스타일을 선언한 모든 HTML페이지에 적용 됩니다.
▶css 파일의 상단에는 @charset "utf-8"; @charset "euc-kr"; 등 html 문서에서 지정한 것과 동일한 문자셋을 지정합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>외부 스타일시트</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>우리를 기쁘게 하는 것들.</p>
</body>
</html>
@charset "utf-8";
p {color: red; }
결과보기
우리를 기쁘게하는 것들.
@import
@import는 CSS안으로 다른 CSS 파일을 불러들일 경우 사용합니다. CSS의 맨윗줄에 기술합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>스타일시트 포함</title>
<type="text/css">
@import url("style.css");
</head>
<body>
<p>우리를 기쁘게 하는 것들.</p>
</body>
</html>
@charset "utf-8";
@import url("common.css");
결과보기
우리를 기쁘게하는 것들.
인라인 스타일(inline style)
인라인 스타일은 태그에 직접 css를 정의해주는 기법으로, 해당 요소에 style="" 형식으로 기술합니다.
인라인 스타일은 내부스타일이나 외부스타일에서 기술된 속성보다 우선으로 적용되므로 우선순위가 절대적으로 높아야 할 경우 사용
할 수 있으나, 스타일을 공통 css로 수정할 수 없고 일일이 html을 열어서 편
집해야 하므로 일반적으로 많이 사용하지는 않습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인라인 스타일</title>
</head>
<body>
<p style="color: red;">우리를 기쁘게 하는 것들.</p>
</body>
</html>
결과보기
우리를 기쁘게하는 것들.
반응형
'CSS' 카테고리의 다른 글
| CSS-SCSS정리 (5) | 2022.08.18 |
|---|---|
| CSS활용 - SCSS를 이용한 애니메이션 만들기 (8) | 2022.08.18 |
| 미디어쿼리(mediaquery) (6) | 2022.08.15 |
| 비트맵(Map of bits)과 벡터방식(Vector) (9) | 2022.08.10 |
| Layout (6) | 2022.07.25 |
