2021. 12. 28. 19:20ㆍ코딩공부/스파르타코딩클럽 - 웹개발종합반
파이참 라이센스 등록
항해99에 참여하면 파이참을 4개월간 사용할 수 있는 코드를 준다.
HTML, CSS 기본내용
파이참 - 프로그램 언어나 용도에따라 개발 툴이 많은데 파이참은 파이썬으로 개발하기에 가장 좋은 툴이다
생활코딩에서 이미 했던 부분은 강의 진도때문에 얼른 보고 넘어가기로 했다.
Quiz_간단한 로그인 페이지 만들어보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인페이지</h1>
<p>
ID: <input type="text"/>
</p>
<p>
PW: <input type="text"/>
</p>
<button>로그인하기</button>
</body>
</html>
CSS기초
- HTML 부모-자식 구조 살펴보기
- CSS 기초
CSS 사용법
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다. 아래 코드를 통해 간단한 사용 방법을 알아봅니다. mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!
많이쓰는 CSS
배경관련 background-color / background-image / background-size
사이즈 width / height
폰트 font-size / font-weight / font-famliy / color
간격 margin / padding
자주쓰는 CSS 연습하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Batang&display=swap" rel="stylesheet">
<style>
* { /*모든태그에 다먹인다는 뜻*/
font-family: 'Gowun Batang', serif;
}
.mytitle{
background-color: green;
width : 300px;
height: 200px;
color : white;
text-align: center; /*텍스트 중간정렬*/
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
/*이미지깔기*/
background-size: cover;
/*이미지크기를 커버정도로*/
background-position: center;
/*이미지를 가운데로*/
border-radius: 10px;
padding-top: 20px;
/*안쪽으로 여백주기*/
}
.wrap{
width : 300px;
margin : auto;
/*양쪽 마진이 동등해진다 즉, 가운데정렬*/
}
.mybtn{
width: 100px;
margin : auto;
/*margin : auto;만 하면 안움직인다. 박스가 아니라 글씨이기 때문에 가로세로가 없음*/
display: block;
}
.red-font{
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button class="mybtn red-font">로그인하기</button> <!--클래스 중첩사용 가능-->
</div>
</body>
</html>
폰트, 주석, 파일분리
구글 웹폰트입히기
https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
주석 단축키 : ctrl + /
css파일 분리
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">