HTML
<!DOCTYPE html>
<html lang="ko">
<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>
<h1>김멋사</h1>
<p>HTML/CSS 개발자</p>
<footer>copyright LIKELION. All rights reserved.</footer>
</body>
</html>
<html lang="ko">
이력서를 영어가 아닌 한국어로 language 속성을 ko(한국어)로 변경
<meta charset="UTF-8">
meta 태그가 character set을 UTF-8로 사용한다.
👉 사용하지 않을 경우 한글이 깨질 수 있다.
👉 meta 태그는 닫힌 태그 없이 열린 태그만 존재 (스스로 닫는 태그)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport는 우리가 보는 화면을 의미한다.
👉 모바일 기기로 봤을 때 content가 그 크기에 맞게 표시된다.
<footer>copyright LIKELION. All rights reserved.</footer>
저작권 표시
CSS 연결
1. 탐색기(종이 아이콘)을 열어, CSS 새파일을 만들어 준다.
2. HTML과 CSS 두 파일을 연결 시켜준다.
👉 link:css 자동완성 (<head>태그 안에 작성)
<link rel="stylesheet" href="style.css">
👉 css의 stylesheet를 연결
👉 href는 css 파일의 위치를 나타냄
footer {
text-align: center;
background-color: black;
color: white;
}
꾸미고자 하는 태그를 입력하고 원하는 속성을 적는다
👉 <footer>태그를 정렬한다: 가운데로;
👉 <footer>태그의 배경색을 변경한다 검정색으로;
👉 <footer>태그의 글자색을 변경한다: 흰색으로;
🗒️ 정리
- HTML 파일을 만들고 한국어 파일로 설정
- Title, heading, paragraph, footer 적용
- CSS파일 만들고 HTML파일과 연결
- Footer - 텍스트 가운데로 옮기기, 배경색 - 검정, 글자색 - 흰색
'프론트엔드 > 일단 만드는 HTML&CSS' 카테고리의 다른 글
| HTML/CSS Day 6 (0) | 2023.02.05 |
|---|---|
| HTML/CSS Day 5 (0) | 2023.02.03 |
| HTML/CSS Day 4 (0) | 2023.02.02 |
| HTML/CSS Day 3 (0) | 2023.02.01 |
| HTML/CSS Day 1 (0) | 2023.01.30 |
