[KEDUIT] 클라우드 컴퓨팅과 보안솔루션을 활용한 DC 엔지니어 양성교육 - Day46

April 11, 2023 3 분 소요

1. 서론

오늘은 HTML, CSS를 활용하여 선생님께서 제시해준 화면을 구성해 보았고, OSPF의 LSA Type과 Stub Area에 대하여 알아보았다.

2. 본론

1. Front-End

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 기본 프로젝트</title>
    <link rel="stylesheet" href="final_css.css" />
  </head>
  <body>
    <div id="page-wrapper">
      <header>
        <hgroup>
          <h1>HTML5 Example Preview</h1>
          <h2>한국정보교육원</h2>
        </hgroup>
      </header>
      <nav>
        <div class="nav-left">
          <ul class="outer-menu-item">
            <li class="outer-menu-li">
              <a href="javascript:void(0)" class="outer-menu-title">HTML5</a>
              <ul class="inner-menu">
                <li class="inner-menu-li"><a href="#">데이터</a></li>
                <li class="inner-menu-li"><a href="#">데이터</a></li>
              </ul>
            </li>
            <li class="outer-menu-li">
              <a href="javascript:void(0)" class="outer-menu-title">CSS</a>
              <ul class="inner-menu">
                <li class="inner-menu-li"><a href="#">데이터</a></li>
                <li class="inner-menu-li"><a href="#">데이터</a></li>
                <li class="inner-menu-li"><a href="#">데이터</a></li>
              </ul>
            </li>
            <li class="outer-menu-li">
              <a href="javascript:void(0)" class="outer-menu-title"
                >JAVASCRIPT</a
              >
              <ul class="inner-menu">
                <li class="inner-menu-li"><a href="#">데이터</a></li>
                <li class="inner-menu-li"><a href="#">데이터</a></li>
                <li class="inner-menu-li"><a href="#">데이터</a></li>
                <li class="inner-menu-li"><a href="#">데이터</a></li>
                <li class="inner-menu-li"><a href="#">데이터</a></li>
                <li class="inner-menu-li"><a href="#">데이터</a></li>
                <li class="inner-menu-li"><a href="#">데이터</a></li>
                <li class="inner-menu-li"><a href="#">데이터</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="nav-right">
          <div>
            <form>
              <input class="box" type="text" />
              <input class="submit_box" type="submit" value="검색" />
            </form>
          </div>
        </div>
      </nav>
      <div id="content">
        <section id="main_section">
          <article>
            <div class="article_header">
              <h1 class="article_title">HTML5 개요와 활용</h1>
              <p class="article_date">2023년 04월 11일</p>
            </div>
            <div class="article_body">
              <img src="http://placehold.it/430x280" />
              <br />
              <br />
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Praesent commodo justo ac lorem pretium vitae rhoncus lectus
                ullamcorper. Aliquam facilisis euismod diam sollicitudin
                commodo. Nunc sagittis sapien venenatis lorem vestibulum cursus
                pellentesque mi sodales. Donec pellentesque hendrerit turpis,
                vitae tempor nibh ultricies at. Aliquam consequat rutrum erat,
                vel sodales tellus sagittis at. Proin sollicitudin augue eu
                augue vehicula vitae bibendum odio porta. Aliquam elit arcu,
                venenatis in imperdiet ut, scelerisque non dolor. Donec in
                vulputate tortor.
              </p>
              <br />
              <p>
                Praesent orci quam, ornare sed scelerisque ac, porta a justo.
                Pellentesque quis magna sed magna vehicula semper ac ut enim.
                Duis ut mattis ligula. Mauris at sem elit. Vestibulum justo
                tortor, malesuada non tincidunt quis, feugiat ut metus. Maecenas
                varius neque ut diam ultrices scelerisque.
              </p>
            </div>
          </article>

          <article>
            <div class="article_header">
              <h1 class="article_title">HTML5 개요와 활용</h1>
              <p class="article_date">2023년 04월 11일</p>
            </div>
            <div class="article_body">
              <img src="http://placehold.it/430x280" />
              <br />
              <br />
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Praesent commodo justo ac lorem pretium vitae rhoncus lectus
                ullamcorper. Aliquam facilisis euismod diam sollicitudin
                commodo. Nunc sagittis sapien venenatis lorem vestibulum cursus
                pellentesque mi sodales. Donec pellentesque hendrerit turpis,
                vitae tempor nibh ultricies at. Aliquam consequat rutrum erat,
                vel sodales tellus sagittis at.
              </p>
              <br />
              <p>
                Praesent orci quam, ornare sed scelerisque ac, porta a justo.
                Pellentesque quis magna sed magna vehicula semper ac ut enim.
                Duis ut mattis ligula. Mauris at sem elit. Vestibulum justo
                tortor, malesuada non tincidunt quis, feugiat ut metus. Maecenas
                varius neque ut diam ultrices scelerisque.
              </p>
            </div>
          </article>
        </section>

        <aside id="main_aside">
          <div class="aside_list">
            <h3>카테고리</h3>
            <ul>
              <li><a href="#">데이터</a></li>
              <li><a href="#">데이터</a></li>
              <li><a href="#">데이터</a></li>
              <li><a href="#">데이터</a></li>
              <li><a href="#">데이터</a></li>
            </ul>
          </div>

          <div class="aside_list">
            <h3>최근 글</h3>
            <ul>
              <li><a href="#">데이터</a></li>
              <li><a href="#">데이터</a></li>
              <li><a href="#">데이터</a></li>
              <li><a href="#">데이터</a></li>
            </ul>
          </div>
        </aside>
      </div>

      <footer>
        <a href="#">Created By Team-HeXagon</a>
      </footer>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  font-family: "맑은 고딕", Arial, Helvetica, sans-serif;
}
body {
  background-color: #e6e6e6;
  width: 960px;
  margin: 0 auto;
}

#page-wrapper {
  background-color: white;
  margin: 40px 0;
  padding: 10px 20px;
}

a {
  text-decoration: none;
}
li {
  list-style: none;
}

/* 헤더 */
header {
  padding: 40px 50px;
}

header h1 {
  font-size: 30px;
  color: #181818;
}

header h2 {
  font-size: 15px;
  font-weight: 500;
}

/* navi */

nav {
  border-top: 1px solid #c8c8c8;
  border-bottom: 1px solid #c8c8c8;
  margin-bottom: 20px;
  height: 40px;
}

.nav-left {
  float: left;
}

.nav-right {
  float: right;
  height: 20px;
  line-height: 42px;
  vertical-align: middle;
}

.outer-menu-item {
}

.outer-menu-li {
  float: left;
  position: relative;
}
.outer-menu-title {
  display: block;
  padding: 5px 20px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.outer-menu-title:hover inner-menu-li {
  display: block;
}

.inner-menu {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 6px rgba(5, 5, 5, 0.9);
  z-index: 1000;
  text-align: center;
}

.inner-menu-li > a {
  display: block;
  padding: 5px 10px;
  color: black;
}

.inner-menu-li > a:hover {
  background-color: black;
  color: white;
}

.box {
  border-radius: 10px 0 0 10px;
  width: 120px;
  height: 21px;
  padding: 0 0 0 10px;
  font-size: 12px;
  color: black;
  border: 1px solid #cccccc;
}

.box:focus {
  background-color: rgba(82, 168, 236, 0.7);
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}

.submit_box {
  width: 50px;
  height: 22.5px;
  margin-left: -7px;
  border-radius: 0 15px 15px 0;
  border: 1px solid #cccccc;
}

/* 본문 */
#content {
  overflow: hidden;
}

#main_section {
  float: left;
  width: 710px;
}

#main_aside {
  float: right;
  width: 200px;
}

article {
  padding: 0 10px 20px 10px;
  border-bottom: 1px solid #c8c8c8c8;
}

.article_header {
  padding: 20px 0;
}

.article_title {
  font-size: 25px;
  font-weight: 500;
  padding-bottom: 10px;
}

.article_date {
  font-size: 13px;
}

.article_body {
  font-size: 14px;
}

/* 사이드바 */
.aside_list {
  padding: 10px 0 30px 0;
}

.aside_list > h3 {
  font-size: 15px;
  font-weight: 600;
}

.aside_list li a {
  margin-left: 8px;
  font-size: 13px;
  color: #6c6c6c;
}

2. Network

1. Common
# ali exec c conf t
# ali exec r sh run
# ali exec b sh ip int b
# ali exec i sh ip ro
!
# conf t
# no ip domain look
!
# line c 0
# logging sync
# exec-t 0
!
# int s1/0
# no sh
# clock rate 64000
# encap fram
# no fram inver

2. Mapping
//R1
# int lo0
# ip add 11.11.1.1 255.255.255.0
!
# int s1/0
# ip add 11.11.12.1 255.255.255.0
# fram map ip 11.11.12.2 102 br

//R2
# int lo0
# ip add 11.11.2.2 255.255.255.0
!
# int s1/0.12 m
# ip add 11.11.12.2 255.255.255.0
# fram map ip 11.11.12.1 201 br
!
# int s1/0.23 m
# ip add 11.11.23.2 255.255.255.0
# fram map ip 11.11.23.3 203 br

//R3
# int lo0
# ip add 11.11.3.3 255.255.255.0
!
# int s1/0.23 m
# ip add 11.11.23.3 255.255.255.0
# fram map ip 11.11.23.2 302 br
!
# int s1/0.34 p
# ip add 11.11.34.3 255.255.255.0
# fram inter 304

//R4
# int lo0
# ip add 11.11.4.4 255.255.255.0
!
# int s1/0.34 p
# ip add 11.11.34.4 255.255.255.0
# fram inter 403

//Verify
//R1
# p 11.11.12.2
//R2
# p 11.11.23.3
//R3
# p 11.11.34.4

3. OSPF
//R1-2(NMBA)
//R2-3(p-to-multi)

//R1
# router ospf 11
# router-id 11.11.1.1
# network 11.11.1.1 0.0.0.0 area 12
# network 11.11.12.1 0.0.0.0 area 12
!
# lo 0
# ip ospf network point-to-p

//R2
# router ospf 11
# router-id 11.11.2.2
# network 11.11.2.2 0.0.0.0 area 12
# network 11.11.12.2 0.0.0.0 area 12
# network 11.11.23.2 0.0.0.0 area 0
!
# lo 0
# ip ospf network point-to-p

//R3
# router ospf 11
# router-id 11.11.3.3
# network 11.11.23.3 0.0.0.0 area 0
# network 11.11.3.3 0.0.0.0 area 34
# network 11.11.34.3 0.0.0.0 area 34
!
# lo 0
# ip ospf network point-to-p

//R4
# router ospf 11
# router-id 11.11.4.4
# network 11.11.4.4 0.0.0.0 area 34
# network 11.11.34.4 0.0.0.0 area 34
!
# lo 0
# ip ospf network point-to-p

//R1
# router ospf 11
# nei 11.11.12.2

//R2
# router ospf 11
# nei 11.11.12.1
!
# int s1/0.23
# ip ospf network point-to-m

//R3
# int s1/0.23
# ip ospf network point-to-m

//Verify
//R1-4
# sh ip ospf nei

4. LSA Type 4,5
//R2
# int lo0
# ip add 5.5.0.1 255.255.255.0
# ip add 5.5.1.1 255.255.255.0 sec
# ip add 5.5.2.1 255.255.255.0 sec
!
# router ospf 11
# redistribute connected subnets
//R1
# sh ip route //LSA Type 5
# sh ip ospf database external //LSA Type 5
//R4
# sh ip ospf database asbr-summary //LSA Type 4

5. Stub Area
//R1
# router ospf 11
# area 12 stub //NO LSA Type 5
//R2
# router ospf 11
# area 12 stub no-summary //No LSA Type 3

6. NSSA(Not So Stubby Area)
//R4
# int lo9
# ip add 9.9.0.1 255.255.255.0
# ip add 9.9.1.1 255.255.255.0 sec
# ip add 9.9.2.1 255.255.255.0 sec
# ip add 9.9.3.1 255.255.255.0 sec
!
# router-map LO9
# match interface lo 9
!
# router ospf 11
# redi connected route-map LO9 sub
# area 34 nssa

//R3
# router ospf 11
# area 34 nssa default-information-originate

3. 결론

내용이 방대하다.

4. 참고자료

1. Cisco Docs

2. Linux

3. Web

클라우드 엔지니어를 꿈꾸며 공부를 시작한 초보 엔지니어입니다. 틀린점 또는 조언해주실 부분이 있으시면 친절하게 댓글 부탁드립니다. 방문해 주셔서 감사합니다 :)

Twitter Facebook LinkedIn

Junhwan Heo

[KEDUIT] 클라우드 컴퓨팅과 보안솔루션을 활용한 DC 엔지니어 양성교육 - Day46

1. 서론

2. 본론

1. Front-End

2. Network

3. 결론

4. 참고자료

1. Cisco Docs

2. Linux

3. Web

공유하기

댓글남기기

참고

[Certificate] OPIc IH 후기

[Certificate] AWS SOA 합격 후기

[Certificate] AWS DVA 합격 후기

[KEDUIT] 수료