Step by Security Study

[HTML/CSS] 메인 페이지 본문

개발/웹 개발

[HTML/CSS] 메인 페이지

jooon99 2023. 8. 19. 23:01

* 웹 해킹에 관심이 생겨 유튜브 및 블로그 등을 보고 따라 만든 페이지입니다. (공부용)

 

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width, initial-scale=1.0">
    <!--문서 제목-->
    <title>Welcom Page</title>
    <!--외부에 있는 style.css 파일을 현재 문서에 스타일을 적용하도록 함-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- Header 영역 -->
        <div class="header">
            <!--왼쪽 상단 로고-->
            <h1><a href="#">XXXX</a></h1>
            <!--네비게이션 바(navigation bar)영역 = 웹 사이트 메뉴-->
            <div class="nav">
                <ul>
                    <!--li 태그의 항목 클릭 시 a 태그에 작성되어 있는 페이지로 이동하도록 함-->
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="login.html">LOGIN</a></li>
                    <li><a href="signup.html">SIGNUP</a></li>
                    <li><a href="notice.html">NOTICE</a></li>
                    <li><a href="qna.html">Q&A</a></li>
                </ul>
            </div>
        </div>
        <!--텍스트 영역-->
        <div class="hero">
            <!--헤딩 텍스트-->
            <h2>XXX PAGE</h2>
            <!--일반 텍스트 // 두 줄로 표시하기 위해 br 태그로 줄 바꿈-->
            <p>Hi, Nice to meet you. My name is XXX. Thank you for visiting my page. <br>This is a space created for web hacking practice.</p>
        </div>
    </div>
</body>
</html>

 

 

 

style.css

/*웹 페이지에 사용할 폰트(font) 규칙*/
@font-face{
    font-family:abster; /*폰트 이름 지정*/
    src:url(font/abster-webfont.woff) format('woff'); 
}
/* 전체 선택자를 사용하여 모든 태그의 margin과 padding을 초기화함.
Why? 웹브라우저마다 기본 margin과 padding 값이 존재하기 때문에 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 페이지 배경 스타일 지정*/
.container {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("images/love.png");
}

/* 로고 및 메뉴바 레이아웃 설정*/
.container .header{
    width: 80%;
    height: 80px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 로고 이미지
text-decoration: none -> 밑줄 없앰
텍스트 색깔 : 흰색으로 지정
font-family 속성을 사용하여 로고에 abster 글꼴을 적용
*/
.container .header h1 a{
    text-decoration: none;
    color:white;
    font-family:abster;
}

/* 메뉴 영역
display: inline-block -> inline 처럼 각 요소들을 나란히(가로) 배치할 수 있도록 함
 margin:0 10px 
  -> li 태그 사이에 간격을 줌
  -> 위&아래는 0px, 오른쪽&왼쪽 margin은 10px 
*/
.container .nav ul li{
    display: inline-block;
    margin:0 10px;
}

/* 메뉴 영역
text-decoration: none -> 밑줄 없앰/ text-decoration 초기화
텍스트 색깔 : 흰색으로 지정
*/
.container .nav ul li a {
    text-decoration: none;
    color:white;
}

/* 
:hover는 html에서 요소에 마우스를 올렸을 때 반응하도록 하는 CSS 선택자이다.
오른쪽 상단에 만든 메뉴에 마우스를 올렸을 때 흰색 글씨가 #1fdfdf 색깔로 바뀌는 효과를 준다.
*/
.container .nav ul li a:hover{
    color:#1fdfdf;
}

.container .hero{
    /*텍스트 영역을 화면의 정중앙에 위치할 수 있도록 함 */
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    color:white; /*텍스트 색깔은 흰색으로 지정*/
    text-align:center; /*텍스트 가운데 정렬*/
    font-family : Verdana, Geneva, Tahoma, sans-serif; 
    /*텍스트 영역의 글꼴은 Verdana를 사용하도록 지정*/
}

/* 헤딩 텍스트 폰트 사이즈 지정*/
.container .hero h2{
    font-size: 60px;
    margin-bottom: 20px; /*일반 텍스트와의 간격을 띄어주기 위해 margin-bottom(아래 여백) 20px 지정*/
}

/*일반 텍스트 폰트 사이즈 지정*/
.container .hero p{
    font-size:22px;
}

 

 

 

결과물

위의 코드를 적용하면 아래와 같은 최종 화면을 볼 수 있다.

 

 

 

 

참고 영상

https://www.youtube.com/watch?v=33UvhCoPrmc&t=1019s 

 

 

 

 

 

'개발 > 웹 개발' 카테고리의 다른 글

회원 가입 기능 구현  (0) 2023.09.04
[HTML/CSS] 회원가입 페이지  (0) 2023.08.27
[HTML/CSS] 로그인 페이지  (0) 2023.08.20
회원 가입 페이지  (0) 2023.06.17
'개발/웹 개발' Related Articles more