개요
어느 무료한 날, Youtube로 개발 관련된 동영상들을 보다가 흥미로운 제목을 발견하여 이 글이 시작되었다. 영상 제목은 "CSS 따위 안쓰는 사나이클럽 (실존함)"였고, '코딩애플'채널에 있으니 관심 있는 사람은 들어가서 시청해봐도 좋을 것 같다.
아무튼, 영상 속에는 내가 모르던 html태그들이 꽤 있는 것 같아, 'React로 component를 구현하기 전에 html태그 파악은 다 끝내야 하지 않나?'라는 생각이 들어 다시 공부를 시작하게 되었다.
다음은 내가 지금껏 잘 사용하지 않았거나 몰랐던 태그/속성들을 기록한 것이다.
mouse hover시 도움말 나타내기
HTML기본 태그 중 하나인 abbr태그를 이용해 나타낼 수 있다.
<abbr title="hover할 시 나오는 설명">마우스 올리기</abbr>또는
<acronym title="Asynchronous JavaScript and XML">AJAX</acronym>여기에 마우스를 올려보세요
abbr태그와 acronym태그의 용도가 비슷한데, 현재에는 abbr태그만 사용한다고 한다.(acronym태그가 동작하기는 하지만, 권장하지는 않음.)
그 차이점과 특징은 다음 GPT가 설명해준다고 한다.
dropdown 메뉴 만들기
details 태그를 통해 구현 가능하다
<details>
<summary>drop down 동작</summary>
드롭다운을 눌렀을 때 나오는 텍스트가 들어갈 자리
</details>details는 웹 페이지에서 추가 정보나 세부 사항을 제공하는 데 사용된다. details 요소는 일종의 토글(Toggle) 요소로, 사용자가 펼치거나 접을 수 있는 콘텐츠를 정의하며, 토글 타이틀은 summary태그를 통해 지정할 수 있다.
선택 박스 만들기
<fieldset>
<legend>결과 선택</legend>
<label for="win">
<input type="radio" id="win" name="result"/>
승리
</label>
<br/>
<label for="lose">
<input type="radio" id="lose" name="result"/>
패배
</label>
<br/>
</fieldset>
사용 예시
결과 선택 승리패배
fieldset은 HTML 폼 내에서 일종의 컨테이너 역할을 하며 관련된 입력 요소들을 논리적으로 묶어주는(그룹화) 역할을 한다
묶여진 입력 요소들은 시각적으로 테두리로 둘러싸여져서 그룹화 된 것으로 보여진다.
legend는 fieldset 요소의 제목 또는 설명을 제공한다. 일반적으로 fieldset의 첫 번째 자식으로 위치하며, fieldset의 목적이나 그룹화된 입력 요소의 내용을 설명하는 역할을 한다.
팝업 만들기
<dialog open>
<p>팝업 내용</p>
<form method="dialog">
<button>닫기</button>
</form>
</dialog>영상에서는 팝업을 이러한 코드의 전개로 open하라고 되어 있지만, dialog요소에는 브라우저 호환성 이슈가 있다고 한다. 따라서 팝업이나 모달은 내가 블로그 React부분에 적어놓은 모달 만들기를 사용하여 만드는 걸로 하자.
