본문 바로가기

Web/HTML3

[HTML] 시맨틱 태그와 div, span 1. 시맨틱 태그란? : 시맨틱 태그란 그 이름만 봐도 의미를 알 수 있는 태그를 의미한다. 왜 시맨틱 태그를 사용하는가❓ 1. 웹 브라우저가 HTML 소스코드만 보고도 어느 부분이 제목이고 메뉴이고 본문인지 쉽게 알 수 있다. 2. 문서 구조가 정확히 나누어지므로 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기 쉽다. 3. 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다. 헤더(header) 사이트 로고, 제목, 검색창, 사이트 메뉴를 삽입한다. 네비게이션(nav) 사이트의 메뉴들이 위치 nav 태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드바 안에 포함할 수 있고 독립해서 사용할 수도 있다. 메인(main) 사이트의 본문 내용 위치 메뉴, 사이드바, 로.. 2023. 5. 4.
[HTML] 자주 사용되는 HTML 태그정리2 - 표, 멀티미디어 1. 표 관련 태그 table: 표를 나타낸다 caption: 표의 제목을 넣는다. tr: 표의 행을 만든다. td: 표의 셀을 만든다. th: 제목 셀을 만든다. thead: 표 구조에서 제목 부분을 나타낸다. tbody: 표 구조에서 내용 부분을 나타낸다. tfoot: 표 구조에서 요약이나 정리 부분을 나타낸다. col: 표에서 열의 스타일을 지정한다. colgroup: 표에서 여러 열을 함께 묶어서 스타일을 지정한다. rowspan: 표에서 셀들을 행으로 합친다. colspan: 표에서 셀들을 열로 합친다. 셀의 내용 셀의 내용 코드 구조화 표 제목 /* 표의 제목 부분 */ /* 표의 행을 만든다. * 제목1 /* 제목 셀을 만든다. * 제목2 제목3 제목4 /* 표의 내용 부분 * 내용1.1 /.. 2023. 5. 4.
[HTML] 자주 사용되는 HTML 태그정리1 - 텍스트, 목록 1. hn 태그 주로 제목에 사용된다. ~까지 사용할 수 있으며 숫자가 커질 수록 글자 크기는 작아진다. 2. p 태그 테스트 단락, 내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄을 바꾼다. 3. br 태그 줄 바꾸는데 사용한다. 텍스트 단란 중 원하는 위치에서 줄을 바꾼다. [p태그와 br태그의 차이점] p태그는 단락을 나누면서 줄바꿈을 해주는 태그이고 br태그는 단순한 줄바꿈을 해주는 태그이다. 4. strong, b 태그 strong: 텍스트를 굵게 표시 + 강조의미 O b: 텍스트를 굵게 표시 + 강조의미 X 5. em, i 태그 em: 텍스트를 기울여서 표시 + 강조의미 O i: 텍스트를 기울여서 표시 + 강조의미 X 화면 낭독기에서 em은 강조해서 읽어준다. 6. sup, sub su.. 2023. 5. 4.