Chap_06_CSS 기본
CSS 기본
1. 웹 문서에 디자인 입히기
💡 왜 스타일을 사용할까?
-
HTML로는 웹 사이트의 내용을 나열하고,
CSS로는 웹 문서의 디자인을 구성!- 스타일을 사용하면 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
- 스타일을 사용하면 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
-
다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.- 반응형 웹 디자인
반응형 웹 디자인 예시 )
PC화면
모바일 화면
💠 네이버 화면만 봐도, PC 화면과 모바일 화면을 각 기기에 맞게 알맞게 보여준다!
2. 스타일과 스타일 시트
스타일 형식 알아보기
- 스타일 형식
선택자 {
속성1 : 속성값1; 속성2: 속성값2;
}
스타일 규칙 작성 방법
중괄호 { } 사이에 스타일 규칙 나열- 규칙이 여러 개일 경우
세미콜론 ; 으로 구분
스타일 주석
/* 와 */ 사이에 주석 내용 입력- 한 줄 또는 여러 줄을 입력 가능
- 단축키 : control + /
스타일 시트
- 브라우저 기본 스타일
브라우저에서 기본으로 적용하는 스타일- 웹 문서에서 아무 스타일도 적용하지 않고 HTML만 사용해도 그 기능에 따라 크기에 맞게 보여줌.
- 인라인 스타일
- 스타일 시트를 사용하지 않고
스타일을 적용할 대상에 직접 표시 - 스타일을 적용하고 싶은 태그에 style 속성을 사용해
style=”속성: 속성 값;”형태로 스타일 적용
- 내부 스타일 시트
- 웹 문서 안에서 사용할
스타일을 문서 안에 정리한 것 - 모든 스타일 정보는
<head> 태그와 </head> 태그 안에서 정의 <style> 태그와 </style> 태그 사이에 작성(위에 예시들 참고 바람!)
- 외부 스타일 시트
- 여러 웹 문서에서 사용할
스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용 <style>태그 없이<link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일 연결
3. CSS 기본 선택자
전체 선택자
- 페이지에 있는
모든 요소를 대상으로 스타일을 적용할 때 사용 - 웹 브라우저의
기본 스타일을 초기화할 때 자주 사용 - 필자는 margin 0 이나 font-family를 사용할 때 자주 사용했음.
<style>
/* 전체 선택자 (*) */
* {
margin:0;
padding:0;
}
</style>타입 선택자
- 문서에서
특정 태그를 사용한 모든 요소에 스타일이 적용됨
<style>
/* 타입 선택 -> p 태그 선택함 */
p {
color: blue;
font-style: italic;
}
</style>
<body>
<div>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 ……</p>
<p>레드향은 한라봉과 귤을……</p>
<p>비타민 C와 비타민 P가……</p>
</div>
</body>
</html>
class 선택자
- 요소의
특정 부분에만 스타일 적용 마침표( . )다음에 클래스 이름 지정- 문서 안에서
여러 번반복할 스타일이라면 class 선택자로 정의
<style>
/* class 선택자는 class 이름 앞에 .을 붙여서 사용 */
.accent_bg {
color: red;
}
.accent {
background-color: blue;
color: white;
font-style: italic;
}
</style>
<body>
<div>
<h1 class="accent_bg">레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>
이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 ...</p>
<p>비타민 C와 비타민 P가 풍부해 ...</p>
</div>
</body>
</html>
id 선택자
- 요소의
특정 부분에만 스타일 적용 파운드( # )다음에 id이름 지정- 문서 안에서
한 번만사용한다면 id 선택자로 정의
<style>
/* id 선택자는 id 이름 앞에 #을 붙여서 사용 */
#container {
width: 500px;
margin: 10px auto;
border: 2px solid blue;
}
</style>
<body>
<div id="container">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향</span>
이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 ...</p>
<p>비타민 C와 비타민 P가 풍부해 ...</p>
</div>
</body>
</html>
선택자를 묶어 사용하기
같은 스타일을 사용하는 선택자를 한꺼번에 정의쉼표 ( , )로 구분해 여러 선택자를 나열
<style>
/* accent_bg class와 accent class를 동시에 사용 */
.accent_bg,
.accent {
color: red;
}
</style>
<body>
<div>
<h1 class="accent_bg">레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>
이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 ...</p>
<p>비타민 C와 비타민 P가 풍부해 ...</p>
</div>
</body>
</html>
4. 캐스케이딩 스타일 시트
캐스케이딩(Cascading)의 의미
- 캐스캐이딩 (Cascading) : ‘위에서 아래로 흐른다’는 뜻.
즉 계단식으로 적용된다는 의미로 사용 - 여러 스타일이 적용될 때
스타일 충돌을 막기 위해 우선순위에 따라 적용할 스타일을 결정함.💥 참고
스타일 시트에서 ‘캐스캐이딩’은 가장 기본적인 개념이기 때문에
일반적으로 ‘스타일 시트’는 ‘캐스캐이딩 스타일 시트(CSS)’와 같은 의미로 사용됨
스타일 충돌을 막는 캐스캐이딩의 원칙
- 스타일 우선순위 -
스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용 - 스타일 상속 - 태그들의 포함 관계에 따라
부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
캐스케이딩의 원칙
- 스타일 우선순위
- 중요도에 따른 우선순위 :
사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일
사용자 스타일 : 시스템에서 만든 스타일. 사용자가 제어할 수 없음
제작자 스타일 : 웹 사이트를 만들 때 제작자가 만든 스타일
브라우저 스타일 : 브라우저의 기본 스타일
- 한정된 범위에 따른 우선순위 :
1. !important : 어떤 스타일보다 우선 적용되는 스타일
2. 인라인 스타일 : 해당 태그에만 적용되는 스타일
3. id 스타일 : 특정 요소에만 적용되며 문서에서 한 번만 사용됨.
4. 클래스 스타일 : 특정 부분에 반복해서 적용 가능.
5. 타입 스타일 : 같은 태그에 모두 적용됨.
- 소스 순서에 따른 우선순위:
- 소스에서나중에 작성된 스타일이 먼저 작성된 스타일을 덮어씌움.
- 중요도와 명시도가 같아면소스 순서에 따라 결정
- 중요도에 따른 우선순위 :
코드 예시 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지 찾아가기</title>
<style>
p { color: black; }
h1 { color: brown !important; }
p { color: blue; }
</style>
</head>
<body>
<h1 style="color:green">레드향</h1>
<p style="color:red;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로...</p>
</body>
</html>결과 )
- !important를 사용하였기 때문에 h1에는 인라인 스타일로 color:green을 주었음에도 color:brown이 유지됨.
- 같은 요소에 여러 스타일이 적용될 경우, 나중에 선언된 스타일이 우선 적용됨.
- 코드 예시에서 p태그를 처음에는 color:black 두번째에는 color:blue로 선언하였기 때문에
<p>레드향은~~ 부분은 blue로 바뀜.
하지만<p>껍질에 ~~ 부분은 인라인 스타일로 바로 옆에서 스타일을 적용하였기 때문에, 해당 부분은 red로 바뀜.
- 스타일 상속
- 자식 요소에서 별도로 스타일을 지정하지 않으면
부모 요소에 있는 스타일 속성들이 자식 요소로 전달됨. - 상속을 이용하면
스타일 시트를 효과적으로 만들 수 있음. - 주의할 것은 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니라는 점! ( 예를 들어, 글자 색상은 상속되지만 배경색상은 상속되지 않음. )
Hi