CSS란?
- html 구조에 디자인을 입히는 언어.
- Cascading Style Sheets의 약자로 위에서 아래로 흐르는 디자인 시트 언어라는 의미.
- 웹 문서에서 글꼴이나 색상, 정렬, 요소의 배치 등등 겉모습을 결정짓는 디자인 언어.
- css의 가장 큰 특징은 위에서 아래로 속성을 하나씩 적용할 때 동일한 속성이 있으면 아래에 있는 속성을 먼저 적용한다는 것.
외부 스타일시트와 내부 스타일시트와 인라인시트
-
내부 스타일시트는 html 문서안에 <style>태그를 이용해 css를 문서 내부에 작성하는 방법을 말한다.
외부 스타일시트보다 우선순위가 높지만, html에 css속성들이 너무 많이 작성되어 파일길이가 길어지면 유지보수가 더 어렵기 때문에 외부 스타일시트에 주로 사용한다. -
외부 스타일시트는 css라는 폴더를 만들어 그 안에 css파일을 따로 관리하는 것을 말한다.
외부 스타일시트로 관리하면 관련된 파일을 찾기 편하고 유지보수에 훨씬 용이하다는 장점이 있다.
외부 스타일시트는 내부 스타일시트에 비해 우선순위가 낮다. -
인라인시트는 태그에 style이라는 속성으로 직접적으로 스타일을 적용하는 방식을 말한다.
내부 스타일시트보다 우선순위가 높아 태그에 직접 적용한 스타일이 절대적으로 적용된다.
인라인스타일은 가독성이 떨어지고 우선순위가 높아 수정하기가 어려우므로 사용되지 않는다. -
브라우저 기본 스타일시트는 브라우저에 기본적으로 내장되어 있는 스타일시트를 말한다.
h1이나 ul, li등등 태그를 출력했을때 보이는 이 특징들은 모두 브라우저 안에 있는 기본 스타일시트가 적용되어 보이는 디자인이다.
보통 웹페이지를 만들때에는 브라우저 기본 스타일시트를 '초기화'하여 사용한다. -
!important : 특정 속성의 속성값 뒤에 선언하여 사용한다.
어떤 스타일시트 또는 어떤 선택자보다도 우선 순위가 가장 높다.
important가 적용된 속성은 다시 수정할 수 없으며, 강제로 해당 속성을 적용한다.
즉, 유지보수가 어렵기 때문에 조심히 사용해야하는 속성.
ex)선택자{ 속성명 : 속성값 !important ; }
스타일시트 우선순위
css기본 문법
===========<기본형>===========
선택자{
속성명1 : 속성값1 ;
속성명2 : 속성값2 ;
속성명3 : 속성값3 ;
}
==========+======+==========
css 선택자의 우선순위
- css선택자란? 태그를 선택해서 디자인을 적용한다라고 해서'선택자'라고 부름.
- css선택자의 종류로는 'id선택자'(#), 'class선택자'(.), '태그명 선택자', '전체 선택자'(*)로 나누어진다.
다양한 태그나 class나 id를 한꺼번에 불러와 스타일을 적용하고 싶다면
(,)그룹선택자를 사용한다. - 우선순위 : id선택자(#) > class선택자(.) > 태그명 선택자 > 전체석택자(*)
- id선택자는 한 번만 쓸 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 적용해보기</title>
<!-- css -->
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1 style="color:burlywood;">안녕하세요.</h1>
<h2 class="title">제목2</h2>
<h2 class="title" id="logo">제목3</h2>
<h2 class="title">제목4</h2>
<h3>color : 글자 색상</h3>
<h4>font-family : 글꼴</h4>
<h5>font-size: 글자 크기</h5>
<h6>font-style: 글자 스타일</h6>
</body>
</html>/*=== html 페이지에서 연결할 외부 css 파일 === */
@charset "utf-8"; /* 언어 인코딩 모듈*/
/* 전체 선택자 : * */
*{
margin: 0; /*바깥쪽 여백*/
padding: 0; /*안쪽 여백*/
}
/* 태그명 선택자 */
body{
color :rgb(173, 216, 230);
}
h1{
color:brown;
}
/* id 선택자 : #id */
#logo{
color : violet;
}
/* calss 선택자 : .class */
.title{
color:green ;
}
h2{
color:red ; /* 글자색 */
}
/* group 선택자 */
p,span{
color:cadetblue;
}
h3{
color:lightslategray;
color:#00f; /* #000 = #000000 */
color:rgb(32, 54, 77) ;
}
h4{
font-family:'Arial',sans-serif;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
/* 1번째 폰트가 없을 경우 후보로 보여질 폰트를 보여줌 */
}
h5{
font-size:24px; /* px:고정단위 */
font-size:2em; /* em:상대단위 (1em=16px) */
font-size:5vw; /* vw:상대단위 (뷰포트 기준), 반응형 할 때 많이 사용*/
}
h6{
font-style: italic;
font-style: oblique;
}
