html
국비 코딩 풀스택 수업 1일차
비루블
2022. 6. 21. 16:48
main(메인)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>김종훈</title>
<!-- 아래는 외부 css파일 가져오기-->
<link href="./css/style1.css" rel="stylesheet" />
</head>
<!--
head 홈페이지 기본설정
-->
<body>
<!-- <div style="border:3px solid #169c5c; padding:30px"> -->
<!--바닥 굵기 실선--><!--안쪽(위아래옆)으로 들어가는 공간 30px(패딩)-->
<div class="container">
<!--위 클래스는 style1.css에서 container양식을 가져온 것임-->
<h3>메인화면</h3> <!--h+숫자 폰트 크기-->
<hr /><!--선 긋기-->
<a href="login.html">로그인</a>
<a href="join.html">회원가입</a>
<a href="board.html">게시판</a>
<!--웹에서 로그인을 누르면 login.html으로 이동(주소를 바꿔라는 명령어 href)-->
</div><!--div는 밑에 칸을 까는 것-->
</body>
</html>
<!--
-->
1. login로그인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<link href="./css/style1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h3>로그인</h3>
<hr /><!--(선긋기)열고 닫고 축약한게 <hr /> 내용이 들어갈수없어서 축약-->
<p style="width:140px; border:1px solid #e71b1b">테스트</p>
<!--p태그는 설정만큼 커짐
태그는 세종류 inline, block, inline-block 라벨은 인라인 피태그는 블락
피태그에 스타일을 주면 플레이스 홀더가 옆으로 밀려나서 내려감
인라인은 개체가 붙어있어서 확장x, 피태그는 가로길이가 늘어나지만 엔터키가 먹힘
확장 기능은 쓰고싶지만 엔터키 안먹히려면 인라인-블락-->
<!-- inline 가로높이 설정안됨.
block 가로 높이 설정됨, 라인 넘김.
inline-block : 인라인의 기능 + 블락 기능-->
<!--아래는 인라인 블락을 쓰는 법-->
<label class="lb1">아이디</label>
<input type="text" placeholder="아이디 입력" />
<br />
<label class="lb1">암호</label>
<input type="password" placeholder="암호 입력" />
<br />
<input type="button" value="로그인" />
</div>
</body>
</html>2. join회원가입
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<link href="./css/style1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h3>회원가입</h3>
<hr />
<div style="margin-bottom: 20px;"><!--div는 블락유형
아이디 아래에 공간을 줬음 마진-->
<label class="lb1">아이디</label>
<input type="text" placeholder="아이디" />
</div>
<div style="margin-bottom: 20px;">
<label class="lb1">암호</label>
<input type="password" placeholder="암호입력" />
</div>
<div style="margin-bottom: 20px;">
<label class="lb1">암호</label>
<input type="radio" name="gender" />남
<input type="radio" name="gender" />여
</div>
<div style="margin-bottom: 20px;">
<label class="lb1">이메일</label>
<input type="text" />
<label>@</label>
<select>
<option>naver.com</option>
<option>gmail.com</option>
<option>daum.com</option>
</select>
</div>
</div>
</body>
</html>3. board게시판
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판</title>
</head>
<body>
<div style="border:3px solid #169c5c; padding:30px">
<h3>게시판</h3>
<hr /><!--열고 닫고 축약한게 <hr /> 내용이 들어갈수없어서 축약-->
</div>
</body>
</html>
참고 자료
1. 인라인 블락, 인-블
https://seungwoohong.tistory.com/23
[CSS] display - block과 inline 그리고 inline-block
안녕하세요. 오늘은 display porperty에 대해서 알아 보겠습니다. 그 중에서 inline과 block 그리고 inline-block에 대해서 알아보겠습니다. 먼저 display property에서 간단히 설명하면 display는 화면이 렌더링..
seungwoohong.tistory.com
2.디자인 프레임워크
html
vue
Vuetify — A Material Design Framework for Vue.js
Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create be...
vuetifyjs.com
html_20220621
clone은 파일 받아올때
https://quilljs.com/docs/quickstart/