개발/HTML3

• 

  ProgressBar를 <progress> 태그로 만들기 아래의 정체성 버튼을 누르면 상단의 프로그래스바가 채워지는 페이지를 만들었다. 팀원이 프로그래스바를 컴포넌트로 만들지말고 태그가 있으니 이걸 이용해서 만들어보라고 조언해주어서 변경을 해보았다. 기존의 코드 totalClicksNeeded -> 전체 클릭 수 currentClicks -> 현재의 클릭 수 전체 클릭 수를 현재 클릭 수로 나뉘고 100을 곱해서 현재의 %를 구하였다. const calculateProgress = () => { return (currentClicks / totalClicksNeeded) * 100; }; %를 width로 보내서 %만큼 width가 채워지게 만들었다. & > div { height: 4px; width: ${calculateProgress}%; backgrou.. 개발/HTML 2024. 3. 26.

• 

  시매틱(Semantic) 태그의 쓰임새 🏷️ HTML 시맨틱(Semantic) 태그의 쓰임새 시맨틱 태그 (Semantic Tag) 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들이다. semantic 태그가 나오기 이전 아래 그림과 같이 태 inpa.tistory.com 본 글은 Inpa Dev님의 블로그 내용을 제가 보기편하도록 가져온 것 입니다. 시맨틱 태그 (Semantic Tag) 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들이다. 시맨틱 태그 구성 요소 시맨틱 태그 설명 header 페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등등으로 구성 nav 페이지.. 개발/HTML 2023. 6. 10.

• 

  HTML 태그 🏷️ HTML 태그 종류 총모음 태그 모음 요약표 html 태그들을 표로 정리한 요약표 이다. 표의 태그 링크를 누르면 예시 코드 페이지로 이동된다. 태그 설명 주석(comment)을 정의함. 해당 문서(document)의 타입을 정의함. 다른 콘 inpa.tistory.com 이글은 inpa Dev님의 블로그에서 대부분 가져온 것입니다. 제가 사용하기 위한 것만 추려서 가져왔습니다. HTML5의 기본요소 내용 글자 / 폰트 관련 태그 모음 : 제목 이것은 h1 tag 입니다. 이것은 h2 tag 입니다. 이것은 h3 tag 입니다. 이것은 h4 tag 입니다. 이것은 h5 tag 입니다. 이것은 h6 tag 입니다. : 긴 가로선 표시 : 줄 바꿈 태그가 삽입된 위치에서만 줄이 바뀐다. 닫는 태그 X .. 개발/HTML 2023. 6. 10.