CSS의 기본
왜 스타일을 사용할까?
웹 문서에서 스타일이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킨다.
1. 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다는 아이디어가 바로 웹 표준의 시작이다. 이렇게 내용과 디자인이 구분되어 있을 때 내용을 수정하더라도 디자인에는 영향을 미치지 않아 편리하다.
2. 다양한 기기에 맞게 탄력적으로 바뀌는 문서을 만들 수 있다.
기존 HTML 문서는 출력하는 방식에 따라 그때그때 따로 문서를 만들어야 했지만 CSS를 이용하면 HTML로 작성한 내용은 그대로 두고 대상 기기에 맞게 CSS만 바꿔서 같은 내용을 여러 기기에서 볼 수 있다. 이처럼 여러가지 웹 문서를 따로 만드는 것이 아니라 하나의 웹 문서에서 작동하도록 만드는 것이 바로 스타일의 역할이다.
스타일 시트
스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눌 수 있다.
사용자 스타일
인라인 스타일
간단한 스타일 정보를 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 방법을 인라인 스타일이라고 한다.
<p style="color : red;"> 빨간색 </p>내부 스타일 시트
웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 한다. 모든 스타일 정보는 head 태그 안에서 정의하고 style태그 사이에 작성한다.
<head>
<style>
h1 {
padding : 5px;
background-color : red;
color : white;
}
</style>
</head>
<body>
<h1>내부 스타일 시트</h1>외부 스타일 시트
여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용하는 방식을 사용할때 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라고 하고 .css 라는 파일 확장자를 사용한다.
//CSS 파일
h1 {
padding : 5px;
background-color : red;
color : white;
}//HTML 파일
//외부 스타일 시트를 연결할 때 사용하는 <link>태그
<link rel = "stylesheet" href = "css/style.css">CSS 기본 선택자
전체 선택자
*{ margin:0; } -문서의 모든 요소에 스타일을 적용한다.
타입 선택자
p { font-style : italic; } - 특정 태그를 사용한 모든 요소에서 스타일을 적용한다.
클래스 선택자
.bg { background-color : #ddd; } - 특정 부분만 선택해서 문서 안에 여러 번 적용한다. 마침표(.)를 붙여서 사용한다.
id 선택자
#container { width : 500px } - 특정 부분만 선택해서 문서 안에서 한 번만 적용한다. #을 붙여서 사용한다.
그룹 선택자
h1, h2 { text-align : center; } - 여러 요소에 같은 스타일을 적용할 때 사용한다.
스타일 우선순위
중요도
사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일
적용 범위
스타일 적용 범위가 좁을수록, 즉 정확히 필요한 요소에만 적용할 스타일일수록 우선순위가 높아진다.
!important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일
소스 작성 순서
나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.
태그와 요소는 어떻게 다른가?
태그는 말 그대로 태그 자체를 가리키고, 요소는 태그를 적용한 것을 가리킨다.
<p>텍스트 단락</p>이 소스에서
<p>와</p>태그는 태그 자체를 말하는 것이고 태그를 포함해<p>태그를 적용한 '텍스트 단락' 부분을 p 요소라고 한다. 따라서<p>태그를 적용한 스타일이라는 표현은 태그 자체를 적용하는 스타일이 아니므로 틀린 말이다. p 요소에 적용하는 스타일로 표현하는 것이 맞다.
TIL 12 day
전체적인 내용을 다 보고 TIL을 작성하고 싶었는데 CSS에서 이해해야할 내용이 생각보다 많아서 며칠동안 TIL을 작성하지 못했다.
앞으로는 조금씩이라도 매일매일 공부한 내용을 복습하면서 정리하는 식으로 진행을 해야겠다.😭
