매일 조금씩

11/13 - 미니프로젝트 : html, css로 자기소개 페이지 만들기 본문

빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정

11/13 - 미니프로젝트 : html, css로 자기소개 페이지 만들기

mezo 2020. 11. 16. 19:04
728x90
반응형

 

 

 

페이지 구성은 다음과 같다.

 

 

메인화면

      메뉴

           신상정보

           즐겨찾기

           갤러리

           관심분야

 

 

총 6페이지였고

최소 4페이지를 만들어야 했다. 

 

난 6페이지를 모두 만들기로 결심!

 

 

 

와이어 프레임

와이어 프레임을 대충 만들어보았다.

머리속에 떠오르는 대로 빠르게 구상하여 그리고, 빨리 개발을 하고 싶었다.

 

 

 

 

완성본 스크린샷

 

처음 구상과 다르게 총 7페이지를 만들었다.

 

 

 

페이지 설명 및 코드

1. 메인

 

 

보러가기 버튼을 누르면 메뉴로 이동한다. 

 

main.html

<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
    <link rel = "stylesheet"type="text/css" href="./css/main.css"/>
    
    
</head>
<body style="background-color: rgb(255,120,137);" >
    
    <div class="myname">김해선</div>
    <div>
        <p class="comment">나를 소개합니다.</p>
    </div>
    
    <div class="row">
        <button type="button" class="button" onclick="location.href='menu.html'">보러가기</button>
    </div>

</body>
</html>

 

main.css

* {
    font-family: 'Do Hyeon', sans-serif;
}

.myname {
   text-align: center;
   margin-top: 60%;
   color: white;
   font-size: 8rem;
}
.comment{
    color: white;
    text-align: center;
    margin-top: 10%;
    margin-bottom: 20%;
    font-size: 2rem;
}

.row{
    text-align: center;
}

.button{
    color: rgb(255,120,137);
    font-size: 3rem;
    background-color: white;
    width: 50%;
    height: 7%;
    text-align: center;
    border-radius: 1rem;
    border: none;
    margin-top: 50%;
    
}

 

 

 

2. 메뉴

 

뒤로가기 버튼으로 메인화면으로 이동, 각 버튼을 클릭하여 해당 화면으로 이동한다. 

 

menu.html

<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/menu.css">
    
</head>
<body style="background: #f5f5f5;">
    <nav>
        <div class="nav_bar">
            <img class="back" src="./images/left.png" onclick="location.href='main.html'">
            <p class="title">메뉴</p>
        </div>
    </nav>
    
    <div class="menu">
        <div class="toprow">
            <button class="button1" type="button" onclick="location.href='myinfo.html'">신상 정보</button>
            
            <button class="button2" type="button" onclick="location.href='bookmark.html'">블로그</button>
            
        </div>
        <div class="bottomrow">
            <button class="button3" type="button" onclick="location.href='gallery.html'">갤러리</button>
            
            <button class="button4" type="button" onclick="location.href='interest.html'">관심분야</button>
            
        </div>
    </div>
    
        
    
</body>
</html>

 

menu.css

* {
    font-family: 'Do Hyeon', sans-serif;
}

nav{
    color: black;
    background-color: white;
    width: 100%;
    height: 120px;
    line-height: 56px;
   
}

.nav_bar {
    text-align: center;
    height:100%;
}

.back{
    float: left;
    margin: 30px 25px;
    width: 55px;
}

.title{
    position: relative;
    font-size: 3rem;
    padding: 30px;
    font-weight: bold;
}

.menu{
    margin-top: 60%;
    text-align: center;
}
.toprow{
    text-align: center;
}
.button1{
    color: white;
    font-size: 3rem;
    background-color: rgb(252, 143, 157);
    width: 49%;
    height: 22%;
    margin-bottom:5px;
    border: none;

}
.button2{
    color: white;
    font-size: 3rem;
    background-color: rgb(255, 176, 187);
    width: 49%;
    height: 22%;
    border: none;

}
.button3{
    color: white;
    font-size: 3rem;
    background-color: rgb(255, 176, 187);
    width: 49%;
    height: 22%;
    border: none;

}
.button4{
    color: white;
    font-size: 3rem;
    background-color: rgb(252, 143, 157);
    width: 49%;
    height: 22%;
    border: none;

}

 

 

3. 신상정보

 

뒤로가기 버튼을 누리면 메뉴로 이동한다.

 

myinfo.html

<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/myinfo.css">
    
</head>
<body style="background: #f5f5f5;">
    <nav>
        <div class="nav_bar">
            <img class="back" src="./images/left.png" onclick="location.href='menu.html'">
            <p class="title">신상정보</p>
        </div>
    </nav>
    
    <div class="profilediv">
        <img class="profilepic" src="./images/profile.jpg"/>
    </div>
    
    <div class="container">
    <div class="profileinfo">
        <div>
            <img class="star" src="./images/star1.png">
            <p>이름 : 김해선</p>
        </div>
        <div>
            <img class="star" src="./images/star1.png">
            <p>별명 : 김미썸</p>
        </div>
        <div>
            <img class="star" src="./images/star1.png">
            <p>나이 : 26</p>
        </div>
        <div>
            <img class="star" src="./images/star1.png">
            <p>사는곳 : 서울시 마포구 서교동</p>
        </div>
        <div>
            <img class="star" src="./images/star1.png">
            <p>요즘 고민 : 지옥철이 너무 싫다 ㅠㅠ</p>
        </div>
    </div>
    </div>

    
</body>
</html>

 

myinfo.css

* {
    font-family: 'Do Hyeon', sans-serif;
}
nav{
    color: black;
    background-color: white;
    width: 100%;
    height: 120px;
    line-height: 56px;
}

.nav_bar {
    text-align: center;
    height:100%;
}

.back{
    float: left;
    margin: 30px 25px;
    width: 55px;
}

.title{
    position: relative;
    font-size: 3rem;
    padding: 30px;
    font-weight: bold;
}


.profilediv{
    width: 500px;
    height: 500px; 
    border-radius: 70%;
    border-width: 3px;
    border-color:pink;
    overflow: hidden;
    margin-top: 20%;
    margin-left: 23%;
    margin-bottom: 30%;
}
.profilepic{
    width:100%;
    height:100%;
    object-fit: cover;
}

.container{
    background-color: white;
    border-radius: 50px;
    width: 90%;
    margin-left:5%;
    padding-top:5%;
    padding-bottom:5%;
    
}
.profileinfo{
    
    margin-left: 10%;
    font-size: 3rem;
    
}

.star{
    float: left;
    width: 55px;
    margin: 5px 10px;
    
}

 

4. 즐겨찾기

각 카드를 누르면 해당 블로그로 각각 이동하며, 뒤로가기 버튼을 누르면 메뉴로 이동한다.

 

bookmark.html

<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" type="text/css" href="./css/bookmark.css">
</head>
<body style="background: #f0f0f0;">
    <nav>
        <div class="nav_bar">
            <img class="back" src="./images/left.png" onclick="location.href='menu.html'">
            <p class="title">블로그</p>
        </div>
    </nav>    
    <div class="card">
        <div class="w3-card-4" type="button" onclick="location.href='https://gimmesome.tistory.com/'">
            <img class="blogimage" src="./images/pic14.jpg">
            <div class = "w3-container w3-center">
                <p>학업 블로그 클릭하여 방문하기</p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="w3-card-4" type="button" onclick="location.href='https://blog.naver.com/khs51777'">
            <img class="blogimage" src="./images/pic1.jpg">
            <div class = "w3-container w3-center">
                <p>일상 블로그 클릭하여 방문하기</p>
            </div>
        </div>
    </div>
    
</body>
</html>

 

bookmark.css

* {
    font-family: 'Do Hyeon', sans-serif;
}
nav{
    color: black;
    background-color: white;
    width: 100%;
    height: 120px;
    line-height: 56px;
   
}

.nav_bar {
    text-align: center;
    height:100%;
}

.back{
    float: left;
    margin: 30px 25px;
    width: 55px;
}

.title{
    position: relative;
    font-size: 3rem;
    padding: 30px;
    font-weight: bold;
}

.card{
    margin-top: 30%;
    margin-left: 10%;
}

.w3-card-4{
    width:90%;
}

.blogimage{
    width:100%;
}

 

 

 

5. 갤러리 - 1

메뉴에서 갤러리를 누르면 나오는 페이지이며 슬라이드로 사진보기를 클릭할경우 사진들을 슬라이드로 볼수 있다.

 

gallery.html

<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/gallery.css">
</head>
<body>
    <nav>
        <div class="nav_bar">
            <img class="back" src="./images/left.png" onclick="location.href='menu.html'">
            <p class="title">갤러리</p>
        </div>
    </nav>
    
    <div class="container">
        <div class="goslide">
            <p type="button" onclick="location.href='./gallery2.html'">슬라이드로 사진 보기</p>
        </div>
        <div>
            <img class="pic" src="./images/pic2.jpg">     
            <img class="pic" src="./images/pic3.jpg">       
            <img class="pic" src="./images/pic4.JPG">
        </div>       
        <div>
            <img class="pic" src="./images/pic5.JPG">       
            <img class="pic" src="./images/pic7.jpg">
            <img class="pic" src="./images/pic8.JPG">
        </div>
        <div>
            <img class="pic" src="./images/pic9.jpg">       
            <img class="pic" src="./images/pic10.JPG">
            <img class="pic" src="./images/pic13.jpg">
        </div>
        <div>
            <img class="pic" src="./images/pic14.jpg">       
            <img class="pic" src="./images/pic11.JPG">
            <img class="pic" src="./images/pic12.JPG">
        </div>
        <div>
            <img class="pic" src="./images/pic16.jpg">       
            <img class="pic" src="./images/pic17.jpg">
            <img class="pic" src="./images/pic18.jpg">
        </div>
        
    </div>
    
</body>
</html>

 

gallery.css

* {
    font-family: 'Do Hyeon', sans-serif;
}
nav{
    color: black;
    background-color: white;
    width: 100%;
    height: 120px;
    line-height: 56px;
    
}

.nav_bar {
    text-align: center;
    height:100%;
}

.back{
    float: left;
    margin: 30px 25px;
    width: 55px;
}

.title{
    position: relative;
    font-size: 3rem;
    padding: 30px;
    font-weight: bold;
}
.container{
    margin-top: 18%;
    text-align: center;
}

.goslide{
    background-color:rgb(255, 215, 222);
    text-align:center;
    font-size:3rem;
    margin-bottom:10%;
    margin-left:25%;
    margin-right:25%;
    padding:1px;
    border-radius: 40px;
}
.goslide:hover{
    background-color:rgb(253, 183, 195);
}

.pic{
    width:300px;
    height:300px;
    object-fit: cover;
}

 

 

6. 갤러리 - 2

 

갤러리 - 1의 사진들을 슬라이드로 볼수 있다.

2초 간격으로 다음사진으로 넘어가며 '갤러리로 돌아가기' 버튼을 클릭하면 갤러리 - 1로 돌아간다.

bootstrap의 carousel을 사용하여 슬라이드를 구현하였다.

 

gallery2.html

<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/gallery2.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body style="background: #ffeaea;">

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script>
    $('.carousel').carousel({
        interval: 2000
      })
    </script>

    
    <nav>
        <div class="nav_bar">
            <img class="back" src="./images/left.png" onclick="location.href='menu.html'">
            <p class="title">갤러리</p>
        </div>
    </nav>

    <div class="bottom">
        <div class="goslide">
            <p type="button" onclick="location.href='./gallery.html'">갤러리로 돌아가기</p>
        </div>
        <div class="container">
            

            <div id="carousel1" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="./images/pic2.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./images/pic3.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./images/pic4.JPG" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./images/pic5.JPG" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./images/pic7.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./images/pic8.JPG" class="d-block w-100" alt="...">
                    </div>
                
                </div>
            </div>
            <br/>
            <div id="carousel2" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="./images/pic13.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./images/pic14.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./images/pic11.JPG" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./images/pic12.JPG" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./images/pic16.jpg" class="d-block w-100" alt="...">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
</body>
</html>

 

gallery2.css

* {
    font-family: 'Do Hyeon', sans-serif;
}
nav{
    color: black;
    background-color: white;
    width: 100%;
    height: 120px;
    line-height: 56px;
   
}

.nav_bar {
    text-align: center;
    height:100%;
}

.back{
    float: left;
    margin: 30px 25px;
    width: 55px;
}

.title{
    position: relative;
    font-size: 3rem;
    padding: 30px;
    font-weight: bold;
}

.bottom{
    padding-top:5%;
    height: 100%;
}

.container{
    margin-top:30%;
    text-align: center;
    width:100%;
}

.goslide{
    background-color:rgb(250, 166, 180);
    text-align:center;
    font-size:3rem;
    margin:25% 25% 5% 25%;
    padding:30px;
    border-radius: 30px;
}
.goslide:hover{
    background-color:rgb(253, 183, 195);
}

 

 

 

7. 관심분야

할말도 없고 그래서.. 텍스트만 넣어놨다. 뒤로가기 버튼을 누르면 메뉴로 이동하는 것은 구현하였다.

 

interest.html

<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/interest.css">
</head>
<body style="background: #ffeaea;">
    <nav>
        <div class="nav_bar">
            <img class="back" src="./images/left.png" onclick="location.href='menu.html'">
            <p class="title">관심분야</p>
        </div>
    </nav>
    <div class="container">
        <div class="text">
            <p>취미 : 동영상 편집, 헬스</p>
        
            <p> 특기 : ...</p>
            <p> 블라블라블라블라</p>

        </div>
    </div>
    
</body>
</html>

 

interest.css

* {
    font-family: 'Do Hyeon', sans-serif;
}
nav{
    color: black;
    background-color: white;
    width: 100%;
    height: 120px;
    line-height: 56px;
   
}

.nav_bar {
    text-align: center;
    height:100%;
}

.back{
    float: left;
    margin: 30px 25px;
    width: 55px;
}

.title{
    position: relative;
    font-size: 3rem;
    padding: 30px;
    font-weight: bold;
}

.container{
    margin-top: 60%;
    margin-left: 20%;
}

p {
    font-size: 10rem;
}

 

728x90
반응형

'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' 카테고리의 다른 글

11/16 - Java (6) : java.lang (String , Math, Wrapper, System), java.util (Date, Calendar)  (0) 2020.11.16
11/13 - Java (5) : eclipse, java.lang( Object , String )  (0) 2020.11.16
11/12 - Java(4) : package, import, 접근 제한  (0) 2020.11.12
11/11 - Java (3) : 생성자, final, 객체 참조 배열, 상속, 오버라이딩  (0) 2020.11.11
11/10 - Java (2) : 배열, 객체지향, 클래스, 메소드, this, static  (0) 2020.11.10
'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' Related Articles more