CSS

yujina25·2020년 12월 8일
0

CSS

목록 보기
1/1

CSS(Cascading Style Sheet)란?

HTML, XHTML, XML 같은 마크업 언어의 스타일을 부여할 때 사용하는 스타일 시트.


HTML의 속성만으로는 사용자가 원하는 디자인을 구현해 낼 수는 없다. CSS는 HTML로 완성될 웹을 디자인하는 언어이다. CSS도 버전이 다양한데, 기본적으로 CSS(1)을 사용한다. 기본적인 기능들이 있지만 업데이트 된 기능은 사용할 수 없다. 하지만 대부분의 브라우저가 지원하기 때문에 CSS(1)이 아직까지도 기본으로 사용된다.

CSS를 HTML에 적용하는 방법

1. inline-style

태그에 직접 style 속성을 작성하는 방법이다.

<input type="text" style="background-color:gray; color:blue;">

[장점]
가장 확실하고 정확한 스타일을 부여할 수 있다.

[단점]
중복된 스타일이 발생할 수 있다.
개별적으로 스타일이 부여되어 유지보수가 어렵다.
가독성이 떨어진다.

2. embedded

head영역에 style태그를 생성하여 선택자{이름:값;}의 형태로 스타일을 부여하는 방법이다.

<head>
	<style>
    	input{
        	color:black;
        }
	</style>
</head>

[장점]
모든 태그에 적용할 수 있는 공통 스타일을 부여할 수 있다.
가독성이 향상한다.

[단점]
태그에 부여되는 스타일의 구분에 문제가 발생할 수 있다.

2번과 같이 작성한 style 태그 내부의 스타일들을 별도의 css파일을 생성하여 저장한다. HTML문서에서 link 태그를 이용하여 스타일을 적용하는 방법이다. 별도의 css파일을 생성할 때에는 .css의 확장자를 넣어줘야 한다.

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

디테일하고 복잡한 스타일을 부여할 때는 2번을 사용하여 스타일을 작성하고, 작성한 디자인은 css파일에 저장하여 언제든지 불러와서 사용할 수 있게 하는 것이 편리하다.

profile
개발자 코앞

0개의 댓글