“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
CSS 표현방법에 대해
이번엔 CSS의 기본 문법에 대해 알아보려고 합니다!
내부 스타일시트
CSS를 HTML 문서 안에 <styel> 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다.
- 그 스타일이 기술된 페이지에만 적용
[ 예시 1 ]
<!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>[ 예시 1_결과 ]
외부 스타일시트
스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다.
- 스타일은 .css 확장자를 가진 별도의 파일로 저장
- HTML에서는 <link>태그를 이용해 선언
- 그 스타일을 선언한 모든 HTML 페이지에 적용
[ 예시 2 ]
<!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>[style.css]
@charset "UTF-8";
p { color: red; }[ 예시 2_결과 ]
@inmort
css 안으로 다른 css 파일을 불러들일 경우 사용합니다.
- css 맨 윗줄에 기술
[ 예시 3 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>스타일시트 포함</title>
<style type="text/css">
@import url(style.css);
</style>
</head>
<body>
<p>우리를 기쁘게 하는 것들.</p>
</body>
</html>[ 예시 3_결과 ]
[ style2.css ]
@charset "UTF-8";
@import url("common.css")@import는 어떤 css 파일 안에 공통 css를 불러들일 경우에도 사용할 수 있습니다.
인라인 스타일
- 태그에 직접 CSS를 정의해주는 기법
- style=" " 형식으로 기술
- 우선순위가 절대적으로 높아야 할 경우에 사용
- 일일이 html을 열어서 편집해야 해서 많이 사용하지 X
[ 예시 4 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인라인 스타일</title>
</style>
</head>
<body>
<p style="color: fed;">우리를 기쁘게 하는 것들.</p>
</body>
</html>[ 예시 4_결과 ]
오늘은 이렇게 CSS표현 방법에 대해 알아봤습니다!
다음에 다시 만나요~!
반응형