1주차 과제
- Navigation bar를 자기소개 페이지 상단에 추가하고, 스크롤을 내려도 고정되도록 효과를 주세요.
- Navigation bar에 메뉴를 클릭할 때 색상이 바뀌도록 css 효과를 주세요.
- 본인을 나타내는 사진과 멋진 소개글로 자기소개 페이지를 꾸며주세요.
우선 웹 문서를 만들 때 HTML태그를 입력하는 프로그램인 '웹 편집기'를 설치하겠습니다.
저는 비주얼 스튜디오 코드로 선택하였습니다.
웹문서는 아무리 길더라도 < !doctype >과 < html >, < head >, < body > 네가지 태그를 이용해 문서의 시작과 끝을 표시합니다.
1. < !doctype > - 문서 유형을 지정하는 선언문
2. < html> 태그 - 웹 문서 시작을 알리는 태그
< html > 태그와 < /html > 태그 사이에는 문서 정보를 지정하는 < head > 태그와 실제 화면에 보이는 문서 내용을 입력하는 < body > 태그가 포함됩니다.
<!doctype html>
<html lang="ko">
<head>
..... //문서 정보 <head> 태그
</head>
<body>
..... //화면에 보일 내용 <body> 태그
</body>
</html>3. < head > 태그 - 브라우저에게 정보를 주는 태그
< title > 태그 - 문서제목
4. < meta > 태그 - 문자 인코딩 및 문서 키워드, 요약 정보
<head>
<meta charset="utf-8">
</head>HTML5에서는 한글과 영문을 비롯해 모든 언어를 표시 할 수있는 utf-8 방식을 사용합니다.
<meta name="description" content="여기에 사이트에 대한 짧은 설명을 입력합니다">문서에 대한 간단한 설명을 지정할 수 있으며 검색 결과에 사이트 설명으로 표시됩니다.
5. < body > 태그 - 실제 브라우저에 표시될 내용
< body > 태그와 < /body > 태그 사이에 실제 브라우저에 표시될 내용을 입력합니다.
예시)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
<h1>시간이란...</h1>
<p>내일 죽을 것처럼 오늘을 살고<br>
영원히 살 것처럼 내일을 꿈꾸어라</p>
<img src="images/hyunwoo.jpg">
</body>
</html>여기에서 < h1 > 태그는 제목을 표시하는 태그로 태그를 사용한 부분이 다른 텍스트보다 크고 진하게 표시되며 < p > 태그는 텍스트 단락을 표시하고 < br > 태그를 사용한 부분에서는 줄이 바뀌어 다음 줄에서 텍스트가 시작됩니다.
코딩을 잘하는 개발자가 되자!