학습내용

header

• 코드는 규칙내에서 통일성있게 작성하자.

• header tag는 어차피 하나 사용하는데 id를 주는 이유가 궁금했다.
  -> html 파일이 페이지 수 만큼 많이 생기면 혼란할 수 있다.

• input과 button(inline 요소들)을 연달아 기입하다보니 공백이 생겼다.
  -> calc(100% - 52px)를 사용해서 100%에서 button의 크기를 뺀 input의 크기를 지정하게끔 했다. calc()를 사용할 때는 띄어쓰기 주의!
  -> 공백의 크기때문에 button이 밑으로 넘어갔다.
  -> 부모를 flexbox로 만들고, justify-content: space-between을 적용해서 공백없이 배치하였다.

• input 칸을 클릭하면 파란 테두리가 생긴다.(textarea도 그러함.)
  -> input:focus input이 focus 상태일 때 outline: none을 적용한다.

• box-shadow
  https://html-css-js.com/css/generator/box-shadow/

• free_icon
  https://icons8.com/

---

main 중 left

1. float을 사용할 경우, 각 li에 float:left와 width 비율, height, border-bottom, border-right를 지정한다. nth-child를 이용해서 6의 배수, 즉 각 행의 마지막 요소에 border-right:none을 지정한다. 그리고 마지막 행의 border-bottom에 none을 적용한다.

main #news_wrap .news_lists .news_list {
  position: relative;
  float: left;
  width: 16.66%;
  height: 65px;
  background-color: #ffffff;

  border-bottom: solid 1px #e4e8eb;
  border-right: solid 1px #e4e8eb;

  text-align: center;
}

main #news_wrap .news_lists .news_list:nth-child(6n) {
  border-right: none;
}

main #news_wrap .news_lists .news_list:nth-child(19),
main #news_wrap .news_lists .news_list:nth-child(20),
main #news_wrap .news_lists .news_list:nth-child(21),
main #news_wrap .news_lists .news_list:nth-child(22),
main #news_wrap .news_lists .news_list:nth-child(23),
main #news_wrap .news_lists .news_list:nth-child(24) {
  border-bottom: none;
}

2. grid를 사용할 경우, container에 border-top, border-left를 주고, items에 border-right, border-bottom을 적용한다.

main #news_wrap .news_lists {
  display: grid;
  height: 260px;
  grid-template-columns: repeat(6, 1fr);
  border-top: solid 1px #e4e8eb;
  border-left: solid 1px #e4e8eb;
}

main #news_wrap .news_lists .news_list {
  background-color: #fff;
  text-align: center;
  border-right: solid 1px #e4e8eb;
  border-bottom: solid 1px #e4e8eb;
}

• 부모 요소에게 overflow: hidden을 적용시켜서 자식요소의 크기변화에 부모도 같이 적용되게 할 수 있다.

• nth-child(6n)으로 6의 배수의 child만 적용시킬 수 있다.

• y축 중앙정렬

  1. top: 50%;
     transform: translateY(-50%);
     박스 내 위치는 박스 기준 top이 50%인 위치, transform속성값으로 translateY에 적용되는 값은 그 content 기준 -50%인 위치이다.
  2. line-height: 박스의 px 을 해주면 y축 중앙정렬된다.
     원래는 문장 줄 사이 간격을 조절할 때 사용한다. 그래서 지정된 값이 아닌 em이나 %를 사용하면 글자크기에 비례하는 간격으로 조절된다.

• strong tag는 글을 굵게 만들어준다.

• css 선택자 중에 >를 사용하면 첫 번째 요소의 바로 아래 자식인 노드를 선택한다.

---

form tag

form은 사용자와 웹사이트 또는 어플리케이션이 서로 상호작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용한다. 일반적으로 데이터는 웹 서버로 전송되지만 웹페이지가 데이터를 사용하기 위하여 사용할 수도 있다.

• form 요소에는 action 속성과 method 속성이 필수적이다.
  action : 데이터를 보낼 URL을 지정한다.
  method : 어떤 HTTP 방식을 사용할 것인지 지정한다.

• label, input, textarea

1. label의 for 속성은 input, textarea의 id와 연결하는데 사용된다.
2. input의 가장 중요한 속성은 type이다. email, password 같은 경우 Client-side form validation이 적용된다. email 형식에 맞는지 검사해준다.
3. input type="text"에 기본값을 넣고 싶으면 value 속성을 사용한다.
   <input type="text" value="by default this element is filled with this text" />
   textarea는 태그 사이에 기본 문자열을 넣으면 된다.
   <textarea>by default this element is filled with this text</textarea>

• button
  button의 type에는 submit, reset, button이 있다.
  submit을 사용하면 form 데이터를 form 요소의 action에 정의된 웹페이지로 전송시킨다.
  reset은 리셋, button은 그냥 버튼이지만 JS를 사용하면 유용할 수 있다.

• name
  데이터를 보낼 때 각 폼 위젯에 name 속성을 지정해야 한다.

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_email" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>

    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>

https://developer.mozilla.org/ko/docs/Learn/Forms/How_to_structure_a_web_form

학습후기

날이 덥지만 건조해서 딱 실습하기 좋고, 네이버 페이지는 복잡했다. translate가 잘 이해되지 않았는데 오늘 해결했고, form tag의 사용법에 대해서 잠깐 알아보았다.