CODE&화이트해커

CODE&화이트해커

프로그래밍 언어를 습득하여 정보 과학과 관련한 진로를 찾아가고 탐구하며 컴퓨팅 사고력을 기르고 협업적 문제 해결 능력을 배양하는 동아리로 1학년은 프로그래밍 언어의 기본 지식을 익히고 아두이노101 실습 키트로 IoT을 체험.  2,3학년은 프로그래밍 언어 문제 풀이와 심화 과정을 습득, 프로젝트를 제작하고 정보보안에 대한 지식을 습득하고 체험을 통해 대학 관련 학과 진학의 발판으로 삼아 활동

프로그래밍 언어 학습과 프로젝트 제작

html 홈페이지 예시코드
이름 김보라 등록일 21.09.08 조회수 77

<!DOCTYPE html>

<html lang="ko">

  <head>

    <meta charset="UTF-8" />

    <title>모각코 9일차</title>

    <link rel="stylesheet" href="../static/font.css" />

    <link rel="stylesheet" href="../static/layout.css" />

    <link rel="stylesheet" href="../static/home.css" />

  </head>

  <body>

    <div class="bookcover">

      <div class="bookdot">

        <div class="page">

          <div class="left">

            <div class="today">

              <span>TODAY</span>

              <span>ㅣ</span>

              <span>TOTAL</span>

            </div>

            <div class="proflie">

              <div class="image">

                <img src="../static/images/proflie1.png", width="100%">

              </div>

              <div class="introduct">

                <p>Hello It's bora's blog</p>

              </div>

              <div class="profile-dropdown">

                <div class="dropdown-btn">

                    <div class="dropdown-title">파도타기</div>

                      <div class="triangle-down"></div>

                    </div>

                    <div class="dropdown-content">

                        <a href="https://instagram.com/rvd_bora_0126" target="_blank">공스타로 가기</a>

                        <a href="https://instagram.com/i_m_b.o.r.a" target="_blank">일상계로 가기</a>

                      </div>

                    </div>

            </div>

          </div>

            <div class="mid">

              <div class="title">

                <span>보라의 미니홈피</span>

                <span>">https://www.instagram.com/</span>

              </div>

              <div class="main">

                <div class="notice">

                  <h3>Today's notice</h3>

                </div>

                <div class="item">

                  <div class="song">

                  <li>검은 개-한오월</li>

                  <li>괜찮아-BORA</li>

                  <li>개화-TAKEONE</li>

                  <li>낙하-AKMU</li>

                  </div>

                  <div class="number">

                    <span>post:10</span>

                    <span><br>album:20</span>

                    <span><br>photo:10</span>

                  </div>

                </div>

                <div class="item2">

                  <div class="gif">

                    <h3>MINIROOM</h3>

                  <img src="../static/gif1.gif", width="50%">

                </div>

              </div>

              </div>

            </div>

            <div class="right">

              <div class="menu">

                <div class="choose">

                  <div class="home">

                    <div style="text-align:center">

                    <p>home</p>

                  </div>

                  </div>

                  <div class="diary">

                    <div style="text-align:center">

                      <p>diary</p>

                    </div>

                  </div>

                  <div class="page1">

                      <div style="text-align:center">

                        <p>page1</p>

                      </div>

                  </div>

                  <div class="page2">

                    <div style="text-align:center">

                      <p>page2</p>

                    </div>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

          </div>

        </div>

      </div>

    </div>

  </body>

</html>

<style>

 body{

  background-image:url("../static/images/pattern.png");

  background-color: mediumpurple;

  background-size: 100px;

  position:fixed;

  left:0pt;

  right:0pt;

  top:0pt;

  bottom:0pt;

}

.bookcover{

  position: relative;

  background-color: mediumorchid;

  width:1000px;

  height:500px;

  border-radius: 10px;

  margin:30px auto;

}

.bookdot{

  position:absolute;

  left: 20px;

  top: 20px;

 

  background-color:lavender;

  width: 950px;

  height: 450px;

  border-radius: 10px;

  border:1px dashed white;

}

.page

{

  position:absolute;

  left: 15px;

  right: 15px;

  width: 930px;

  height:430px;

  border-radius: 10px;

  background-color: lavender;

  left:11px;

  top:11px;

  display: flex;

}

.left

{

  flex:1;

  display:flex;

  flex-direction: column;

  margin-left: 3%;

  margin-top:1%;

}

.mid

{

  margin-left: 3%;

  margin-top: 2%;

  flex:2.8;

  display:flex;

  flex-direction: column;

  margin-bottom:1%;

  font-family: 'Do Hyeon', sans-serif;

}

.right

{

  flex:0.7;

  display:flex;

  flex-direction: column;

  margin-top:2%;

  margin-left: 4%;

}

.today

{

  flex:0.06;

  font-family: 'Do Hyeon', sans-serif;

}

.proflie

{

  border:1px solid gray;

  height:89%;

  border-radius: 10px;

  width: 100%;

  background-color: white;

  display:flex;

  flex-direction: column;

  font-family: 'Do Hyeon', sans-serif;

 

 

 

}

.title

{

  height:8%;

  border-radius: 10px;

  width:100%;

  background-color: lavender;

  font-family: 'Do Hyeon', sans-serif;

  font-size: 15px;

}

.main{

  border: 1px solid gray;

  height:85%;

  border-radius: 10px;

  width:100%;

  background-color: white;

  display:flex;

  flex-direction: column;

 

}

.menu

{

 

  height:85%;

  border-radius: 10px;

  width:70%;

 

  display:flex;

  flex-direction: column;

}

.image{

  margin-left:20%;

  margin-top:2%;

  margin-right:20%;

  color:mediumorchid;

  flex:0.3;

}

.notice

{

  flex: 0.1;

}

.item

{

  flex:0.45;

  margin-left:5%;

  margin-right:5%;

  display:flex;

}

.item2

{

 flex:0.45;

 margin-left:5%;

 margin-right:5%;

}

 

.introduct

{

  flex: 0.7;

  margin-left:12%;

  margin-top:2%;

  margin-right:4%;

 

}

.song

{

 flex:0.7;

}

.number

{

  flex:0.3;

}

.choose

{

  flex:2.3;

  display:flex;

  flex-direction: column;

  color:white;

  font-family: 'Do Hyeon', sans-serif;

}

.home

{

  flex:0.1;

  background-color: purple;

  margin-top: 1px;

  margin-bottom: 1px;

  border-radius: 2px;

}

.diary

{

  flex:0.1;

  background-color: purple;

  margin-top: 1px;

  margin-bottom: 1px;

  border-radius: 2px;

}

.page1

{

  flex:0.1;

  background-color: purple;

  margin-top: 1px;

  margin-bottom: 1px;

  border-radius: 2px;

}

.page2

{

  flex:0.1;

  background-color: purple;

  margin-top: 1px;

  margin-bottom: 1px;

  border-radius: 2px;

}

.profile-dropdown {

  flex: 0;

  border: 1px solid #c9d4da;

  padding: 5px;

  margin-top: 10px;

  font-size: 0.8rem;

  position: relative;

}

 

.triangle-down {

  width: 0;

  height: 0;

  border-left: 4.5px solid transparent;

  border-right: 4.5px solid transparent;

  border-top: 5px solid #838383;

}

 

.dropdown-btn {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

 

.dropdown-content {

  display: none;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

}

 

.profile-dropdown:hover > .dropdown-content {

  display: block;

}

 

.dropdown-content > a {

  display: block;

  background-color: #f9f9f9;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  width: 100%;

  padding: 6px;

  color: black;

  text-decoration: none;

}

 

.dropdown-content > a:hover {

  background-color: #f1f1f1;

}


</style>
이전글 1710 김진욱
다음글 html 기능 설명

목록