[CSS] 초간단 프론트엔드 화면 구성

오늘은 다음과 같은 화면을 구성해보려한다.

 

 

들어가는 태그 : div, li, a

그리고 실시간 시간 카운트를 위해서 clock.js를 통해 별도로 클라스 형성을 할 것이다.

 

1. [HTML] 상단 태그 만들기

<ul>
  <img src="star.png" alt="applehone" width="40px" >
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

2. [HTML] 중앙 채우기

  <div class="img_dark">
    <img src="wallpaper.jpg" alt="background">
  </div>
  
  <div id="header">
    <h2 id="clock" style="font-size:300%">00:00:00</h2>
    안녕하세요, 제이름은 딩기스칸입니다.<br>
    저는 프론트엔드 개발자일까요?
  </div>

  <div class="button">
    <div class="border-solid"><a href="#">View my work</a></div>
  </div>
  <script src="clock.js"></script>

 

3. [CSS] 목차 스타일 지정하기

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}
li {
  float: right;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 5px;
  text-decoration: none;
}
li a:hover {
  background-color: #111111;
}

 

[CSS]  본문 스타일 지정하기

a{
  text-decoration: none;
  color: whitesmoke;
}
a:hover{
  text-decoration: none;
  color: pink;
}

.button{
  display: inline-block;
  border: solid;
  border: 1px;
   margin: 20px 30px;
   position: absolute;
   font-size: smaller;
   text-align: center;
   color: whitesmoke;
    left: 42%;
    top: 55%;
}
.container{
  width: 100%;
}
.img_dark{
  filter: brightness(23%);
}

 

4. clock.js 생성하기. 

해당 clock.js 는 dodokyumin님의 github에서 발췌하여 적용하였다.

dodokyumin (HONGKYUMIN (ANTHONY)) (github.com)

dodokyumin - Overview

해당 js파일을 html에 원하는 코드위치에 불러오면 된다.

<h2 id="clock" style="font-size:300%">00:00:00</h2>
<script src="clock.js"></script>

그러면 초간단 프론트엔드 화면 구성이 완료된다.

 

D.O.N.E!