1. 학습내용

오늘은 input 태그와 시멘틱 태그, 스타일 시트를 배웠다.

-input

 <!--button 만들기 - 하는 일에 따라 type 지정 필요
   <input type="button | reset | submit | image" >
   <button type="button | reset| submit">
      
   -->
   <input type="button" value="그냥 input 버튼" onclick="alert('그냥 input 버튼')">
   <button type="button">그냥 button 버튼</button>

   <!--reset 버튼 : 폼에 입력된 내용을 지우고 초기화 하는 버튼-->
   <form>
      아이디 : <input type="text">
      <input type="reset" value="입력한 내용 지우기">
      <button type="button">[button]입력한 내용 지우기</button>
   </form>

   <!--submit 버튼: 클릭하면 웹 브라우저가 폼 데이터를 웹서버로 전송-->

   <form>
      아이디 : <input type="text">
      <input type="reset" value="입력한 내용 지우기">
      <button type="button">[button]전송</button>
   </form>

   <!--image 버튼: 아무 기능 없음. 자바스크립트 코드로 활용-->
   <input type="image" src="https://ac2-p2.namu.la/20210314/cfdaeeb9707643c1ddba2913dc0d2a19bc7a9c70107603a8f591076402cb7cc4.jpg">
   <button type="image">
      <img src="https://ac2-p2.namu.la/20210314/cfdaeeb9707643c1ddba2913dc0d2a19bc7a9c70107603a8f591076402cb7cc4.jpg">
   </button>

   <!--<input> <button> 왜 같이 쓰나? 
      1) <button> 은 자식태그를 가질 수 있다.
      2) <button> 은 CSS에서 가상선택자로 꾸며줄 수 있다.
   -> input의 한계를 넘어 다양한 표현이 가능하다. -->

   <form>
      아이디 : <input type="text">
      <input type="button" value="아이디중복확인">
   </form>

만약 button태그에 type을 안적으면 화면상엔 나오고 클릭도 되지만, 자꾸 새로고침이 된다. 그러니 정확하게 type을 적어야 한다.

-sementic tag

  <header>
      <h1>볼프강 아마데우스 모차르트</h1>
      <p>1756년 1월 27일 잘츠부르크에서 태어난 천재적인 오스트리아의 작곡가<br> 
         모차르트(1756년 1월 27일 ~ 1791년 12월 5일)를 소개한다.</p>
      <figure>
         <img width="140px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wolfgang-amadeus-mozart_1.jpg/500px-Wolfgang-amadeus-mozart_1.jpg" alt="">
         <figcaption>1770년대 초상화</figcaption>
      </figure>   
   </header>
   <nav>
      <h2>목차</h2>
      <ul>
         <li><a href="#life">생애</a></li>
         <li><a href="#death">죽음</a></li>
         <li><a href="#music">음악</a></li>
      </ul>
   </nav>
   <section>
      <article id="life">
         <h2>생애</h2>
         <p>모차르트는 1756년 1월 27일 잘츠부르크에서 태어나서, 궁정 음악가였던 아버지 에게 피아노와 바이올린을 배웠고, 다섯살 때 이미 작곡을 하기 시작했으며, 1764년에서 1765년 사이에 바흐로부터 처음으로 교향곡을 작곡하는 법을 배웠는데 이것이 모차르트가 수많은 교향곡을 남기는 계기가 되었다. 모차르트는 빈에서 1784년에 14세인 베토벤을 만나 베토벤을 교육시키는데 전념하기도 했다.</p>
      </article>
      <article id="death">
         <h2>죽음</h2>
         <p>모차르트는 1791년 12월 5일 오전 0시 55분경에 갑자기 병으로 죽었으며 모차르트가 완성하지 못한 작품 레퀴엠은 프란츠 크사버 쥐스마이어(Franz Xaver Süssmayr)가 완성시켰다.</p>
      </article>
      <article id="music">
         <h2>음악</h2>
         <p>오페라, 교향곡, 행진곡, 관현악용 무곡, 피아노 협주곡, 바이올린 협주곡, 교회용 성악곡, 칸타타, 미사곡 등 다양한 장르를 아우르며 600 여곡을 작곡하여 후대에 남겼다.</p>
      </article>
   </section>
   <aside>
      <h3>모차르트의 죽음에 얽힌 전설</h3>
      <p>모차르트의 장례식 날 비가 오고 천둥이 쳤다고 하나 New Groove에 따르면 사실은 구름 한 점 없는 쾌청한 날이었다고 한다.</p>
   </aside>
   <aside>
      <details>
         <summary>작곡가 모차르트를 주제 또는 소재로 한 작품</summary>
         <p>뮤지컬 모차르트</p>
         <p>영화 아마데우스</p>
         <p>연극 아마데우스</p>
      </details>
   </aside>
   <footer>
      <p>2017년 10월 7일 작성, 위키피디어 참고</p>
   </footer>

-CSS

   <style>
      /*태그에는 display 속성을 표시: block 또는 inline */
      *{margin: 0; padding: 0; height: 100%;}
      header{width: 100%; height: 15%; background: yellow;}
      nav{width: 100%; height: 5%; background: orange;}
      section{width: 75%; height: 75%; background: olive;float: left;}
      aside{width: 25%; height: 75%; background: plum;float: right;}
      footer{width: 100%; height: 5%; clear: both;background: pink;}
   </style>

저 위의 코드 중 생소했던 것만 따로 모아 '어려웠던 점 및 해결방안'에 정리했다.

2. 어려웠던 점 및 해결방안

<aside> 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그

<section> 말그데로 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여러개의 콘텐츠의 그룹화

<article> 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용. 

<summary> details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.
  
<details> 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.

<figure> 이미지, 다이어그램, 사진 등 독립적인 컨텐츠 정의시 사용

<figcaption> <figure> 요소의 설명 캔션(caption) 정의

참고자료: https://stonefree.tistory.com/59

보통 section안에 article을 쓰고, aside는 section 밖에 쓴다.

스타일시트에서, clear를 새로 알았는데, 다른 요소에 Float가 있으면, 특정 태그에 Float를 취소하고 싶을때 쓴다고 하셨다.
clear: both;는 float값을 둘다 취소한다는 의미이다.(왼쪽, 오른쪽)

3. 학습 소감

오늘 배운것 중에 신기했던 건, 바로 detail과 summary였다. 그 두개의 태그가 있으면 관련 개념을 요약해 화면상에 보여주고 왼쪽에 생성된 화살표 아이콘을 눌러 상세한 내용을 보여주는 방식이었다.
역시 html은 점점 더 편리한 태그가 나온다는 생각을 했다.