반응형
웹 브라우저에 보이는 화면을 예쁘게 꾸미려면 CSS가 필수이다.
CSS를 HTML에 넣는 방법은 3가지로 볼 수 있다.
1. HTML tag에 style 넣기
2. <style>태그를 사용하기
3. .css 파일을 새로 만들어서 링크 걸기
오늘은 3번 .css파일을 만들어서 링크 거는 방법을 해보려고 한다.
.css파일을 따로 만들어서 css에 해당되는 부분을 빼면 HTML코드가 확 줄어든다.
index.html파일에는 딱 HTML 코드만 넣는다.
<!-- style.css 파일을 HTML 파일과 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
중요한건 style.css파일이 어디에 있는지 위치를 잘 써주어야 한다.
보통은 최상위 폴더 아래 css폴더를 만들고 그 폴더 안에 styel.css파일을 만든다고 한다.
홈페이지의 홈이라고 할 수 있는 index.html 파일도 최상위 폴더 바로 아래 둔다.
힐링여행 로그인 홈페이지 만들기를 예시로 보자.
↓
HTML과 CSS를 따로 적어주었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>힐링 여행 | 로그인페이지</title>
<link href="CSS/style.css" rel="stylesheet">
<link href="https:////fonts.googleapis.com/earlyaccess/jejugothic.css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="login-title">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="password"/></p>
</div>
<button>로그인하기</button>
</div>
</body>
</html>
body{
font-family: 'Jeju Gothic', sans-serif;
}
.wrap {
margin: 10px auto;
width: 300px;
}
.login-title {
color: black;
width: 300px;
height: 200px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/50/Boracay_White_Beach_in_day_%28985286231%29.jpg');
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding: 40px;
}
반응형
'프로그래밍 > HTML_CSS' 카테고리의 다른 글
| HTML class와 id 비교 (0) | 2020.09.23 |
|---|---|
| 자주 쓰이는 CSS (0) | 2020.09.23 |
| HTML 부모-자식 구조 , CSS 선택자 (0) | 2020.09.23 |
| HTML 자주 쓰는 태그(Tag) 정리하기 (0) | 2020.09.22 |
| CSS 적용 순서 (0) | 2020.07.16 |
