<a> 태그
- <a> 태그는 특정 텍스트나 이미지 등에 하이퍼 링크를 걸어 주는 태그입니다.
- 이전에 이어서 웹사이트를 먼저 살펴 보겠습니다.
- 웹페이지에서 하이퍼링크가 필요한 부분은 nav태그안에 있는 Menu를 구성하는 컨텐츠들입니다.
- Home / About / Portfolio Blog Contact에 각각 a태그를 추가해 하이퍼링크를 걸어보겠습니다.
<a>태그 추가
- <a>태그를 추가 할때 어디에 위치시킬지 중요합니다.
- 예를들어 Home이라는 텍스트에 하이퍼링크를 걸어준다고 한다면, <a>태그가 <li>를 감싸는 위치에 올 수 있고,
<li>태그 하위로 들어 갈 수도 있습니다.
- 그럼 먼저 <li>태그를 감사도록 <a>태그를 추가 해 보고 css로 border값을 줘서 확인해 보겠습니다.
<a href="">
<li>Home</li>
</a>a{
border : 2px solid red;
}
- <a> 태그가 들어간 부분이 기존에 계획되었던 레이아웃을 벗어나 버렸습니다.
- css로 조정해 줄 수 있지만, li의 전체 범위에서 링크가 걸리는게 아니라 텍스트를 클릭 할 경우에만 링크로 이동 시키고 싶습니다.
- <li> 태그 안에 <a>태그를 위치시킵니다.
<li>
<a href="">Home</a>
</li>
- <a>태그를 <li> 태그 안에 위치 시키자 텍스트에만 <a>태그의 border가 표시되는 것을 확인 할 수 있습니다.
- 하지만, <a>로 하이퍼링크를 걸자 텍스트에 밑줄이 생기고, 링크를 클릭하면 텍스트 색이 변하게 됩니다.
- 밑줄을 제거 하고 색상을 검정으로 고정해야합니다.
- 밑줄을 제거 할때는 text-decoration을 none으로 지정해 줍니다.
a {
border: 2px solid red;
color: black;
text-decoration: none;
}
- 이제 border를 제거하고 확인해 보겠습니다.
a {
color: black;
text-decoration: none;
}
<a>태그 하이퍼 링크
-<a> 태그의 하이퍼 링크는 href의 속성값으로 이동할 주소를 지정해주면 됩니다.
<a href="주소"></a>- 아무 값도 지정하지 않으면 현재 페이지로 이동합니다.
- nav 의 각 텍스트에 <a>태그를 추가해서 상대 경로를 통해 링크를 걸어 주겠습니다.
<li>
<a href="localhost:5000">Home</a>
</li>
<li>
<a href="localhost:5000/about">About</a>
</li>
<li>
<a href="localhost:5000/portfolio">Portfolio</a>
</li>
<li>
<a href="https://hiio.tistory.com">Blog</a>
</li>
<li>
<a href="localhost:5000/contact">Contact</a>
</li>- 로컬 환경에서 진행 중이므로 localhost와 port 번호를 주소로 지정했습니다.
- Home을 클릭하면 초기 화면으로 이동합니다.
- About / Portfolio / Contact 를 클릭하면 해당 페이지롤 이동합니다.
- Blog를 클릭하면 현재 제 블로그로 이동합니다.
- 주소를 제외하고 '/이동페이지' 로 지정해도 이동이 됩니다.
- About을 클릭해 보겠습니다.
- Not Found Error 페이지가 나왔습니다.
- 아직 링크에 연결된 html파일이 없고, 서버에서 라우팅을 해줘야 합니다.
페이지 추가
- About / Portfolio / Contact링크에 연결될 html 파일을 생성합니다.
- index.html 내용을 복사하여 붙여 넣기 한후 main 안에 sidebar 부분을 제외하고 삭제 하고, <head> 부분에 title을 수정 해 주겠습니다.
About.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<title>About</title>
</head>
<body>
<header></header>
<div id="main">
<div id="sidebar">
<nav>
<ul id='sidebarul'>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/portfolio">Portfolio</a>
</li>
<li>
<a href="https://hiio.tistory.com">Blog</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
<footer></footer>
</body>
</html>
- 이제 서버에 라우팅을 해주어야 합니다.
서버 라우팅
- 백엔드 서버로 파이썬 프레임워크인 플라스크를 사용하고 있습니다.
- 플라스크 서버의 라우팅 방법으로는 동적 방법과 정적 방법이 있습니다.
- 아래의 링크로 이동하면 정적 / 동적 라우팅 방법을 확인 할 수 있습니다.
정적 / 동적 라우팅 방법
[Python] 4. Flask(플라스크) - 정적 라우팅 / 동적 라우팅
플라스크 라우팅 - 플라스크에서는 @app.route() 데코레이터(decorator) 함수를 통해서 라우팅을 실행합니다. - 라우팅 방법으로는 정적 라우팅 방법과 동적 라우팅 방법이 있습니다. - 먼저 정적 라우�
hiio.tistory.com
- 이제 동적 라우팅 방법으로 페이지를 렌더시켜 표시하겠습니다.
@app.route("/<pagename>")
def menu(pagename):
return render_template(f'{pagename}.html')- @app.route()의 pagename으로 주소이름을 받아옵니다.
-이 변수를 이용해 페이지 이름과 같은 html 파일을 불러옵니다.
- 'About' 메뉴를 클릭해 해당 주소로 이동해 보겠습니다.
- 잘 이동 되었네요!!
- 다음 포스팅에서는 reset.css를 추가 해 보겠습니다.
'Web > 포트폴리오 프로젝트' 카테고리의 다른 글
| [Web]포트폴리오 웹사이트 제작 - 10. 레이아웃 상속 / 재사용 / 타이틀 변수 선언 및 적용 (0) | 2020.10.14 |
|---|---|
| [Web]포트폴리오 웹사이트 제작 - 9 .css reset - css 속성 초기화 (0) | 2020.10.14 |
| [Web]포트폴리오 웹사이트 제작 - 7 . 레이아웃 구성 (6) - main / Main Image 추가 / 레이아웃 완성 (0) | 2020.10.13 |
| [Web]포트폴리오 웹사이트 제작 - 6 . 레이아웃 구성 (5) - main / Main Text 추가 (0) | 2020.10.13 |
| [Web]포트폴리오 웹사이트 제작 - 5 . 레이아웃 구성 (4) - 구글 폰트 사용하기 / Noto Sans KR (0) | 2020.10.13 |