과제 2. 클론코딩 (2)

JOY·2023년 12월 20일

CSS 노마드코더

CSS Layout Masterclass

목록 보기

5/13

과제 분석

레이아웃

노란 배경
window
- 5행 4열
- 맨위, 아래 행은 통합, 가운데 행열도 통합
특이사항
- 글자 세로쓰기, 옆으로 쓰기
- 글자 흘러가게 하기 -> https://hi-thisisearth.tistory.com/1
- 버튼 별도로 띄우기 (위치지정?) -> https://cocosoft.kr/149 플로팅 메뉴로 띄워보

10분 소요

과제 실습

일단 해보자.

레이아웃 잡기

1. HTML

일단 모든 텍스트를 적고, 카카오톡 버튼은 이미지로 처리해줬다.
중요하지 않은 아이콘은 걍 이모지 처리했다.
가운데 타이틀은 h1 으로 했다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="window">
      <div class="frame">
        <P>CURRY CAFE! CURRY CAFE! FLEMINGTON & NORTHCOTE! NUMBER ONE BEST QUALITY! VEG & NON. VEG! CURRY CAFE!</P>
      </div>
      <div class="frame">
        <P>LOCATIONS · MENU · SHOP</P>
      </div>
      <div class="main">
        <H1>CURRY CAFE</H1>
      </div>
      <div class="frame">
        <P>ORDER T｜A</P>
      </div>
      <div class="frame">
        <P>SPICY NEWSLETTER</P>
      </div>
      <div class="frame">
        <P>RESERVATIONS</P>
      </div>
      <div class="frame">
        <P>🟦🟨</P>
      </div>
      <div class="frame">
        <P>STAY SPICY - NUMBER ONE BEST QUALITY! EVERY DAY OPEN! FLEMINGTON & NORTHCOTE! HOME DELIVERY - BEST QUALITY!</P>
      </div>
      <div class="kakao">
        <img src="img/kakao-talk.png" alt="">
      </div>
    </div>
  </body>
</html>

2. CSS 레이아웃

일단 테두리를 만들자. 힘들다.. (32분 소요)

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 100%;
  height: 100vh;
  background-color:#F1E755 ;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kakao {
    position: absolute; 
    z-index: 2;
    right: 20%; 
    top: 180px; 
    
    img {
        width: 20px;
        height: 20px;
    }
}
.window {
    position: relative;
    height: 95vh;
    width: 95vw;
    display: grid;
    grid-template-columns: 1fr 20fr 20fr 1fr;
    grid-template-rows: 1fr 12fr 10fr 2fr 1fr;
    background-color: white;
    justify-content: center;
    align-items: center;

    & :first-child {
        grid-column: span 4;
    }

    & :nth-child(2) {
    }
    & :nth-child(3) {
        grid-column: span 2;
        grid-row: span 3;
    
    }
    & :nth-child(4) {
    }
    & :nth-child(5) {

    }
    & :nth-child(6) {
        grid-row: span 2;
    }
    & :nth-child(7) {

    }
    & :nth-child(8) {
        grid-column: span 4;
    }


}

백그라운드 컬러와 테두리를 설정해주자.

.window {
    position: relative;
    height: 95vh;
    width: 95vw;
    display: grid;
    grid-template-columns: 1fr 20fr 20fr 1fr;
    grid-template-rows: 1fr 12fr 10fr 2fr 1fr;
    justify-content: center;
    align-items: center;
    gap : 2px;
    
    .orange {
        color: #FD6B3A;
    }

    .white {
        color: white;
    }

    .vertical {
        writing-mode: vertical-lr;
        text-orientation: upright;
    }

    .window__frame {
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        padding: 4px;
        border: 2px solid #FD6B3A ;
        display: flex;
        justify-content: center;
        align-items: center;

    &:first-child {
        grid-column: span 4;
        background-color: white;
    }
    
    &:nth-child(2) {
        background-color: #FD6B3A;
    }
    &:nth-child(3) {
        grid-column: span 2;
        grid-row: span 3;
    }
    &:nth-child(4) {
        background-color: #46AB4F;
    }
    &:nth-child(5) {
        background-color: white;
        text-orientation:sideways;

    }
    &:nth-child(6) {
        grid-row: span 2;
        background-color: #46AB4F;
    }
    &:nth-child(7) {
        background-color: white;
        
    }
    &:nth-child(8) {
        grid-column: span 4;
        background-color: white;
    }
}

하.. 괴로워 일단 화면에 꽉 안차는 문제가 있었는데..
- height, width를 설정해줘야 한다
- window의 dp를 flex로 설정해서 가운데 맞춤 하자

폰트 방향과 기울기, 크기, 컬러를 조정하자. 플로우 효과도 내자.

플로우 효과는 장렬하게 포기했다.
폰트를 더 깔끔히 css 넣는 법이 잇을 것 같은데..

배경 이미지 넣고, 카카오 버튼 위치 조정하자.

html에 이미지를 넣고 cover로 조정했다.
카카오톡 버튼 위치는 relative랑 absolute 활용해서 조정했다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="styles/style.scss" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="window">
      <div class="window__frame orange">
        <P>CURRY CAFE! CURRY CAFE! FLEMINGTON & NORTHCOTE! NUMBER ONE BEST QUALITY! VEG & NON. VEG! CURRY CAFE!</P>
      </div>
      <div class="window__frame white vertical">
        <P>LOCATIONS · MENU · SHOP</P>
      </div>
      <div class="window__frame white">
        <H1>CURRY<br>CAFE</H1>
        <img src="img/2.jpg" alt="">
      </div>
      <div class="window__frame white vertical">
        <P>ORDER T｜A</P>
      </div>
      <div class="window__frame orange vertical">
        <P>SPICY NEWSLETTER</P>
      </div>
      <div class="window__frame white vertical">
        <P>RESERVATIONS</P>
      </div>
      <div class="window__frame vertical">
        <P>🟦🟨</P>
      </div>
      <div class="window__frame orange">
        <P>STAY SPICY - NUMBER ONE BEST QUALITY! EVERY DAY OPEN! FLEMINGTON & NORTHCOTE! HOME DELIVERY - BEST QUALITY!</P>
      </div>
    </div>
    <div class="kakao">
      <img src="img/kakao-talk.png" alt="">
    </div>
  </body>
</html>

@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 100%;
  height: 100vh;
  background-color:#F1E755 ;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kakao {
    position: absolute; 
    z-index: 2;
    right: 3.5%; 
    top: 91%; 
    
    img {
        width: 40px;
        height: 40px;
        filter: invert(54%) sepia(99%) saturate(2049%) hue-rotate(334deg) brightness(97%) contrast(103%);
    }
}

.window {
    position: relative;
    height: 95vh;
    width: 95vw;
    display: grid;
    grid-template-columns: 1fr 20fr 20fr 1fr;
    grid-template-rows: 1fr 12fr 10fr 2fr 1fr;
    justify-content: center;
    align-items: center;
    gap : 2px;
    
    .orange {
        color: #FD6B3A;
    }

    .white {
        color: white;
    }

    .vertical {
        writing-mode: vertical-lr;
        text-orientation: upright;
    }

    .window__frame {
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        padding: 4px;
        border: 2px solid #FD6B3A ;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;

    &:first-child {
        grid-column: span 4;
        background-color: white;
        font-style: italic;
        overflow: hidden;
        position: relative;
        .p {
            display: block;
            position: absolute;
            animation: textLoop 10s linear infinite;
        }
        
    }
    
    &:nth-child(2) {
        background-color: #FD6B3A;
        font-size: 12px;
        letter-spacing: -1px;
        }

    &:nth-child(3) {
        h1 {
            position: absolute;
            z-index: 2;
        }
        img {
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        grid-column: span 2;
        grid-row: span 3;
        font-size: 100px;
        font-weight: 800;
        text-align: center;
    }

    &:nth-child(4) {
        background-color: #46AB4F;
        font-size: 12px;
        letter-spacing: -1px;
        font-style: italic;
    }
    &:nth-child(5) {
        background-color: white;
        text-orientation:sideways;
        font-style: italic;
        font-size: 15px;
        letter-spacing: -1px;
    }

    &:nth-child(6) {
        grid-row: span 2;
        background-color: #46AB4F;
        font-style: italic;
        font-size: 12px;
        letter-spacing: -1px;
        
    }
    &:nth-child(7) {
        background-color: white;
        font-size: 12px;
        letter-spacing: -1px;
        
    }
    &:nth-child(8) {
        font-style: italic;
        grid-column: span 4;
        background-color: white;
    }
}
}