웹 디자인에는 CSS를 사용함. 웹 문서의 디자인을 구성하는 것이 CSS!
스타일과 스타일 시트
선택자 {속성1: 속성값1; 속성2: 속성값2; }
□ 중괄호 안에 스타일 정보 작성
□ 스타일 규칙 : 속성과 값이 하나의 쌍으로 이루어진 것. 세미콜론으로 구분하여 여러 개 작성 가능
□ 선택자 : 웹 문서에서 어느 부분에 스타일을 적용할지 알려주는 것
p {
text-align : center;
color : blue;
}p를 선택자로 지정하여 스타일 지정. 텍스트 정렬을 지정하는 text-align을 통해 중앙 정렬하고 글자색은 파란색으로 지정
+ ) css는 네트워크를 통해 파일로 내려받으므로 되도록이면 파일 크기가 작은 것이 좋다.
□ 스타일 시트 : 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한군데 묶어 놓은 것
① 인라인 스타일 : 스타일 시트를 따로 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 것
<h1>레드향</h1>
<p style="color : blue;">껍질에 붉은 빛이 돌아 레드향이라고 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로..</p>
② 내부 스타일 시트
: 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것. <head> 태그 안에서 <style> </style> 태그를 이용하여 작성한다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html</title>
<style>
h1 {
padding : 10px;
background-color: #222;
color: #fff;
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라고 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로..</p>
</body>
③ 외부 스타일 시트
: 사이트 제작 시 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용함. 이렇게 별도로 저장해 놓은 스타일 정보. *.css 라는 파일 확장자 사용
□ <style> 태그 사용하지 않음
□ 웹 문서에 연결 필요. <link> 태그 사용
<link rel = "stylesheet" href="외부 스타일 시트 파일 경로">
※ style.css 파일
h1 {
padding : 10px;
background-color: #222;
color: #fff;
}
※ html 파일
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라고 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로..</p>
</body>
결과는 위와 동일
CSS 기본 선택자
① 전체 선택자 : 스타일을 문서의 모든 요소에 적용할 때 사용. *(별표)를 작성
* { 속성 : 값; }□ 웹 브라우저 기본 스타일 초기화 시 자주 사용
□ margin, padding 등의 여백 조절 등에 주로 사용
+) 태그와 요소는 약간 다르다. 태그는 <p>, </p>를 말하는 거고, 요소는 <p>, </p> 태그 안에 있는 말을 p 요소라고 부름.
② 타입 선택자 : 특정 태그를 사용한 모든 요소에 스타일 적용. 태그명 사용
p {
font-style : italic;
}<p> 태그 모두 적용
③ 클래스 선택자 : 특정 부분만 선택해서 스타일을 적용.
□ 같은 태그라도 일부는 다른 스타일을 적용하고 싶을 때 사용한다.
□ class="클래스명"
□ 클래스 이름을 이용해서 다른 선택자와 구별함.
□ 클래스 이름 앞에 마침표(.)는 필수
.클래스명 { 스타일 규칙 }.bg { background-color : #ddd }
④ 아이디 선택자 : 위와 마찬가지로 웹 문서의 특정 부분 지정하여 스타일 지정
□ # 기호 사용
□ id="아이디명"
#아이디명 { 스타일 규칙 }#container { width : 500px; }
⑤ 그룹 선택자 : 여러 선택자에서 같은 스타일 규칙을 사용할 때 쉼표를 이용해 여러 선택자를 나열하여 스타일 규칙을 한 번만 정의함
선택자 1, 선택자 2 { 스타일 규칙 }h1, p {
text-align : center;
}
스타일 우선순위
□ 가장 중요한 것은 사용자 스타일로, 그 다음으로 제작자 스타일, 브라우저 기본 스타일이 따라 온다.
□ 만약 중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있다.
□ 필요한 요소에만 정확히 적용할 스타일일수록 우선순위 높음 (=스타일 적용 범위 좁음)
[우선순위 높은 순]
① !important : 어떤 스타일보다도 우선 적용
② 인라인 스타일 : 태그 안에 style 속성을 이용해 해당 태그만 스타일 적용
③ id 스타일 : 지정한 부분에만 적용되며, 한 문서에 한 번만 적용 가능
④ 클래스 스타일 : 지정한 부분에만 적용. 여러 번 적용 가능
⑤ 타입 스타일 : 웹 문서에 사용한 특정 태그에 스타일 똑같이 적용
□ 중요도도, 적용범위도 같다면 스타일을 정의한 소스 순서로 우선순위 정함. 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓰므로 나중에 작성한 스타일이 적용된다.