티스토리 뷰

HTML , CSS , JS

버튼을 이용한 페이지 느낌 내기

플레지 2019. 5. 22. 22:09

오늘은 버튼을 사용하여 홈페이지에 기본적으로 있는 메뉴 형식을 만들고 거기에 저번 시간에 공부했던 border-radius를  같이 사용해보겠다.

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
 
        <section class="header">
                    <div class="wrapper1">
                            <div class="logo"> <p> Arin </p>  </div>
                                <div class="nav">
                                    <ul>
                                        <li> <a href="#"> Home </a> </li>
                                        <li> <a href="#">    About </a> </li>
                                        <li> <a href="#"> Group </a> </li>
                                        <li> <a href="#"> Contact </a> </li>
                                        <li> <a href="#"> Login </a> </li>
                                    </ul>
                                </div>
                    </div>
        </section>
 
        <section class="Picture">
            <div class="wrapper1">
                <div class="Pictuer-section">
                    <div class="name">OhMyGirl</div>
                            <p>  The Fifth Season  :: SSFWL  </p>
                                <a href="https://namu.wiki/w/%EC%95%84%EB%A6%B0(%EC%98%A4%EB%A7%88%EC%9D%B4%EA%B1%B8)" target="_blank">See More</a>
 
 
                        <div class="wrapper2">            
                            <div class="for-img">
                                <img src="http://kstatic.inven.co.kr/upload/2018/03/18/bbs/i13368149934.jpg" alt="Arin">
                                        <div class="who"> Arin </div>
                                            <p> OhMyGirl Member </p>
                            </div>
 
                            <div class="for-img">
                                <img src="https://i.pinimg.com/originals/a8/af/8d/a8af8d1c94d38567170adda407a665ca.jpg" alt="Arin">
                                        <div class="who"> Arin </div>
                                            <p> OhMyGirl Member </p>
                            </div>
 
 
 
                            <div class="for-img">
                                <img src="https://www.liveen.co.kr/news/photo/201801/206653_249857_4737.jpg" alt="Arin">
                                        <div class="who"> Arin </div>
                                            <p> OhMyGirl Member </p>
                            </div>
 
                        </div>
                </div>
            </div>
        </section>
  </body>
</html>
 s

nav 영역이 바로 버튼들이 리스트 형태로 만들어질영역이다.  추가적으로 See More이라는 버튼을 만들어 버튼을 누르면 위키피디아로 넘어갈 수 있도록 링크도 걸어보겠다. (미적 감각 : 0 )

현재 HTML 코드 만 사용했을 때의 웹 모습니다.

 

 

이제부터 CSS 를 이용하여 무질서해 보이는 요소들을 하나하나 원하는 모습을 바꾸어보겠다.

  •   body 와 header  부분의 배경색을 구분되도록 색을 넣어주었다. <미적 감각이 부족해서 색조합이 극혐인부분은 오해가 아니다. >

       header 부분이 nav 를 포함하고 있으면 nav 는 ul태그를 가지고 있는 부모이다.    wrapper1이 nav 의 부모 클래스         이므로  wrapper1 에서 text-align : center;  margin : 0 auto; width : 100% 로 해주었다.

      여기서  margin: 0 auto ; 는 중앙 정렬 속성이다.  여기서 0은 위 아래로 여백을 주지않는다는 의미이다. auto는 가        로  중앙으로 배치가 되도록해준다. 좌우 여백이 균등하게 배분이 된다 .   순서는 top 부터 시계방향이다. 

      풀어서 쓰면 margin : 0 auto 0 auto 이다 상 우 하 좌 순이다.

      여기서 예외상황이 발생할수있다.  폭의 연산이 불가능할때 가운데 정렬이 제대로 이루어 지지 않으수 있다. 그부          분을  처리해주기 위해서 overflow : hidden 처리를 해주었다. 넘치는 부분은 무시하고 정렬을 우선적으로  수행할        수 있도록해준다.

  • heder 부분을 구성하는 클래스는  log 클래스와 nav 클래스가 된다. 

     화면크기에 따라서 폭을 고정으로 설정해두면 scroll 이 생기게 되므로  생기지 않도록해주기위해서 log 클래스는         width : 30% ;  , nav 클래스는 70% 로 맞추어주었다.

    logo 에서 height 10px 로 맞추어준 이유는 Arin 문자 font-size : 30px 로 설정시  nav 클래스 안에있는 a 태크 속성      들의 문자들의 font-size : 20px 이므로 높낮이가 맞지 않게 형성되게된다.

    이를 방지하기 위해서 처리해준결과이다. 왼쪽 정렬이 되도록   log 클래스 는 float : left; nav 클래스는 float : right ;      로 처리해주었다. 

    여기서 <li> 요소들의 기본 display 값이 block 이므로 line 으로 바꾸어 주어야 한다.    이후에 버튼 특유의 이미지        가   보이지 않도록 list-style  : none;  a태크의 text-decoration : none; 로 처리해준다.  

 

현재까지 모습은 아래와 같다.

여기서  hover 라는 속성을 사용해보겠다.  

hover는 동적 의사 클래스 중 하나이다.   동적 의사 클래스에는 아래와 같은 것들이 있다.

동적 의사 클래스(dynamic pseudo-class)

CSS에서 사용할 수 있는 동적 의사 클래스는 다음과 같다.

link 링크의 기본 상태이며, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않은 상태입니다.
visited 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태입니다.
hover 사용자의 마우스 커서가 링크 위에 올라가 있는 상태입니다.
active 사용자가 마우스로 링크를 클릭하고 있는 상태입니다.
focus 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태입니다.

출처: tcpschool

말 그대로 버튼을 누르려고 커서를 올려두면 그 영역 색이 변하도록 해줄 것이다. 사용도 간단하다.

 .nav ul li a:hover {

background: whitesmoke; 

color:#FA58D0 ;

border-radius: 250px; 

}

해당 마우스 커서가 올라 갔을때 생성되는 배경색을 whitesmoke으로 글씩색은 #FA58D0 이 되도록 해줍니다.

저번 시간에 배웠던 border-radius로 hover 속성이 둥그렇게 나오도록 250px로 해주겠습니다.

마우스 커서를 Home에 올려두니  hover 속성으로 인해서 둥그렇게 모양이 변한 것을 알 수 있습니다. 옆에 있는 다른 버튼들도  hover에 의해서 모두 적용이 되었습니다.

  • 이제 SeeMore을 누르면 아린 위키피디아로 연결될 수 있도록 버튼을 하나 더 만들어 보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.Picture a{
    text-decoration: none;
    color: #FA58D0;
    font-size: 25px;
    background:  white;
    border-radius: 10px;
   border : 10px solid palevioletred;
    padding: 5px 15px;
}
.Picture a:hover{
    background:#A9A9F5;
    color: #222;
 
}
 
  

이 코드로 인해서 심플한 버튼이 완성되었습니다. 내용 설명이 중복이라 생략.

여기에다가 저번 시간에 공부했던 border-radius 사진을 가져와 이 페이지와 잘 어울리도록 일부 수정해주면 다음과 같은 이미지가 나오게 됩니다.

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
body{
    background: #F8E0EC;
}
 
.header{
    background: #D8F6CE;    
}
 
.wrapper1{
    text-align: center;
    margin: 0 auto;
    width:  100%;
    overflow: hidden;
}
 
.logo{
    width: 30%;
    height: 10px;
 
    float: left;
    font-size: 30px;
    color :#FA58D0;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
 
.nav{
    width: 70%;
    padding : 10px; 
    float: right;
}
 
.nav ul{
    list-style: none;
    float: right;
}
 
.nav ul li{
    display: inline;
}
 
.nav ul li a{
     text-decoration: none;  padding: 15px 20px; font-size: 20px;
     color : #31B404;
 }
 
 .nav ul li a:hover{
 
     background: whitesmoke; color:#FA58D0 ;
     border-radius: 250px;
 }
 .Picture{
     text-align: center;
 }
.Picture a{
    text-decoration: none;
    color: #FA58D0;
    font-size: 25px;
    background:  white;
    border-radius: 10px;
  border : 10px solid palevioletred;
    padding: 5px 15px;
}
.Picture a:hover{
    background:#A9A9F5;
    color: #222;
 
}
 
.Pictuer-section p{
 color: #222;
 font-size: 20px;
}
 
/* font type 바꾸어줍시다*/
  .name{
      color : #FFFF00; font-size: 70px;
 }
 .who{
     font-size: 40px;
     color: #81F7F3;
 }
 
.wrapper2 p{
     font-size: 20px;
     color: #222;
 }
 
 .wrapper2{
     text-align: center;
     width: 100%;
     margin-top:40px; 
 }
 
.for-img{
     width: 33%;
     float : left;
     position: static;
 }
 .for-img img{
     width: 70%;
     border-radius: 250px; 
 }
 
  

 

원본 링크 : https://pratice-arin--kind.repl.co/

 

 

 

저작자표시

'HTML , CSS , JS' 카테고리의 다른 글

사이드바와 checkbox 를 이용한 페이지 만들기  (0) 2019.06.01
sticky 를 이용한 웹 소개 페이지 만들기  (0) 2019.06.01
border-radius-property  (0) 2019.05.15
CSS-border 속성(property)  (0) 2019.05.15
box-shadow 와 text-shadow 사용하기  (0) 2019.05.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
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
글 보관함