💡CSS
• HTML 부모-자식 구조 : HTML 태그는, 나를 감싸고 있는 태그(부모 태그)가 바뀌면, 그 안의 내용물(자식 태그)도 모두 영향을 받습니다.
• CSS는 무언가를 꾸미기 위해 사용하는데, 꾸미기 위해서는 대상을 가르켜야합니다. 이처럼 명찰 역할을 하는 것이 class이고 class에 이름을 만들어, 꾸밀 대상을 지칭합니다.(아래 코드 참고)
• CSS는 head 안 style 공간을 만들어 작성 및 사용합니다.
예를 들어, mytitle라는 class를 가리켜 꾸미기 위해서는, head 안 style 부분에 .mytitle { ... } 라고 써줘야합니다.
• CSS에는 다음과 같은 것들이 있습니다.
👉배경
background-color
background-image
background-size
👉사이즈
width
height
👉폰트
font-size
font-weight
font-family
color
👉간격
margin
padding
👉전에 만들었던 간단한 로그인 페이지에서 h1 태그 부분을 꾸며봅니다.
h1 태그 부분에 class="mytitle" 부분을 추가해주어, 꾸밀 대상에 명찰을 만들어줍니다.
이후, head에 .mytitle{...} 부분을 추가해, mytitle class 대상으로 꾸미는 내용을 기술해줍니다.
저는 h1 태그 부분의 글씨를 빨간색으로 바꾸어주었고(color:red;) 글씨 크기를 60px로 해주었습니다.(font-size:60px)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<style>
.mytitle{
color:red;
font-size:60px;
}
</style>
</head>
<body>
<h1 class="mytitle">로그인페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>👉그 결과, 아래와 같이 h1 태그 부분이 원하는대로 바뀌었음을 확인할 수 있습니다.
