[CSS]기본 사용법(Tutorial)
*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.
CSS(Cascade Style Sheet)는 웹 사이트의 스타일을 정의하는 언어이다.
프론트 개발을 공부하다 보면 생각보다 css가 쉬운데 싶다가도
직접 개발을 해보면 css에서 제일 많이 막힌다.
내가 생각했던 것 처럼 움직이지도 않고
내가 생각하지 않았던대로 움직이기도 한다.
오늘도 웹 페이지에 CSS를 적용하다가 키보드를 몇번 내려칠뻔 하기도 했다.
CSS의 기본적인 동작은 다음과 같다.
(1) 스타일을 적용할 HTML 문서의 요소를 선택
(2) 적용할 스타일 정의
이 두 단계로 웹 페이지에 스타일을 적용할 수 있다.
1. CSS의 기본 구조
h1 {
color : black;
border : 1px solid red;
}
위 예제를 보면 h1 태그의 모든 요소들을 선택해서,
폰트 색을 검정으로, 테두리를 1px 두께의 빨간 직선으로 설정한 것이다.
그러면 여기서 우리가 배워야 할 것은 두가지로 나눌 수 있다.
h1처럼 요소를 선택하는 방법. 즉 선택자에 대해서 배울 것이고
두번째로, color와, border와 같이 스타일을 적용할 수 있는 스타일 속성의 종류이다.
선택자의 종류에는 태그 선택자, 아이디 선택자, 클래스 선택자 .... 매우 다양하다.
이는 선택자를 주제로 다루는 게시물에서 더 자세하게 알아보도록 하자.
2. CSS 사용법
CSS는 세가지 방법으로 정의할 수 있다.
- 인라인(Inline) CSS
HTML 요소 내에서 직접 스타일을 정의하는 방식
<p style="color: red;">이 텍스트는 빨간색입니다.</p>
- 내부(Internal) CSS
<head>섹션 내에서 <style>태그를 사용하여 스타일을 정의하는 방식
<style>
p {
color: blue;
}
</style>
- 외부(External) CSS
별도의 CSS 파일을 만들어 HTML 문서에서 이를 링크하여 사용하는 방식
<head>섹션 내에서 링크하면 된다.
<link rel="stylesheet" type="text/css" href="styles.css">
3. CSS 관련 페이지(템플릿)
CSS는 생각보다 개발을 할 때 진짜 어렵다. ( 나만 그럴 수도 있다 )
그래서 주로 W3Schools 페이지를 참고하면서 작업을 하고 있다.
CSS에 대한 다양한 예제와 함께 기능에 대해 자세히 설명되어 있고,
CSS 뿐만 아니라 HTML, JavaScript 등 다양한 자료를 얻을 수 있다.
그리고, 이미 HTML과 CSS를 이용해 만들어 놓은 템플릿을 제공하는 사이트도 많다.
위에서 설명한 W3Schools에서도 무료 템플릿을 제공하고 있으며, 그 외에 아래 사이트들이 있다.
: 다양한 무료 반응형 디자인을 제공한다.
: 다양한 무료 HTML5와 CSS 템플릿을 제공하며, 반응형 디자인과 다양한 테마, 스타일을 포함한다.
: 수많은 무료 CSS 템플릿을 제공하며, 다양한 디자인과 레이아웃을 선택할 수 있다.
: 무료로 사용할 수 있는 부트스트랩 기반 템플릿을 제공한다.
: 다양한 무료 CSS 템플릿을 제공하며, HTML5와 CSS3로 제작된 반응형 템플릿이 많다.
: 부트스트랩을 기반으로 한 무료 템플릿을 제공하며, 다양한 디자인과 기능을 갖춘 템플릿이 많다.