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>[장점]
모든 태그에 적용할 수 있는 공통 스타일을 부여할 수 있다.
가독성이 향상한다.
[단점]
태그에 부여되는 스타일의 구분에 문제가 발생할 수 있다.
3. css file(link)
2번과 같이 작성한 style 태그 내부의 스타일들을 별도의 css파일을 생성하여 저장한다. HTML문서에서 link 태그를 이용하여 스타일을 적용하는 방법이다. 별도의 css파일을 생성할 때에는 .css의 확장자를 넣어줘야 한다.
<link rel="stylesheet" type="text/css" href="./css/main.css">디테일하고 복잡한 스타일을 부여할 때는 2번을 사용하여 스타일을 작성하고, 작성한 디자인은 css파일에 저장하여 언제든지 불러와서 사용할 수 있게 하는 것이 편리하다.
iOS 주니어개발자