itsme

모각코 1일차 - 한 입 웹개발 (JS) 8월과정 본문

대외활동/모각코 - 온라인 대외활동

모각코 1일차 - 한 입 웹개발 (JS) 8월과정

itssmeee 2021. 8. 9. 22:51
반응형

드디어 저번 달에 신청한 모각코에서 선정이 되어 1일 차가 시작되었다.

1일 차 과제는 아래 이미지와 같이 만드는 것이었다.

오랜만에 사용하는 html과 css여서 기억이 잘 안나 처음엔 조금 막막했다. 여기저기 검색해가면서 비슷하게라도 만들어보자 라는 생각으로 코딩하기 시작했다. 

 

먼저 html코드를 작성한 후 css코드를 작성했다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>ChatBot</title>
  <link rel="stylesheet" href="chatbot.css">
  </head>
  <body>
  <!-- 출력상자 -->

  <p>
    <div id="ouput">냐앙~</div>
  </p>
  <!-- 고양이 -->
  <p>
    <img src="C:Users\duwls\Desktop\CAT.JPG" id="cat">
  </p>

  <!-- 시킬문장 -->
  <p>
    <div id="text"></div>
  </p>

  <!-- 시키기 버튼 -->
  <p>
    <button type="submit" id="commend">시키기</button>
  </p>

  </body>
</html>

 

#ouput{
  border: 2px solid skyblue;
  border-radius: 0.5em;
  font-family: inherit;
  width: 400px;
  height: 100px;
  margin: auto;
  display: block;
  font-size: 15px;
  text-align: center;
  line-height: 100px;
}

#cat{
  width: 150px;
  height: 150px;
  margin: auto;
  display: block;
}

#text{
  border: 2px solid skyblue;
  border-radius: 0.5em;
  font-family: inherit;
  width: 200px;
  height: 25px;
  font-size: 15px;
  margin: auto;
  display: block;
}

#commend{
  border: 2px solid skyblue;
  border-radius: 2em;
  background-color: skyblue;
  color: white;
  margin: auto;
  display: block;
  width: 100px;
  height: 25px;
}

 

결과는 

대충 비슷한가..?

 

이 과정은 15일동안 계속되는데 하면서 html과 css코딩 실력을 성장시켜야겠다!!

'대외활동 > 모각코 - 온라인 대외활동' 카테고리의 다른 글

모각코 6일차 - 한 입 웹개발(JS) 8월 과정  (0) 2021.08.14
모각코 5일차 - 한 입 웹개발(JS) 8월 과정  (0) 2021.08.14
모각코 4일차 - 한 입 웹개발 (JS) 8월과정  (0) 2021.08.12
모각코 3일차 - 한 입 웹개발 (JS) 8월과정  (0) 2021.08.12
모각코 2일차 - 한 입 웹개발 (JS) 8월과정  (0) 2021.08.12
'대외활동/모각코 - 온라인 대외활동' Related Articles more