|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인페이지</title>
<style>
.mytitle {
color: red;
fond-size: 40px;
}
#id {
color: blue;
}
.mytxt {
color:red;
}
.mybtn {
color: white;
background-color: green;
font-size: 12px;
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
<p id="id" class="mytxt">ID:<input type="text" /></p>
<p class="mytxt">PW:<input type="text" /></p>
<button class="mybtn">로그인하기</button>
</body>
</html>
|
class, id 태그에 달아주는 명찰: class와 id body에 있는 tag에 명찰을 다는 법 <div class="container">
<p id="line">이렇게 태그 뒤에 class나 id를 쓰고 " " 안에 뭐라고 부를지 적어주면 된다. 명찰을 다는 이유는? 그것을 찝어서 속성을 주고 싶기 때문에 속성 주는 법 <style> 태그 안에 class일 경우 .명칭{ } id일 경우 #명칭{ } 으로 적고 { }안에 속성을 주면 된다. .container { color: red; font_size: 40px; } #line { color: blue; } |
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
background-color: rgb(216, 216, 219);
margin: 10px;
padding: 7px;
height: 50vh;
/* 가로 가운데, 세로 가운데 배치 */
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
}
.box {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<span>text</span>
<span>text</span>
<span>text</span>
</div>
</body>
</html>
|
flex 배치를 조정하는 태그 display: flex; flex를 쓰지 않을 때 디폴트 배치는 block은 위에서 아래로, inline은 왼쪽에서 오른쪽으로 배치 justify-content: 가로축의 어디에다 정렬할 것인지 align-items: 세로축의 어디에다 정렬할 것인지 justify-content: center; 가로축의 가운데에 정렬 align-items: center; 세로축의 가운데에 정렬 다른 배치는 개발자 도구를 열어서 살펴볼 수 있다. 우클릭-> 검사-> display: flex; 옆의 네모격자무늬 클릭 |
'웹개발' 카테고리의 다른 글
| 파이썬에서 반복문, 함수 (0) | 2024.09.10 |
|---|---|
| javascript, jquery 문법연습 (1) | 2024.09.08 |
| 조건문 ,반복문 (0) | 2024.09.07 |
| Javascript 기본문법-변수, 연산, list, dictionary (0) | 2024.09.05 |
| Visual studio code 단축키 및 유용한 확장프로그램 (1) | 2024.09.04 |