[학습튜터링] 네비게이션 바 외 CSS(background-image등)

2019. 9. 25. 01:33

튜터링으로 저번에 만든 자기소개 웹페이지를 조금 더 꾸며보았다. 차례대로 html 파일과 CSS 파일이다.

 

MyPage_KDH.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
    <head>
    <title>Welcome KDH HomePage</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="MyPage_CSS.css">
    </head>
    <body>
        <div style="text-align: center">
            <nav>
                <ul class="nav-container">
                    <li class="nav-item"><a href="">INFO</a></li>
                    <li class="nav-item"><a href="">ABOUT</a></li>
                    <li class="nav-item"><a href="">TIMETABLE</a></li>
                    <li class="nav-item"><a href="">STUDY</a></li>
                    <li class="nav-item"><a href="">SNS</a></li>
                </ul>
            </nav>
            <br/><br/><br/><br/>
    <div class="contain">
    <h1>ABOUT ME</h1>
    <br/>
    <a href="https://github.com/ire4564"><img src="github.png" width="70px" height="70px"></a>
    <a href="https://www.facebook.com/profile.php?id=100005103496461"><img src="facebook.png" width="73px" height="73px"></a>
    <a href="https://www.instagram.com/ire_0546/"><img src="instagram.png" width="70px" height="70px"></a>
    <a href="https://iredays.tistory.com/"><img src="blog.png" width="64px" height="64px"></a>
 
    <h4 style="color: gray">Click this icons<br>then, you can go to My SNS Page</h4>
    <h5>welcome to my information homepage! actually, this is my frist info page<br>but not difficult to make this page. you know, I'm not good at English well! <br>Actually, this talks about Me, but I don't have many too much information.<br> hum well, yes.frist my favorite food is cheese and Korean Barbecue.</h5>
 
    <h6 style="color: gray">@ire4564_info COMPANY</h6>
    </div>
    </div>
    </body>
</html>
 
  

 

MyPage_CSS.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
cssbody {
    margin: 0;
    background-image: url('star.jpg');
}
 
.nav-container {
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0;
    padding: 0; /*쓸데없는 공백 제거*/
    background-color: darkslategrey;
    list-style-type: none;
}
 
.nav-item {
    padding: 15px;
    cursor: pointer;
}
 
.nav-item a {
    text-align: center;
    text-decoration: none;
    color: white;
}
 
.contain {
    margin-top: 5%;
    margin-left: 20%;
    align-content: center;
    width: 600px;
    height: flex;
    background-color: white;
    border: 5px;
    border-style: dashed;
    border-color: cadetblue;
}
 
  
저작자표시

'Undergraduate Records' 카테고리의 다른 글

[0926] C++ 언어의 흐름 이해하기  (0) 2019.09.26
[0926] 알고리즘 정렬 복습  (0) 2019.09.26
[0925] OOP Concept 구체적으로 설명 :: Python 상속 기초  (0) 2019.09.25
[0923] 객체지향설계 OOP 개념 대입하여 앱 분석하기  (0) 2019.09.24
[0920] Object-Oriented Design Concepts  (0) 2019.09.20

BELATED ARTICLES

more

티스토리툴바