[HTML] 기타 태그들 :: <progress>, <meter>, <details>, <summary> 등

progress 태그

• 진행 상황을 보여주는 기능
• max값 설정 가능
• 디자인을 변경할 수 있지만 custermizing이 귀찮아서 개발자들은 보통 이 기능이 아닌 다른 걸 사용한다고 함.
• html의 기본 기능이라는것 에 의의가 있다.

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

meter 태그

• progress와 다른점: min 설정 가능
• min, max, high, low 설정 가능

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

details 태그 및 summary 태그

• 토글 기능

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

fieldset 태그

• 폼 컨트롤을 그룹화하는 태그
• table하고 시각화적인 차이는 <legend> 기능이 있다. → 해당 상자 위에 이름 설정 가능

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

marquee 태그

• scrolldelay : ms. 최솟값=60(Value less then 60 is not acceptable). 숫자가 커질수록 느려진다.
• scrollamount : 한번에 성큼성큼 움직이는거
• direction : up, down, left, right 이동 방향 설정 가능
• loop : 기본값=-1 무한루프

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

video 태그

• controls : 제어 기능 표출
• autoplay : 들어가자마자 바로 재생 (크롬, 사파리는 브라우저 정책상 autoplay를 막아두었으나, 음소거(muted) 시 autoplay 적용 가능함)
• width, height 조절 가능 → resizing도 가능하지만 영상의 종횡비가 적용되며 resizing됨.

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

 div 태그

• 블럭 태그 → 영역 블럭(자동 줄바꿈)
• 아무 기능이 없는 태그(목적이 없다.) → 사용성 多多多⭐
• 이 친구의 진가는 CSS + JavaScript를 배워야만 알 수 있다.

 

span 태그

• 인라인 태그 → 줄바꿈 X
• 아무 기능이 없는 태그(목적이 없다.) → 사용성 多

 

이로써 HTML 태그에 대한 수업은 끝났다! 이제 Visual Studio Code를 설치하고 CSS를 배우며 본격적으로 태그를 사용해 볼 예정!!

 

*글 작성에 참고한 내용: 학원 쌤의 열정적인 수업