CSS 기초
2023. 2. 19. 18:27ㆍsparta_codingclub
728x90
1. HTML 부모-자식 구조 살펴보기
「HTML 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요함. 나를 감싸고 있는 태그가 바뀌면, 그 안에 내용물도 모두 영향을 받음」
• 빨간색 div 안에, 초록색/ 파란색 div가 들어있음. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/ 파란 div도 모두 함께 이동함
• 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리임.
• 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀜.
2. CSS기초
① css는 어떻게 사용하는가
• <head> ~</head> 안에 <style> ~ </style> 로 공간을 만들어 작성함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.mytitle {
}
.mybtn {
}
.mytxt {
}
</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>
'sparta_codingclub' 카테고리의 다른 글
| 주석 (0) | 2023.02.22 |
|---|---|
| 구글 폰트 사용하기 (0) | 2023.02.22 |
| 자주 쓰이는 CSS 연습하기 (0) | 2023.02.19 |
| HTML과 CSS (0) | 2023.02.18 |
| 웹 브라우저 원리 (0) | 2023.02.16 |