CSS 표현하는 4가지 방법

CSS

hyejeong3283 2023. 2. 20. 15:06

728x90

: CSS는 Cascading Style Sheets의 약자로, HTML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다.

글꼴, 배경색, 위치, 너비와 높이 등을 지정하거나 웹 브라우저, 스크린 크기, 장치에 따라서 화면을 다르게 표시될 수 있도록 지정하는 것입니다.

문서의 내용과 표현을 분리하여 CSS파일 하나만 수정하면 스타일에 해당하는 HTML 문서가 한번에 수정됩니다. 웹 페이지 정보와 스타일을 분리하여 유지보수를 수월하게 할 수 있습니다.

정보와 디자인을 분리하여 관리할 수 있습니다.
정보를 수정하지 않고 디자인만 변경할 수 있습니다. (태그마다 style 속성을 주게되면 소스코드가 지저분해 지는데, 부리하여 관리하게 되면 유지보수 및 가독성이 좋아집니다.)
검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문할 수 있도록 유도할 수 있습니다. (시각장애인을 위한 스크린리더 프로그램이 HTML문서를 해석하도록 할 수 있습니다. (웹 접근성))

1. 외부 CSS (external css) : link 태그를 사용하여 별도의 css 파일을 연결하는 방법

<link rel="stylesheet" type="text/css" href="mystyle.css" />

위와 같이 사용하면 외부에 별도의 파일로 되어 있는 CSS정의를 불러올 수 있습니다.

여러 파일이 하나의 CSS 파일을 공유할 수 있어서 표현에 일관성을 갖게 됩니다.

2. 문서안에 포함된 CSS (embeded css) : style 태그 내부에 기입하는 방법

<head>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
}
</style>
</head>

위와 같이 head 요소 안에서 style 요소를 사용하여 문서 안에서 CSS를 정의할 수 있습니다.

3. 요소에 직접 선언(inline css) : 해당 태그의 style 속성에 넣는 방법

<div style="padding: 10px; border: 1px solid #eee;">
	<p>내용</p>
</div>

위와 같이 사용하면 별도의 class를 선언할 필요 없이 HTML 요소에 직접 선언이 가능합니다.

이러한 CSS의 선언방법들을 우선 순위에 따라서 각 요소에 스타일을 적용할 수 있게 해줍니다. 우선순위 별로 나열해보면, 가장 우선순위가 낮은 것은 외부 CSS와 포함된 CSS이고 그 다음이 인라인 CSS 순입니다.

300x250

hyejeong 코딩