브리의 성장기

[TIL] 221215 본문

종종 올리는 요즘 근황

[TIL] 221215

브리(BRIE) 2022. 12. 15. 17:38
728x90

😀 TIL #221215

 

- 스파르타 코딩클럽 웹개발 종합반 1주차

 

1주차 13회 ~ 완강

* 브라우저가 알아들을 수 있는 javascript 맛보기

* function 함수로 alert 나오게 하기

* chrome 개발자 도구 console 탭으로 실습하기

* 변수 설정, 기본 연산, 딕셔너리, 리스트, 함수, 조건문(if ~ else), 반복문(for)

 

어제 만들었던 코드를 참고하여, 고양이 팬명록 페이지를 만들어 보았다 😆

 

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">

    <style>
    * {
        font-family: 'Noto Sans KR', sans-serif;
    }

    .mytitle {
      width:100%;
      height:350px;
      background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(https://images.mypetlife.co.kr/content/uploads/2019/09/09152951/mikhail-vasilyev-NodtnCsLdTE-unsplash.jpg);
      background-position: center;
      background-size:cover;

      color:white;

      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .mydata {
      max-width: 500px;
      width: 95%;
      margin: 20px auto 20px auto;
      padding: 20px;
      box-shadow: 0px 0px 3px 0px gray;
    }

    .mybtn {
      margin: 20px auto 0px auto;
      display:flex;
      flex-direction: row;
      justify-content: left;
      align-items: center;
    }

    .wrap {
      max-width: 500px;
      size: 95%;
      margin: 20px auto 20px auto;
    }

    .wrap > card {
        margin : 20px 20px 20px 20px;
    }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>우리집 고양이 팬명록</h1>
    </div>
    <div class="mydata">
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
          <label for="floatingInput">닉네임</label>
        </div>
        <div class="form-floating">
          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                    style="height: 100px"></textarea>
          <label for="floatingTextarea2">귀여워하기😼</label>
        </div>
        <div class="mybtn">
          <button type="button" class="btn btn-dark">댓글달기</button>
        </div>
    </div>

    <div class="wrap">
      <div class="card">
        <div class="card-body">
          <blockquote class="blockquote mb-0">
            <p>우리집 고양이 츄르를 좋아해. 너네집 고양이도 ?!</p>
            <footer class="blockquote-footer">미노이</footer>
          </blockquote>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <blockquote class="blockquote mb-0">
            <p>나만 고양이 없어 🥺</p>
            <footer class="blockquote-footer">지나가는 냥덕</footer>
          </blockquote>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <blockquote class="blockquote mb-0">
            <p>너무 귀엽다.. 우리집 고양이도 보러오세요!😻❤️</p>
            <footer class="blockquote-footer">3년차 집사</footer>
          </blockquote>
        </div>
      </div>
    </div>
</body>

</html>

(여기 저기서 주워 온거지만) 점점 길어지는 코드와, 괜시리 뿌듯한 브리

 

✨ 오늘 읽은 아티클

 

- 애플의 카피라이팅에 대해서 (덧, 토스까지)

오늘 읽은 아티클 인상 깊어 공유합니다. 카피에서 드러나는 고민과 규칙의 흔적. 

브랜딩이라는게 이렇게나 섬세한 거구나.

 

 

그들이 ‘점’찍은 카피라이팅 | 요즘IT

카피라이팅으로 유명한 많은 브랜드가 있지만, 빼놓을 수 없는 카피라이팅의 강자는 애플이 아닐까 싶습니다. 그런데, 이런 애플의 카피라이팅 텍스트를 보고 있으면 한가지 특별한 점이 눈에

yozm.wishket.com

 

 

 

728x90

'종종 올리는 요즘 근황' 카테고리의 다른 글

[TIL] 221218  (0) 2022.12.18
[TIL] 221217  (2) 2022.12.17
[TIL] 221214  (0) 2022.12.14
[TIL] 221213  (0) 2022.12.13
[TIL] 221203  (0) 2022.12.03
'종종 올리는 요즘 근황' Related Articles more
Comments