HTML, CSS를 이용하여 간단 메인 페이지 만들어보기
문제가 있을경우에는 댓글 달아주시면 페이지를 삭제하도록 하겠습니다.
동영상을 보며 공부한 내용을 바탕으로 간단한 사이트를 html과 css를 이용하여 비슷하게 만들기를 시작하였습니다.
크롬이나 다른 개발자도구, 검사를 이용하여 위와 같은 방법으로 html 태그와 CSS 확인이 가능합니다.
이 포스팅을 보기전에 전에 포스팅한 CSS Flex 와 Grid를 먼저 보시는것을 추천드립니다.
2018/09/05 - [IT/프로그래밍] - [CSS/Grid/Flexbox] CSS, 그리드( Grid ), 플렉스박스 ( Flexbox )에 대해서 알아보자
자 그럼 간단하게 홈페이지를 만들어 보도록 하겠습니다.
Visual Studio Code 를 이용하여
2018/07/21 - [리뷰 & 팁/팁] - [팁] 텍스트 에디터 추천! Visual Studio Code (비주얼 스튜디오 코드) 추천합니다.
index.html 파일을 만들어 준 다음 html를 처보도록 합시다.
위에서 3번째 html:5를 선택하게 되면 아래와 같은 코드를 얻을 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>홈페이지</title>
</head>
<body>
</body>
</html>
이제는 홈페이지에 헤더를 만들어 줘야겠죠??
아래와 같은 html 코드를 작성하고 엔터를 눌러줍니다.
<body>
header.header>div.header__square{● ● ●}+div.header__title{메인페이지}
</body>
그렇다면 아래와 같은 HTML 태그를 얻을 수 있습니다.
<header class="header">
<div class="header__square">● ● ●</div>
<div class="header__title">메인페이지</div>
</header>
위에서 알 수 있는것은 바로 > , + , {}을 이용하여 HTML 태그를 쉽게 생성할 수 있다는 것을 알 수 있었습니다. 헤더의 내용을 작성한 다음 아래와 같이 한번 더 쳐보도록 하겠습니다.
main.main>div.main__info>hgriup.main__titles>h6.main__pre-title+h2.main__title+h5.main__subtitle
의 결과는 아래와 같습니다.
바로 주된 내용이 들어간 메인 태그를 작성하였습니다.
<main class="main">
<div class="main__info">
<hgriup class="main__titles">
<h6 class="main__pre-title"></h6>
<h2 class="main__title"></h2>
<h5 class="main__subtitle"></h5>
</hgriup>
</div>
</main>
간단하게 내용을 작성해 봅시다
<main class="main">
<div class="main__info">
<hgriup class="main__titles">
<h6 class="main__pre-title">지금은 최고의 순간 입니다.</h6>
<h2 class="main__title">Kingname</h2>
<h5 class="main__subtitle">kingname의 홈페이지를 보고 계십니다.</h5>
</hgriup>
</div>
</main>
이후 main 아래에 아래와 같은 코드를 작성합니다.
바로 사진을 넣기위한 작업입니다.
div.main__photo>div.main__navigation>span*3
결과는 이렇습니다.
<div class="main__photo">
<div class="main__navigation">
<span></span>
<span></span>
<span></span>
</div>
</div>
ㅁ 한자를 이용하여 아래와 같은 화살표를 만들어주세요
<div class="main__photo">
<div class="main__navigation">
<span class="navigation__arrow">←</span>
<span class="navigation__pagess">1/4</span>
<span class="navigation__arrow">→</span>
</div>
</div>
그럼 이제 html 코드 작성은 끝이 났습니다!!
<header class="header">
<div class="header__square">● ● ●</div>
<div class="header__title">메인페이지</div>
</header>
<main class="main">
<div class="main__info">
<hgriup class="main__titles">
<h6 class="main__pre-title">지금은 최고의 순간 입니다.</h6>
<h2 class="main__title">Kingname</h2>
<h5 class="main__subtitle">kingname의 홈페이지를 보고 계십니다.</h5>
</hgriup>
</div>
<div class="main__photo">
<div class="main__navigation">
<span class="navigation__arrow">←</span>
<span class="navigation__pagess">1/4</span>
<span class="navigation__arrow">→</span>
</div>
</div>
</main>
참 쉽죠?? 이제 index.html 파일을 실행하게되면 아래와 같은 페이지를 볼 수 있습니다.
역시 홈페이지에는 css가 빠질수 없습니다.
새파일을 만들어 줍니다. 이름은 바로 styles.css 입니다.
이후에 index.html과 연결하기 위해서 아래와 같이 link를 만들어 줍니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>홈페이지</title>
<link rel="stylesheet" href="styles.css">
</head>
이제는 CSS를 수정할 순간입니다.
기본적으로 아래와 같이 수정하도록 하겠습니다. 모든 마진과 패딩을 0으로 만들어줍니다.
기본 폰트 외에도 구글폰트에서 무료로 사용할 수 있습니다.
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
body,
html {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background-color: white;
max-height: 100%;
height: 100%;
color: black;
}
html,
body {
height: 100%;
}
간단하게
header 를 수정해 보도록 합시다. flexbox를 이용하여 정렬을 진행하겠습니다.
.header {
height: 100px;
display: flex;
align-items: center;
text-transform: lowercase;
}
.header .header__square {
background-color: black;
height: 100px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
margin-right: 20px;
}
폰트크기를 조정하고 가운데로 조정하였습니다. 또한 백그라운드 색을 black으로 지정하였습니다.
위와같은 화면을 얻어냈습니다!!
참 쉽죠??
이제는 메인을 작업하도록 합시다.
.main {
height: 820px;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100%;
place-items: center;
}
.main .main__info {
margin-left: 200px;
width: 100%;
}
.main .main__titles {
margin-bottom: 150px;
}
.main__titles .main__pre-title {
color: gray;
}
.main__titles .main__title {
font-size: 150px;
position: relative;
left: 80px;
}
.main__titles .main__subtitle {
font-size: 12px;
font-weight: 600;
color: gray;
}
별거 없습니다.
메인의 높이와 정렬를 Grid를 이용하여 정렬한 후 위치를 지정하였습니다.
벌써 슬슬 멋있어 지기 시작했습니다.
이제는 맨 마지막으로 추가한 사진에 대해여 CSS 를 추가해 보도록 하겠습니다.
우선 무료 이미지를 하나 받아보록 합시다.
이름은 image.jpg입니다.
.main .main__photo {
width: 100%;
height: 80%;
background-size: 100%;
background-position: center;
background-image: url(./image.jpg);
display: flex;
align-items: flex-end;
}
.main__photo .main__navigation {
background-color: white;
padding: 25px 50px;
font-weight: 600;
}
.main__navigation .navigation__arrow:first-child {
margin-right: 10px;
}
.main__navigation .navigation__arrow:last-child {
margin-left: 10px;
}
높이와 넓이를 지정한 다음 배경이미지를 지정하였습니다.
이후 화살표 간격을 주었습니다.
참 쉽죠??
이것으로 간단한 홈페이지 메인 화면을 만들어 보았습니다.
이것으로 HTML, CSS를 이용하여 간단 메인 페이지 만들어보기 포스팅을 마치도록하겠습니다.
도움이 되셨다면 공감과 +a가 제 젤리값의 큰 힘이됩니다.
