Notice
Recent Posts
Recent Comments
Link
«   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
Tags more
Archives
Today
Total
관리 메뉴

프로그래밍 삽질 중

[유투브 강의] 드림코딩 by 엘리님 반응형 웹 만들기 공부 본문

과거 프로그래밍 자료들/Html&CSS

[유투브 강의] 드림코딩 by 엘리님 반응형 웹 만들기 공부

평부 2021. 6. 3. 22:36

※ 학습 이유 : 웹페이지 크기에 따라 늘어나고 웹 상단(header) 부분이 바뀌는 부분을 공부하고 싶었음

※ 코드는 전적으로 드림코딩 by 엘리님에게 있으며, 문제가 될 경우 내릴 예정

※ https://www.youtube.com/watch?v=X91jsJyZofw&t=1434s (참고 사이트)

※ 스프링을 공부하고 있어 화면 표시 부분은 jsp로 진행

※ 총 진행 파일(html : test3.jsp / css : test3_css.css / javascript : test3_js.js)

 

 

header 부분(전체 화면)

header 부분(크기를 줄일 때 화면)

오른쪽 아이콘을 클릭하면 아래와 같이 이동(js)

[html : test3.jsp]

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- icon link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
<!-- css link -->
    <link rel="stylesheet" type="text/css" href="test3_css.css">
<!-- 반응형 웹 관련 link -->    
    <link rel="stylesheet" media="screen and (max-width: 768px)" href="test3_css.css" />
<!-- font link -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<!-- java script -->
    <script src="test3_js.js" defer></script>
</head> 
<meta charset="UTF-8">
<title>Nav Bar</title>
</head>
<body>
    <nav class="navbar">
        <div class="navbar_logo">
            <i class="fab fa-accusoft"></i>
            <a href="">DreamCoding</a>
        </div>
        
        <ul class="navbar_menu">
            <li><a href="">Hello</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">Wedding</a></li>
            <li><a href="">FAQ</a></li>
            <li><a href="">Bookings</a></li>
        </ul>
        
        <ul class="navbar_icons">
            <li><i class="fab fa-twitter"></i></li>
            <li><i class="fab fa-facebook"></i></li>
        </ul>
        <a href="#" class="navbar_toogleBtn">
            <i class="fas fa-bars"></i></a>
    </nav>
</body>
</html>
 cs

 

[css : test3_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
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
body {
    margin: 0; /*웹 페이지를 상단 바가 다 채움*/
    font-family: 'Roboto', sans-serif; /*body 내 모든 포튼 동일 적용*/
}
.navbar {
    display: flex; /*한 줄에 나란히*/
    justify-content: space-between; /*스페이스를 사이사이에 넣음*/
    align-items: center; /*중앙 배치*/
    background-color: #263343;
    padding: 8px 12px; /*navbar 크기 조정*/
}
a{
    text-decoration: none;/*.없앰*/
    color: white;
}
.navbar_logo {
    font-size: 24px;
    color : white;
}
.navbar_logo {
    color: orange;    
}
.navbar_menu {
    display: flex; /*한 줄에 하나씩 나옴*/
    list-style:none; /*홈이 같지 않음*/
    padding-left: 0; /*이렇게 지정해서 중앙에 배치*/
}
.navbar_menu li {
    padding: 8px 12px; /*메뉴안 내용들의 간격 조정*/
}
.navbar_menu li:hover {/*클릭시 색깔 변함*/
    background-color: #d49466;
    border-radius: 4px; /*모서리 둥글게*/
}
.navbar_icons{
    color: white;
    display: flex;
    list-style:none;    
    padding-left: 0; /*중앙 배치*/
}
.navbar_icons li {
    padding: 8px 12px;
}
.navbar_toogleBtn { /*위치 조정*/
    display: none; /*큰 크기때는 안 보이게 함*/
    position: absolute; /*제일 위에 배치*/
    right: 32px; /*오른쪽에서 32px 떨어진 곳에 배치*/
    font-size: 24px;
    color: white;
}
@media screen and (max-width: 1075px) { /*영상에선 768px*/
    .navbar {
        flex-direction: column; /*기존은 row, column으로 아래로 내림*/
        align-items: flex-start; /*왼쪽으로 이동*/
    }
    .navbar_menu{
        display: none; /*화면에서 사라짐*/
        flex-direction: column;
        align-items: center; /*중앙배치*/
        width: 100% /*align-items가 반응하지 않는 부분을 width가 보완*/
    }
    .navbar_menu li{ /*hover부분이 넓어짐*/
        width: 100%; 
        text-align: center;
    }
    .navbar_icons {
        display: none; 
        justify-content: center; /*중앙 배치*/
        width: 100%;
    }
    .navbar_toogleBtn{/*화면이 작아질때만 표시되도록 함*/
        display: block; 
    }
    .navbar_menu.active,
    .navbar_icons.active { /*navbar_toogleBtn이 클릭시 활성화*/
        display: flex;    
    }
}
 cs

[javascript : test3_js.js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*참고 사이트 : https://ko.javascript.info/searching-elements-dom
참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const */
 
/*const : 블록 범위의 상수 선언, 상수값 재할당 불가 & 다시 선언 불가*/
/*document.querySelector : id 속성만 있다면 위치와 상관없이 document.querySelector(id)를 이용해 접근 가능,
                            단, 요소 id를 따서 자동으로 선언된 전역변수는 동일한 이름을 가진 변수가 선언 시 무용지물*/
/*addEventListener : 지정한 이벤트가 대상에 전달될 때마다 호출하는 함수(여기서는 클릭을 지정)*/
/*classList.toggle(String [, force ]) 
    1개의 인수만 있을 때 : 클래스 값 토글링, 즉 클래스 존재 시 제거 → false 반환(존재하지 않으면 클래스 추가하고 true 반환)
    2번째 인수가 있을 때 : 두 번쨰 인수가 true → 지정한 클래스 값 추가하고 false로 평가되면 제거*/
 
const toogleBtn = document.querySelector('.navbar_toogleBtn');
const menu = document.querySelector('.navbar_menu');
const icons = document.querySelector('.navbar_icons');
 
toogleBtn.addEventListener('click', () => {
    menu.classList.toggle('active');
    icons.classList.toggle('active');
});
 cs

 

 

[배운 점]

1. 유투브 강의를 통해 css 관련해서 잘 이해되지 않던 부분들이 이해됨(특히 padding, display)

2. 반응형 웹 + 자바스크립트를 통해 좀 더 여러가지 기능을 구현(누르면 목록이 나옴)을 할 수 있었음

 

저작자표시 비영리 변경금지

'과거 프로그래밍 자료들 > Html&CSS' 카테고리의 다른 글

[유튜브 강의]스크립트 없이 만드는 자동 슬라이드 효과 /* transform:translateX */ [HTML+CSS{코남}] 공부  (0) 2021.06.05
[유튜브 강의] footer 부분 Awa Melvine 강의 참고  (0) 2021.06.04
HTML&CSS 예제(총 4개)  (0) 2021.05.21
HTML&CSS 정리(6) 변화 속성 ~ 반응형 웹(media 관련)  (0) 2021.04.06
HTML&CSS 정리(5) 표 레이아웃 속성 ~ 2차원 변환 함수  (0) 2021.04.05
'과거 프로그래밍 자료들/Html&CSS' Related Articles more