2022-04-18
9673 ワード
スパルタクラウド教育に初めて触れ、9 am~9 pmの授業を始めた初日です.グダ町のような慣れない方法で異なる分野の人と会って、html、cssとのコラボレーションに必要なgitを学びました.
ほねぐみきそ
HTMLの整理方法
HTMLとCSSに動的動作を追加する方法
HTML
ほねぐみきそ
CSS
HTMLの整理方法
Javascript
HTMLとCSSに動的動作を追加する方法
結果
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>홈페이지 이름</title>
<style>
.mytitle {
color: white;
width: 300px;
height: 200px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center; 사진의 중앙으로 정렬
background-size: cover;
사진을 커버한다.
border-radius: 10px;
사진의 양 각들을 둥글게 하는 정도
text-align: center;
글씨는 중앙에 위치
padding-top: 40px;
}
.wrap {
margin: 10px auto;
width: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>
ID: <input type="text" />
</p>
<p>
PW: <input type="password" />
</p>
</div>
<button>로그인하기</button>
</div>
</body>
</body>
</html>
Reference
この問題について(2022-04-18), 我々は、より多くの情報をここで見つけました https://velog.io/@leawvc/2022-04-18テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol