지난 글에서는 HTML 로 로그인 페이지 뼈대를 만들어 보았다.
이번 글에서는 HTML 메인 페이지와 CSS로 페이지를 조금 더 꾸며본다.
메모장을 열어 HTML 문서를 작성후에 .HTML 형태로 저장후 브라우저에서 열면 그대로 실행이 된다.
따라서 오늘은 해당 방법으로 진행 할 것이다.
- 메인 페이지를 만들고 로그인 버튼 이미지를 삽입 후 해당 이미지를 누르면 로그인 페이지로 이동시키기.
- 로그인 페이지에서 로고버튼을 누르면 다시 메인페이지로 이동시키기
먼저 웹 사이트에 띄워볼 이미지를 얻어와 test.jpg라는 이름으로 저장해두고
같은 경로에 test.txt로 텍스트 파일(메모장) 을 하나 만들었다.
그 후 test.txt에 html 문서를 작성할 것이다.
이미지 삽입 태그 <img>
이미지를 삽입하는 방법이다.
<img src="이미지파일경로.jpg" alt="이미지">먼저 <img> 태그는 이미지 삽입을 위한 태그이며 src로 원하는 이미지의 경로를 설정해준다.
(같은 경로에 있을시 이미지 파일 이름만 작성해도 되지만 경로가 다르면 경로까지 작성해주어야 한다.)
alt는 이미지의 대체 텍스트로써 해당 이미지 로딩에 실패했을때 텍스트로 대체된다.
링크 삽입 태그 <a>
링크를 삽입하는 방법이다.
<a href="login.html">
<--해당 링크를 연결시킬 대상-->
</a>
<a href="https://naver.com">
<--해당 링크를 연결시킬 대상-->
</a><href> 속성은 <a> 태그의 속성중 하나이며 목적지를 지정해주는 속성이다.
파일 경로, URL 등등 목적지 설정이 가능하다.
따라서 해당 방법을 사용해 test.txt 파일에 html 문서를 작성했다.
<!DOCTYPE html>
<html>
<head>
<title>인사 페이지</title>
</head>
<body>
<p>안녕하세요 연습 사이트입니다..</p><br><br><br>
<img src="test.jpg" alt="곰돌이 사진">
</body>
</html>
텍스트 파일에 해당 문서를 작성후에 .html 확장자로 저장 후 브라우저로 켜보면 정상적으로 실행이 된다.
실습
저번 글에 적어둔 html 로그인 문서도 가져와서 로그인받는 폼까지 같이 만들었고
네이버 로고와 버튼이미지를 빌려와 직접 페이지를 만들어보았다.
(이미지 파일들은 html문서와 같은경로에 있는 images 폴더 안에 정리해두어 넣었다.)
// 메인 페이지 html 문서
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인사 페이지</title>
</head>
<body>
<h1>첫 인삿말</h1>
<p>안녕하세요 최석배 연습 사이트입니다..</p><br><br><br>
<a href="login.html">
<img src="images/login-button.jpg" alt="로그인 버튼">
</body>
</html>
// 로그인 페이지 html 문서
<!DOCTYPE html>
<html>
<head>
<title>로그인 페이지</title>
</head>
<body>
<a href="main.html">
<img src="images/naver.jpg" alt="메인로고"><br><br><br>
</a>
<form action="login.php" method="post">
<label for="username">아이디:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="userpw">비밀번호:</label>
<input type="text" id="userpw" name="userpw" required><br><br>
<input type="submit" value="로그인 버튼입니다"
</form>
</body>
</html>
로그인 버튼을 누르면 login.html 로 이동되어 로그인 페이지로 잘 이동 된다.
그런데 로그인 페이지에서 NAVER 로고가 너무 크게나와있지 않은가?
이럴때 사용할 것이 CSS이다.
CSS
이번글에서 CSS를 간단하게 사용하여 로그인 페이지에 NAVER 로고 이미지를 적당하게 줄여볼 것이다.
html 문서들과 같은경로에 똑같이 메모장을 하나 만들고 해당 메모장에 다음과 같이 문서를 적었다.
img[src="imgaes/naver.jpg"] {
width: 140px; /* 이미지 크기 조정 */
height: 100px;
}먼저 img, 즉 CSS로 조정할 대상을 하나 지정한다.
img[src="대상 경로.jpg"]
우린 지금 naver.jpg를 대상으로 지정했고 해당 이미지 크기를 알맞게 조정했다.
그후에 이 텍스트 파일을 .css 확장자로 html 문서들과 같은 경로에 test_styles.css 라고 저장을 해놨다.
그럼 이제 어떻게 적용을 하냐?
우린 login.html , 즉 로그인 페이지에 있는 naver.jpg 를 대상으로 조정하고 싶다고 했다.
따라서 login.html 문서를 들어가 head부분에
<link rel="stylesheet" type="text/css" href="test_styles.css"를 넣어 적용시켜준다.
<link> 태그는 html 문서에서 외부 리소스를 연결하기 위해 사용된다.
우린 지금 html 문서의 밖에 있는 test_styles.css로 저장해둔 css파일을 연결해야하기 때문에 <link>태그를 사용했다.
rel 속성은 연결시키는 리소스와의 관계를 지정하는데 보통은 css파일을 지정할때 stylesheet으로 설정한다.
type 속성은 연결시키는 리소스의 유형을 나타낸다
text/css: css문서를 나타냅니다..
text/html: HTML 문서를 나타냅니다.
text/plain: 일반 텍스트 문서를 나타냅니다.
application/json: JSON 데이터를 나타냅니다.
image/jpeg: JPEG 이미지를 나타냅니다.
audio/mpeg: MP3 오디오 파일을 나타냅니다.
video/mp4: MP4 비디오 파일을 나타냅니다.
href 는 연결 시키는 리소스의 경로를 지정한다. ( 현재 test_styles.css 파일은 같은 경로에 있기때문에 별도지정 안함 )
따라서 해당 내용을 login.html 의 head부분에 적용시키고 나면
알맞게 설정되었다.
미숙하지만 완성본
'과제' 카테고리의 다른 글
| 코드펜 (codepen) 활용 (0) | 2023.09.11 |
|---|---|
| JS (Javascript) 기본 구조 (0) | 2023.09.10 |
| HTML 로그인 페이지 문서 작성 (0) | 2023.09.06 |
| HTML 문서 작성 연습 (0) | 2023.09.06 |
| HTML , JS , CSS (0) | 2023.09.06 |