웹 문서에 디자인 입히기
스타일을 사용하는 이유
HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다.
-> 스타일을 사용하면 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
스타일과 스타일 시트
스타일 형식 알아보기
스타일 규칙 작성 방법
- 중괄호 {} 사이에 스타일 규칙을 나열한다.
- 규칙이 여러 개일 경우 세미콜론(;) 으로 구분한다.
스타일 주석
- /*와 */ 사이에 주석 내용 입력
- 한 줄 또는 여러 줄을 입력 가능
스타일 시트
브라우저 기본 스타일
- 브라우저에서 기본으로 적용하는 스타일
- 웹 문서에서 아무 스타일도 적용하지 않고 HTML만 사용해도 그 기능에 따라 크기에 맞게 보여준다.
인라인 스타일
- 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
- 스타일을 적용하고 싶은 태그에 style 속성을 사용해 style = "속성 : 속성 값;" 형태로 스타일 적용
내부 스타일 시트
- 웹 문서 안에 사용할 스타일을 문서 안에 정리한 것
- 모든 스타일 정보는 <head> 태그와 </head> 태그 안에서 정의
- <style> 태그와 </style> 태그 사이에 작성
외부 스타일 시트
- 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용한다.
- <style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연결한다.
CSS 기본 선택자
전체 선택자
- 페이지에 있는 모든 요소를 대상으로 스타일을 적용할 때 사용한다.
- 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용한다.
타입 선택자
- 문서에서 특정 태그를 사용한 모든 요소에 스타일이 적용됨.
class 선택자
- 요소의 특정 부분에만 스타일 적용
- 마침표(.) 다음에 클래스 이름 지정
- 문서 안에 여러 번 반복할 스타일이라면 클래스 선택자로 정의
id 선택자
- 요소의 특정 부분에만 스타일 적용
- 파운드(#) 다음에 id 이름 지정
- 문서 안에서 한번만 사용한다면 id 선택자로 정의한다.
그룹 선택자
- 같은 스타일을 사용하는 선택자를 한꺼번에 정의
- 쉼표(,)로 구분해 여러 선택자를 나열
캐스케이딩 스타일 시트
캐스케이딩의 의미
- 캐스케이딩(Cascading) : '위에서 아래로 흐른다'는 뜻. 즉 계단식으로 적용된다는 의미로 사용.
- 선택자에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 우선순위에 따라 적용할 스타일을 결정함.
스타일 충돌을 막는(캐스캐이딩)의 원칙
1. 스타일 우선순위 - 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용
2. 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
# 스타일 시트에서 '캐스케이딩' 은 가장 기본적인 개념이기 때문에 일반적으로 '스타일 시트'는 '캐스케이딩 스타일 시트(CSS)'와 같은 의미로 사용된다.
스타일 우선 순위
원칙1. 스타일 우선 순위
원칙2. 스타일 상속
- 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됨.
- 상속을 이용하면 스타일 시트를 효과적으로 만들 수 있다.
- 주의할 것은 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니라는 점
ex) 글자 색은 상속되지만 배경 색은 상속되지 않음
예제 코드
<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>
<p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>위 코드를 보면 <style>태그에 <h1>태그가 브라운으로 되어 있다. !important로 우선순위를 지정해 준 것을 볼 수 있다.
이렇게 되면 <h1>태그 의 인라인 스타일을 green으로 적용해도 브라운 색이 적용된다.
하지만 p태그를 보면 <style>태그에는 blue로 되어 있지만 인라인에는 red가 되어 있기 때문에 결과적으로 red가 적용이 된다.
'교육 | 외부활동 > PUBLISHING' 카테고리의 다른 글
| KH_CSS_2_텍스트를 표현하는 다양한 스타일 (0) | 2023.01.05 |
|---|---|
| KH_HTML_4_입력 양식 작성하기 (3) | 2023.01.03 |
| KH_HTML_3_다양한 내용 입력하기 (0) | 2023.01.03 |
| KH_HTML_2_기본 문서 만들기 (0) | 2023.01.03 |
| KH_HTML_1_웹 개발 시작하기 (0) | 2023.01.03 |
