고정 헤더 영역
상세 컨텐츠
본문
웹사이트의 디자인
캐스케이딩
CSS의 우선순위를 결정하는 3가지 요소 : 순서, 디테일, 선택자
- 순서에 의한 캐스케이딩 : 나중에 적용한 속성 값의 우선순위가 높음
- 디테일에 의한 캐스케이딩 : 더 구체적으로 작성된 선택자의 우선순위가 높음
- 선택자에 의한 캐스케이딩 : stlye > id > class > type 순으로 우선순위가 높음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 우선 순위</title>
<style>
p {
color: blue;
}
header h3 {
background-color: green;
}
</style>
</head>
<body>
<p>순서 캐스케이딩</p>
<header>
<h3>디테일 캐스케이딩</h3>
</header>
<h4 style = "color: red;" id="color" class="color">선택자 캐스케이딩</h4>
</body>
</html>순서 캐스케이딩
디테일 캐스케이딩
선택자 캐스케이딩
CSS 주요 속성
- width 속성 : 선택한 요소의 너비를 설정(픽셀(px), 퍼센트(%))
- height 속성 : 선택한 요소의 높이를 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 주요 속성 </title>
<style>
.paragraph {
width: 500px;
height: 500px;
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="paragraph">넓이와 높이</h1>
</body>
</html>넓이와 높이
- font 속성
- font-family : 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선순위 적용. sans-serif는 마지막에 작성하는 디폴트 값
- font-style : 글자의 스타일 지정
- font-weight : 글자의 두께(100~900 사이의 숫자를 입력할 수도 있음)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 주요 속성 </title>
<style>
.paragraph {
font-size: 50px;
font-family: Times, Arial, sans-serif;
font-style: italic;
font-weight: bold;
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="paragraph">글자의 크기와 스타일</h1>
</body>
</html>글자의 크기와 스타일
- border 속성 : 어떤 구역 및 경계를 설정
- 주석과 같이 한 줄에 이어 쓸 수도 있음
- 이때, 쉼표는 작성하지 않고 띄어쓰기만 함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 주요 속성 </title>
<style>
.border{
width: 500px;
height: 500px;
background-color: yellow;
border-style: solid;
border-width: 10px;
border-color: red;
}
</style>
</head>
<body>
<h1 class="border">경계 설정</h1>
</body>
</html>경계 설정
- background 속성 : 배경
- background-repeat
- x축으로 반복 : repeat-x
- y축으로 반복 : repeat-y
- 반복하지 않음 : no-repeat
- background-position : 공간 안에서 이미지의 좌표를 변경(top, bottom, center, left, right 등)
- background-repeat
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 주요 속성 </title>
<style>
.background {
width: 500px;
height: 500px;
font-size; 50px;
font-weight: bold;
font-style: italic;
font-family: Arial, times, sans-serif;
background-color: green;
background-image: url("https://cdn.pixabay.com/photo/2022/10/08/09/19/winter-7506621_960_720.jpg");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1 class="background">배경 설정</h1>
</body>
</html>배경 설정
728x90
'웹 개발 > HTML & CSS' 카테고리의 다른 글
| 웹을 구성하는 요소 (0) | 2022.10.10 |
|---|
