1️⃣ HTML 부모-자식 구조
html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안에 내용물도 모두 영향을 받는다.
- 빨간색 div 안에, 초록색/파란색 div가 들어있다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하게 된다.
- 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리인 것이다.
- 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀌게 된다.
2️⃣ CSS 기초
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성한다. mytitle라는 클래스(class)를 가리킬 때, .mytitle { ... } 라고 써줘야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mytitle {
color: red;
font-size: 40px;
}
.mytxt {
color: violet;
}
.mybtn {
font-size: 12px;
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
<p class="mytxt">ID : <input type="text" /></p>
<p class="mytxt">PW : <input type="text" /></p>
<button class="mybtn">로그인하기</button>
</body>
</html>
CSS
배경관련
background-color
background-image
background-size
사이즈
width
height
폰트 font-size
font-weight
font-family
color
간격
margin
padding
'Web development' 카테고리의 다른 글
| 구글 웹폰트_코드 적용 (0) | 2023.07.10 |
|---|---|
| 로그인 페이지 만들기_자주 쓰는 CSS (0) | 2023.07.10 |
| 로그인 페이지 만들기_1. html (0) | 2023.07.10 |
| html 구조 (0) | 2023.07.08 |
| VS Code(Visual Studio Code) (0) | 2023.07.08 |
