[HTML] 구조설계 시맨틱 태그(Semantic Tag) 활용 - <header> <nav> <main> <article> <section> <aside> <footer>
📌 시맨틱 태그 활용한 웹사이트 구조시맨틱 태그를 활용하면 웹사이트 구조를 명확하게 정의하고, 검색 엔진 최적화(SEO) 도움이 됩니다. 로고 GNB 내비게이션 메뉴 섹션 1 섹션 2 섹션 3 푸터 📌 시맨틱 태그 종류, , , 각각 헤더, 주요 콘텐츠, 사이드바, 푸터에 사용됩니다. 머리, 몸통, 발, 사이드바 역할헤더 - header사이트의 로고, 제목 등 위치메뉴 - 는 GNB 등 내비게이션 메뉴를 묶는 데 사용되며, 보통 과 함께 나타납니다. 은 순서 없는 목록으로 를 하위 태그로 사용하고, 은 순서 있는 목록으로 동일하게 를 사용합니다. navigation사이트의 메뉴..
2024. 10. 22.
[API] REST API 및 URL 요청 테스트 도구 - Ping(핑), Postman(포스트맨), Wireshark(와이어샤크)
📌 API 통신 연결 테스트API 개발 시, 가장 먼저 API 요청 URL이 정상적으로 연결되는지 확인하는 것이 중요합니다.이후, 요청 데이터 형식에 맞춰 지정된 URL로 요청을 보내고, 응답을 제대로 받아오는지 확인해야 합니다. Ping(핑), Postman(포스트맨), Wireshark(와이어샤크) 사용하여 API 통신 테스트 하는 방법에 대해 설명드리겠습니다. PingAPI 서버와 내 컴퓨터 간의 네트워크 연결 상태를 확인하고, 응답 시간과 연결 가능 여부를 파악하는데 사용Postman다양한 메소드로 API 요청을 보내고, 파라미터와 헤더 설정 후 응답을 빠르게 확인할 수 있는 테스트 도구Wireshark네트워크 패킷을 분석하여 API 요청과 응답이 올바르게 전송되는지 확인하고, 문제 원인을 ..
2024. 10. 21.
[Web] 웹 개발 리소스 모음 - 색상, 디자인, 애니메이션, SVG, 파비콘, ASCII, 캡처 도구
📌 웹 개발 리소스 모음 프론트엔드 개발에 필요한 다양한 웹 디자인 및 개발 리소스를 한 곳에 모았습니다. 색상, 디자인, 애니메이션, SVG, 파비콘, ASCII 아트, 캡처 도구 등각 카테고리는 프론트엔드 개발 과정에서 유용한 자료와 도구를 제공합니다. 디자인 및 색상 도구 애니메이션 도구 SVG 도구 파비콘 도구 ASCII Art 도구 웹페이지 캡처 도구 🎨 디자인 및 색상 🌈 색상 팔레트Adobe Color Wheel (색상 휠)Coolors (색상 생성기)Adobe Color Contrast Analyzer (대비 분석기)Material Design Colors (구글 머티리얼 색상)FFFuel (색상 팔레트)Khroma (색상 조화 툴)MyColor.space (색상 선택기)De..
2024. 10. 16.
