팀 프로젝트로 우리를 소개하는 웹사이트를 만드는 것을 했다
그중에서 나는 네비게이션 바를 만드는 것을 맡았다
일단 html 기본 코드를 불러온다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
먼저 배경을 먼저 넣는다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #fff6ec;
}
</style>
</head>
<body>
</body>
</html>
그다음 네비게이션 바에 들어가야 할 코드들을 넣어준다
버튼식으로 만들 거기 때문에 hover도 넣어준다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #fff6ec;
}
nav {
background-color: #ffbdd6;
overflow: hidden;
}
nav a {
float: left;
color: black;
text-align: center;
padding: 30px 60px;
text-decoration: none;
font-size: 25px;
}
nav a:hover {
background-color: #e4deff;
color: black;
}
</style>
</head>
<body>
</body>
</html>
float: left를 사용한 이유는 왼쪽으로 정렬해야 하기 때문에 사용하였다
text-align: center를 사용한 이유는 글자를 중앙에 정렬하기 위해 사용하였다
text-decoration: none 을 사용한 이유는 글자에 밑줄이 생겨 이걸 제거하기 위해 사용하였다
그런데 배경 말고는 아무것도 나오지 않는다
왜인지 원인을 찾아야겠다
이리저리해보다 원인을 발견했다
body에 아무것도 없어서였다
그래서 일단 아무거나 넣어봤다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #fff6ec;
}
nav {
background-color: #ffbdd6;
overflow: hidden;
}
nav a {
float: left;
color: black;
text-align: center;
padding: 30px 60px;
text-decoration: none;
font-size: 25px;
}
nav a:hover {
background-color: #e4deff;
color: black;
}
</style>
</head>
<body>
<div>
<p1>안녕하세요</p1>
</div>
</body>
</html>
이상하게 그냥 글자만 나왔다
이제 어떻게 해야 할지 눈앞이 캄캄해진다
일단 내가 뭘 하고 싶은지 찾아본다
내가 하고 싶은 건 버튼을 누르면 다른 페이지로 넘어가는 것이다
그래서 검색해 봤다
<a href="url"> 이런 내용을 보았다
이 태그를 넣고 url에 주소를 넣으면 된다는데...
일단 해보았다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #fff6ec;
}
nav {
background-color: #ffbdd6;
overflow: hidden;
}
nav a {
float: left;
color: black;
text-align: center;
padding: 30px 60px;
text-decoration: none;
font-size: 25px;
}
nav a:hover {
background-color: #e4deff;
color: black;
}
</style>
</head>
<body>
<nav>
<a href="https://hoxynado.tistory.com/">내 블로그</a>
</nav>
</body>
</html>
여기서 <nav> 태그를 쓴 이유는 다른 웹 페이지로 연결하기 위해 사용하였다
이렇게 나왔다
여기서 마우스를 올려놓으면
색이 변하는 걸 확인할 수 있다
그렇다면 링크는 잘 연결이 되었나 확인
연결이 잘 된 것을 볼 수 있다
이제 테스트는 끝났으니
지금 이렇게 설명하였지만 여기까지만 5시간이 걸렸다
강의를 들은 후 처음으로 하는 것이기 때문에 오래 걸릴 수밖에 없었다
하지만 시간 가는 줄 모르게 집중했다
9시부터 21시까지 하고 있지만 시간이 좀 부족한 것 같기도 하다
그래도 다음날을 위해 무리하지 않아야겠다
'코딩 나도 할 수 있다!!' 카테고리의 다른 글
| 2024.04.24 (수) 코틀린 계산기 만들기 1 (0) | 2024.04.24 |
|---|---|
| 2024.04.17 (수) HTML 개인 소개 페이지 (0) | 2024.04.17 |
| 2024.03.27 (수) SQL 같은답 다른풀이 (0) | 2024.03.27 |
| 2024.03.25 (월) SQL SET (0) | 2024.03.25 |
| 2024.03.21 (목) SQL USING (0) | 2024.03.21 |
