[SeSAC DT 과정] HTML input, section 태그 / CSS 단위

1️⃣ HTLM

1) input 태그

• input[type=“value”]

  • 대괄호: 속성 선택자 표시(class 같은 것)
  • Input 태그 사용시 가장 많이 씀

• input 태그는 image, button 태그와 같이 인라인 요소이나 너비, 높이 들어감

• input 태그 작성시 label 태그 꼭 작성해야함(⭐️ 웹접근성 차원)

  • 💡 웹접근성( = 어느 누구도 제약 없이 웹을 탐색할 수 있는 개발 방식 )과
    웹표준( = 브라우저의 차이 없이 동일한 내용을 보여주기 위한 웹의 공식 표준 및 기술 규격 ) 구분하기.

• input 태그는 단독태그로, 열고 닫는 태그가 아니므로 하위 요소가 들어갈 수 없음 (ex. 검색창 옆에 돋보기 모양 같은 이미지는 css에서 background-image로 줘야함)

• 검색창 예시

<div class="search-box">
    <input type="text" placeholder="검색 내용을 입력하세요" 	id="searchTxt">
    <label for="searchTxt" class="hidden">검색</label>
    <button>검색</button>
</div>

💡 화면상에 보이고 싶지 않은 태그는 class="hidden" 등으로 묶어서
css에서 .hidden{ display: none; } 처리 하기!

2) section 태그

• 문서의 독립적인 구획을 위해 사용 ⭐️ 참고링크
• 단순 스타일링이라면 section 태그보다는 div 태그가 적합
  section은 보다 논리적인 구조를 표현하는 태그이다.
• section 태그 안에 heading 태그(<h1></h1>~</h6><h6>) 를 사용하는 것을 권장(html validator)
• section 태그 내에 section 태그 자식 요소 가능!

2️⃣ CSS

1) 단위

• 절대값 px / 상대값 %. em, rem, vw, vh, vmin, vmax…(가변형 만들 때 사용)
  • em : 상위 요소의 폰트사이즈를 기준으로 상속 받음
    • Font-size:100% / 1em / 16px 같은 값
    • Em-> px => em * 16(폰트사이즈 기본값일때)
    • Px-> em => px/16
    • Px-> % => px/16 * 100
    • 주의! 중첩돼서 상속됨
  • rem(route em) : 최상위 요소에게만 상속 받음
  • vw,vh : viewport(브라우저 전체 화면 width), viewport height(브라우저 전체 화면 height)