1. HTML 부모-자식 구조
HTML 태그는 "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 감싸고 있는 태그가 바뀌면 그 안의 내용물도 모두 영향을 받는다.
2. CSS 기초
- head 안에 style로 공간을 만들어 작성한다.
- 꾸밀 대상을 지정해서 변경한다.
(예) 짱구의 바지 색을 바꿔줘! "짱구의 바지"라고 부를게 있어야 하며 이름표를 붙임
3. 자주 쓰이는 CSS연습하기
[연습할 것들]
h1, h5, background-image, background-size, background-position
color, width, height, border-radius, margin, padding
- margin은 바깥 여백, padding은 안쪽 여백
- 아래의 로그인 화면을 가운데로 가져오려면?
width를 주고, margin:auto를 사용하자! 그래도안 되면 display:block을 추가
<!DOCTYPE html>
<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;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>
ID: <input type="text" />
</p>
<p>
PW: <input type="password" />
</p>
</div>
<button>로그인하기</button>
</body>
</body>
</html>4. 폰트, 주석, 파일분리
1) 구글 웹폰트 입히기
주소 : https://fonts.google.com/?subset=korean
- select this style 눌러서 3번째 링크 복사하기
복사해서 title 태그 아래 붙여넣기 - CSS rules to specify families 내용 복사해서 style 태그 안에서 사용하기
2) 주석 달기
- 주석은 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
- 코드에 대한 간단한 설명을 붙여두고 싶을 때
- 단축키 : ctrl(또는 command) + /(슬래시)
3) CSS 파일 분리![]
- style 태그가 너무 길어지면 보기 불편하니 파일을 하나 만들어서 분리
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
비전공자 직장인 개발일지😆