Mission(자기소개 페이지 만들기)
- Navigation bar를 자기소개 페이지 상단에 추가하고, 스크롤은 내려도 고정되도록 효과 !
- Navigation bar에 메뉴를 클릭할 때, 색상이 바뀌도록 css 효과 !
1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="introduce.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div class="nav">
<div class="nav_item">
<div class="item"><a href="introduce.html">프로필</a></div>
<div class="item"><a href="dream.html">나의 계획</a></div>
</div>
<div class="nav_right">
<div class="item_right">BY Jin</div>
</div>
</div>
<div class="main">
<img src="me.jpg" height="400" width="400"/>
<div class="btn_space">
<button class="btn" type="button">이름</button>
<button class="btn" type="button">나이</button>
<button class="btn" type="button">취미</button>
</div>
<div id="content"></div>
</div>
</body>
</html>
- Navigation 상단 bar에 <프로필> <나의 계획> 메뉴 생성
- 메뉴를 클릭할 때 회색으로 바뀌도록 a태그:hover에 { color: gary; } 속성 추가
- (이름) (나이) (취미) 버튼을 클릭했을 때 그에 맞는 내용이 나오도록 설정
1-1) HTML에 CSS 적용 방법
- Inline Style Sheet
태그 style 속성에 css 코드를 입력하는 방법
<div style="font-size: 20px">Jin</div>
- Internal Style Sheet
HTML 파일 안에 사이에 css 코드를 입력하는 방법
<style>
div{
font-size: 20px;
}
</style>
- Linking Style Sheet
css 파일을 만들고 HTML 파일과 연결하는 방법
<link rel="stylesheet" type="text/css" href="css/common.css">
1-2) a태그 속성
- a:visited = 해당 링크를 방문한 적 있을 때
- a:active = 링크를 클릭하고 있을 때
- a:hover = 마우스를 오버 했을 때
a:hover{
color: gray;
}
2) JavaScript
<script>
function showHide(s){
const content = document.getElementById("content");
const node = document.createElement("div");
let text;
while (content.hasChildNodes()){
content.removeChild( content.firstChild );
}
if (s === '이름') {
text = ("이름은 Jin 입니다 !!");
} else if (s === '나이') {
text = ("나이는 xx살 입니다 !!");
} else {
text = ("취미는 xx 입니다 !!");
}
function createTextNode(text){
return document.createTextNode(text);
}
node.appendChild(createTextNode(text));
content.appendChild(node);
}
</script>
- document.getElementById("content") = content라는 아이디를 가진 요소를 찾아 서로 연결 해준다.
- document.createElement("div") = div라는 요소를 html에 추가한다.
