기초 html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 브라우저 제목창에 표시되는 작은 아이콘 -->
<link rel="shortcut icon" href="https://assets.nflxext.com/ffe/siteui/common/icons/nficon2016.ico">
<!-- og:image 카카오톡에 공유될 때 표시되는 이미지 -->
<meta property="og:image" content="https://d1telmomo28umc.cloudfront.net/media/seo/home2.jpg">
<!-- og:description 카카오톡에 공유될 때 표시되는 설명 -->
<meta property="og:description" content="카카오톡에 뜨는 설명글">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- head안의 내용도 표시된다. -->
이건 헤드 태그 안에 쓴 내용입니다.
</head>
<body>
<br /><br /><br />
Hello world!
<pre>Hello world!</pre>
<!-- 마우스 오버하면 title이 나타남. title = 약칭의 전체 의미, content = 약어 -->
<p>My name is LA: <abbr title="Leeaain">Aain</abbr></p>
<cite>기울임체</cite><br /><br />
<code>function hello() {
console.log('Hello')
}
</code><br /><br />
<pre><code>function hello() {
console.log('Hello')
}
</code></pre>
<p>2<sup>5</sup></p>
<p>5<sub>2</sub></p>
</body>
</html>form 태그
- input 태그를 감싸서 나중에 http요청을 서버로 전달할 때 http요청을 전달할 경로와 요청의 종류를 지정할 수 있음.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
<div>
<input type="file" accept=".png, .jpg, .svg, .gif" />
<input type="file" accept="image/*" />
<input type="file" accept="image/*,.pdf" />
</div>
<div>
<label for="name">First Name</label>
<input required id="name" placeholder="Name" type="text" />
</div>
<label for="lastName">Last Name</label>
<input id="lastName" placeholder="Last Name" type="text" />
<input placeholder="UserName" type="text" />
<input placeholder="Password" minlength="8" type="password" />
<input type="submit" value="Create Account" />
<!-- label을 input과 함께 작동하기. label의 for가 input의 id와 연결 -->
<label for="cheese">Profile Photo</label>
<input type="checkbox" name="cheese" id="cheese" />
</form>
</body>
</html>
CSS 적용하기
<!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>
html {
background-color: tomato;
}
body {
margin: 20px;
padding: 20px;
background-color: thistle;
}
div {
height: 150px;
width: 150px;
padding: 15px;
border: solid;
}
#first{
background-color: aqua;
}
#second{
background-color: beige;
}
#third{
width: 200px;
background-color: aquamarine;
}
#fourth{
background-color: bisque;
}
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth"></div>
</div>
</div>
</div>
</body>
</html>CSS의 flex box 적용하기
<!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>
body {
margin: 10px;
height: 300vh;
align-items: center;
}
div {
width: 150px;
height: 150px;
background-color: cadetblue;
position: relative;
left: 0px;
}
#div2 {
width: 100px;
height: 100px;
top: 20px;
background-color: orange;
position: fixed;
right: 5px;
}
</style>
</head>
<body>
<div>
<div id="div2"></div>
</div>
<!-- <div></div> -->
</body>
</html>
{happiness: true}