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
관리 메뉴

프로그래밍 삽질 중

영화 사이트 만들어 보기 - footer 본문

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

영화 사이트 만들어 보기 - footer

평부 2022. 6. 5. 20:11

* 인프런 '파이널 코딩 테스트 : 프론트엔드' 공부 후 만들어 보는 자료

* 100% 똑같지 않음(저작권이 걸리기 때문)

* 네이버 영화 화면(2022.06.05 기준)

* 메인화면(검은색 바탕) + footer 화면(회색 바탕) 만들어 볼 것

* html,css가 주 목적

 

 

 

 

[index.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
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2022.06.05 Naver Movie</title>
    <link rel="stylesheet" href="./style/reset.css" />
    <link rel="stylesheet" href="./style/style.css" />
  </head>
  <body>
    <h1 class="behind-data">네이버 영화</h1>
    <section class="naver-movie">
      <h2 class="title-naver">네이버 영화 목록</h2>
      <header>
        <h3 class="behind-data">영화 분류</h3>
        <nav class="naver-moive">
          <ul class="list-moiveNav">
            <li><a href="#" class="link-nav">박스오피스</a></li>
            <li><a href="#" class="link-nav">현재상영작</a></li>
            <li><a href="#" class="link-nav">개봉예정작</a></li>
            <li><a href="#" class="link-nav">평점순</a></li>
            <li><a href="#" class="link-nav">다운로드순</a></li>
          </ul>
        </nav>
      </header>
      <section>
        <h3 class="behind-data">박스오피스 영화 목록</h3>
        <ul class="list-movieInfo">
          <li>
            <article>
              <h4 class="behind-data">각 영화별 관객 수</h4>
              <a href="#">
                <img src="#" alt="영화 관객 수" />
              </a>
              <dl>
                <div>
                  <dt>주말관객</dt>
                  <dd>1,792,845명</dd>
                </div>
              </dl>
            </article>
          </li>
        </ul>
      </section>
      <footer class="naver-company">
        <section class="naver-coInfo">
          <h2 class="behind-data">네이버 기업 정보</h2>
          <dl class="naver-lawInfo">
            <dt>이용약관</dt>
            <dd></dd>
            <dt>개인정보처리방침</dt>
            <dd></dd>
            <dt>책임의 한계와 법적고지</dt>
            <dd></dd>
            <dt>영화 고객센터</dt>
            <dd></dd>
          </dl>
          <br />
          <br />
          <p class="naver-law-text">
            본 콘텐츠의 저작권은 저작권자 또는 제공처에 있으며, 이를 무단
            이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.
          </p>
          <br />
          <dl class="naver-info">
            <dt>사업자등록번호</dt>
            <dd>000-00-00000</dd>
            <dt>통신판매업 신고번호</dt>
            <dd>0000-0000</dd>
            <dt>대표이사</dt>
            <dd>아무개</dd>
            <dt>사업자등록정보 확인</dt>
            <div class="naver-info-item">
              <dt>주소</dt>
              <dd>서울특별시 어디어디어디어디어디</dd>
              <dt>대표전화</dt>
              <dd>0000-0000</dd>
            </div>
          </dl>
          <br />
          <br />
          <br />
          <small class="text-copy">
            Copyright &copy;Naver Corp. All right Reserved</small
          >
        </section>
      </footer>
    </section>
  </body>
</html>
 
 cs

 

[style]

reset.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
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    text-decoration: none;
    color: black;
}
 cs

 

[style]

style.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
@charset "utf-8";
 
/* 유틸리티 */
/* 스크린리더 전용 */
.behind-data {
    position: absolute;
    left: -1000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* 메인 스타일 */
/* nav 스타일 */
/* 컨텐츠 스타일 */
/* footer 디자인 */
.naver-company {
    background: #BDBDBD;
    margin-top: 135px;
    height: 300px;
}
.naver-company .naver-coInfo {
    position: relative;
    overflow: hidden;
    width: 1189px;
    margin: 0 auto;
    top: 20%;
    left: 5%;
}
.naver-company .naver-lawInfo dt, .naver-company .naver-lawInfo dd{
    color: white;
    display: inline-block;
    float: left;
    position: relative;
    left: 200px;
}
.naver-company .naver-lawInfo dt {
    font-weight: 700;
    margin-left: 5px;
    margin-right: 5px;
}
.naver-company .naver-lawInfo dd::after {
    display: inline-block;
    content: '';
    width: 1px;
    height: 12px;
    margin: 0 7px;
    background: #000;
}
.naver-company .naver-lawInfo dd:last-child::after {
    display: none;
}
.naver-info {
    width: 800px;
    background-color: white;
}
 
.naver-company .naver-info dt, .naver-company .naver-info dd {
    color: #ece9e9e1;
    display: inline-block;
    float: left;
    position: relative;
    left: 100px;
}
.naver-company .naver-info dt {
    font-weight: 700;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.naver-company .naver-info dd::after {
    display: inline-block;
    content: '';
    width: 1px;
    height: 12px;
    margin: 0 7px;
    background: #000;
}
.naver-company .naver-info .naver-info-item {
    position: relative;
    left: 158px;
}
.naver-company .text-copy {
    color: white;
    float: left;
    position: relative;
    left: 350px;
}
.naver-law-text {
    color: #ece9e9e1;
    font-size: 13px;
    position: relative;
    left: 120px;
}
 cs

 

* 결과

 

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

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

CSS Diner 12~21번  (0) 2022.06.30
CSS Diner 1~11번  (0) 2022.06.30
영화 사이트 만들어 보기 - HTML 마크업  (0) 2022.06.05
[복습하기2] 메인 이미지, 글 작성 폼 만들기  (0) 2021.09.05
[복습하기1] 블로그 게시글 만들기  (0) 2021.09.05
'과거 프로그래밍 자료들/Html&CSS' Related Articles more