(VSC기준) prac.html 파일 생성 후 ! + Tab
기본구성
<!DOCTYPE html>
<html lang="ko">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지</title>
</head>
<body>
<div>구역</div>
<p>문단</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<h1>제목태그, 구글검색에 잘 나옴</h1>
<h2>h2는 소제목</h2>
<h3>h3~h6도 </h3>
<hr>
span 태그: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그: <input type="text" />
<hr>
button 태그: <button> 버튼입니다</button>
<hr>
textarea 태그: <textarea>간이 메모장같은?</textarea>
</body>head안에는 속성 정보가,body안에는 페이지의 내용이 들어감.
-head안에 들어가는 대표적인 요소들: meta, script, link, title 등
-body안에 들어가는 대표적인 요소들: div, p, img 등
- 자동정렬 키
단축키: (맥) Shift + Option + F / (윈도우)Shift + Alt + F/ (리눅스) Ctrl + Shift + I
CSS 구성
<head>
~~
<style>
.mystyle {
color:red;
}
</style>
</head>
<body>
<h1 class="mystyle"> 로그인 페이지 </h1>
</body>
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성.
1)<~ class="클래스명"> </~>
2)style 삽입시 .클래스명 { ... }
자주 쓰이는 목록
배경관련(세트)
background-color
background-image : url("...");
background-size : cover;
background-position : center;
사이즈
width (넓이)
height (높이)
폰트
font-size
font-weight
font-famliy
color
간격 - 위 오 아래 왼 순서
margin (바깥 여백)
padding (안쪽 여백)
text-align : center; (글씨 가운데 정렬)
박스 자동정렬(세트)
display: flex;
flex-direction: column; (row or column)
justify-content: center;
align-items: center;
테두리
border-radius (각짐설정)
box-shadow: 0px 0px 3px 0px gray; (그림자효과)폰트
응애 개발러