저번엔 메인페이지를 만들었으니 이번엔 세부페이지를 만들어보도록 하겠습니다.
WEB 이라는 버튼을 누르게 되면 WEB의 대한설명이 나오는 페이즈를 연결해봅시다.
web 버튼에 링크를 달기 위해서는
<body style="background-color: rgb(70, 70, 70);">
<strong><p style="text-align: center; color: aliceblue; font-size: 400%;">PROGRAMING LANGUAGE</p><hr></strong>
<br><br><br>
<div style="text-align: center;">
<button class="circle_btn" onclick="location.href='web.html'">WEB</button >
<button class="circle_btn" onclick="location.href='game.html'">GAME</button >
<button class="circle_btn" onclick="location.href='data.html'">DATA</button >
</div>
</body>이런식으로 해주면 됩니다.
onclick 를 활용하여 파일 또는 사이트의 링크를 걸어줄수 있습니다.
web이라는 버튼을 눌러서 web사이트로 넘어갔으면 web과 관련된 언어들을 보여줘야 합니다.
이런 화면으로 넘어가게 해뒀고, 안에있는 HTML,css ,js,php의 텍스트를 클릭하면 설명 사이트로 넘어가게 해두겠습니다.
<body style="background-color: rgb(70, 70, 70);">
<strong><p style="text-align: left; color: aliceblue; font-size: 250%; cursor: wait;"> WEB LANGUAGE</p></strong><hr>
<div style="text-align: center;"><br><br>
<a style="color: white; font-size: 200%; text-decoration-line: none;" href="https://www.w3.org/html/" target="_blank">HTML,</a>
<a style="color: white; font-size: 200%; text-decoration-line: none;" href="https://www.w3.org/Style/CSS/Overview.en.html" target="_blank">CSS,</a>
<a style="color: white; font-size: 200%; text-decoration-line: none;" href="https://www.w3schools.com/js/" target="_blank">JS, </a>
<a style="color: white; font-size: 200%; text-decoration-line: none;" href="https://www.php.net/" target="_blank">PHP</a>
</div>
</body>
이런식으로 할수있습니다.
저 텍스를 클릭했을때 다른창에 띄우기 위해서는
target="_blank" 라는것을 넣어주어야 합니다.
링크연결된 텍스트의 밑줄을 없애주기 위해서는
text-decoration-line: none;
스타일 태그 안에 들어가면 됩니다.
갑사합니다.
'일지 > html' 카테고리의 다른 글
| [web2] - (html, css) 온라인 계산기 만들기 (0) | 2024.01.29 |
|---|---|
| [ web1] (html,css) 완료 (0) | 2024.01.27 |
| [web1]-3 (html,css) 버튼에 마우스를 갖다 대면 효과가 발생하게 하는 방법. (0) | 2024.01.26 |
| [web1]-2 사전조사 (2) | 2024.01.26 |
| [web1]-1 계획하기 (0) | 2024.01.26 |
