디지털 시계

디지털 시계

참고 사이트
1.(inflearn) 입문자를 위한 자바스크립트 기초 강의 - 유노코딩
2.(youtube) 웹 코딩 입문 강좌(https://www.youtube.com/watch?v=_nJl75kn3yY&list=PLkbzizJk4Ae_ZCinIZzwLf4XDh1NvjmyE&index=6)
3.박스를 중앙으로 옮기는 방법(https://www.youtube.com/watch?v=mVYgtzDLZfY)
4. https://deeplify.dev/front-end/markup/align-div-center

웹 사이트 정중앙에 디지털 시계를 만드는 아주 작은 프로젝트이다.

강의는 인프런의 유노코딩님 수업 중 첫 번째 작은 프로젝트에서 나의 생각을 조금 추가해서 변형을 해보았다.

나의 생각: 웹 페이지를 따로 나누지 않고 바로 div를 중앙으로 옮겨놓았다.
유노코딩: body 태그를 웹 페이지 전체로 만들고 body를 기준으로 div를 중앙으로 옮겼다.

html의 layout을 찾다보니까 css의 flex 또는 grid 사용하는 것을 알 수 있었다.

다만, 따로 레이아웃 없이 div 박스가 정중앙으로만 가면 되지 않을까 생각해서 아래와 같이 작성을 해보았다.

body{
    background-color: black;
}

.clock{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}

.time{
    text-align: center;
    color: white;
}

간단한 내용인데... 만만하게 보고 하다가 이해하는데 오래 걸린 것 같다..ㅎㅎ;

아래 이미지가 최종 결과물이다.