728x90 반응형 📌 Front End/└ HTML56 [HTML] 구조설계 시맨틱 태그(Semantic Tag) 활용 - <header> <nav> <main> <article> <section> <aside> <footer> 📌 시맨틱 태그 활용한 웹사이트 구조시맨틱 태그를 활용하면 웹사이트 구조를 명확하게 정의하고, 검색 엔진 최적화(SEO) 도움이 됩니다. 로고 GNB 내비게이션 메뉴 섹션 1 섹션 2 섹션 3 푸터 📌 시맨틱 태그 종류, , , 각각 헤더, 주요 콘텐츠, 사이드바, 푸터에 사용됩니다. 머리, 몸통, 발, 사이드바 역할헤더 - header사이트의 로고, 제목 등 위치메뉴 - 는 GNB 등 내비게이션 메뉴를 묶는 데 사용되며, 보통 과 함께 나타납니다. 은 순서 없는 목록으로 를 하위 태그로 사용하고, 은 순서 있는 목록으로 동일하게 를 사용합니다. navigation사이트의 메뉴.. 2024. 10. 22. [HTML] 자동 줄바꿈, 줄바꿈, 간격, 띄어쓰기 및 특수문자 엔티티 코드 - <pre> <br> <div> <span> < 📌 자동 줄바꿈 태그 태그는 작성한 HTML 내용을 그대로 출력하는 태그줄 바꿈과 띄어쓰기를 모두 인식합니다.첫번째 두번째 세번째 📌 줄바꿈 태그 웹 페이지에서 텍스트를 나열할 때 줄바꿈을 원하면 태그를 사용합니다.이 태그는 닫는 태그가 없는 빈 태그입니다.아래와 같이 작성하면 "첫 번째 줄" 다음에 "두 번째 줄"이 따로 출력됩니다.첫 번째 줄두 번째 줄 📌 간격 태그 , 과 태그는 웹 페이지에서 특정 부분을 그룹화하거나 스타일을 적용하는데 사용 : 블록 요소를 그룹화 : 인라인 요소를 그룹화 이 부분은 테두리와 간격을 가진 박스입니다.이 텍스트는 빨간색으로 표시됩니다. 📌 띄어쓰기    HTML에서 여러 개의 공백을 사용하더라도 브라우.. 2024. 10. 22. [HTML] 폼(Form) 태그 종류 태그폼태그에는 name, action, method, target 등이 있습니다. 폼 속성을 이용해 입력한 값을 어디로 보낼 것인지 어떻게 보낼 것인지 정할 수 있습니다. 📝 형태 /* 데이터 전송 내용 */ name : 폼의 이름을 지정합니다.action : 폼 데이터가 전송되는 백엔드 url을 지정합니다.method : 폼을 서버에 전송할 http 메소드를 정합니다. (GET / POST)target : action에서 지정한 스크립트 파일을 다른 위치에 열도록 지정합니다.accept-charset : 폼 전송에 사용할 문자 인코딩을 지정합니다. 필수 속성action : 데이터를 전달할 url을 넣어줌method : 폼 요소를 전달하는 방식으로 POST와 GET 이 있습니다.POSTurl에 받.. 2024. 5. 24. [HTML] 시맨틱 태그(Semeantic Tag)란? 📌 시맨틱 태그(Semeantic Tag) 란?Sementic 요소들로 아래와 같이 직관적으로 웹사이트를 구성할 수 있습니다.🔎 시맨틱 태그의 종류태그설명사이트의 머리부분에 사용웹 페이지 메뉴를 만들 때 사용 메인 콘텐츠를 나타내는데 사용 제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소개별 콘텐츠를 나타내는 요소 (여러개 반복되는 요소)좌우측의 사이드 영역사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분 제목과 부제목을 묶어서 나타내는 요소 📌 시맨틱 태그 상세 설명 태그는 보통 사이트의 도입부, 즉 머릿 부분에 사용되며 사이트의 로고나 제목 등을 기술할 때 사용합니다. 하나의 구역이기에 태그 안에 부수적인 태그들이 추가로 들어갈 수 있으며 주로 태그를 사용해 검색.. 2024. 5. 13. [HTML] 파비콘(favicon) 만들기 파비콘 만드는 방법 1. 우선 포토샵이나 이미지툴로 192*192 픽셀의 이미지를 만든다. 이미지 확장자는 png나 jpg이면 상관없다. 2. www.favicon-generator.org 사이트 접속한다. Favicon & App Icon GeneratorUpload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.www.favicon-generator.org 3. 만든 이미지를 첨부하고 [Create Favicon] 버튼을 클릭한다. 옵션은 기본적으로 체크되어있는대로 두면 된다. (Generate icons fo.. 2023. 4. 25. [HTML] 폼(form)의 이해 1. 폼 태그 동작방법1. 폼이 있는 웹페이지를 방문합니다.2. 폼 내용을 입력합니다.3. 폼 안에 있는 모든 데이터를 웹 서버로 보냅니다.4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘깁니다.5. 웹 프로그램은 폼 데이터를 처리합니다.6. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보냅니다.7. 웹 서버는 받은 html 페이지를 브라우저에 보냅니다.8. 브라우저는 받은 html 페이지를 보여줍니다. 2. 폼 태그 속성폼 태그 속성에는 name, action, method, target 등이 있습니다.폼 속성을 이용하여 전송할 때 어디로 보내야 하는지, 어떤 방법으로 보낼지 정합니다.폼 태그 속성은 다음과 같습니다.action : 폼을 전송할 서버 쪽 스크립트 파일을 지정합니.. 2023. 3. 10. 이전 1 다음 728x90 반응형
