본문 바로가기
반응형
SMALL

HTML10

[HTML] HTML Semantic Tag(시멘틱 태그) Semantic이란? - 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. - 검색로봇 또는 스크린 리더 등의 기계가 쉽게 해석하고 분석할 수 있도록 만들어진 태그이다. - Semantic 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다. - HTML 요소는 non-semantic 요소(div, span 등)와 semantic 요소(form, table, img 등)로 구분된다. Semantic Tag의 구조 ● Semantic Tag의 일반적인 구조 적용 전 적용 후 Semantic Tag 설명 - Header(머리말.. 2022. 3. 14.
[HTML] HTML 마크업 요소 (공간 분할 태그) - p/div/span & & ● Tag별 특징 태그 설명 - 텍스트를 단락(문단)으로 정의한다. - 줄 바꿈이 자동으로 일어나고 세로로 나열한다. - 와 유사하지만 문단 사이 공백이 있다는 차이점이 있다. - 박스(bolck) 형태로 블록 영역으로 공간을 분할하는 단락 정렬이다. - 줄바꿈이 자동으로 일어나고 세로로 나열한다. - 웹사이트의 레이아웃(전체 틀)을 만들 때 사용한다. - tag를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용한다. - margin(공백) 방향이 4방향 적용된다. - inline 형식으로 공간을 분할한다. - 줄바꿈이 일어나지 않고 가로로 나열한다. - 와 태그와 함께 웹페이지의 일부분에 스타일을 적용시키기 위해 사용한다. - margin(공백) 방향이 양옆으로 2.. 2022. 3. 14.
[HTML] HTML 마크업 요소 (Form) - 스압주의 Form Tag란? - form이란 정보를 입력/선택하고 버튼을 클릭하며 정보를 서버에 전달하고 응답받는 양방향의 의사소통을 지원하는 입력 양식이다. * Web Server : iss, apache 등 * WAS(Web Server + Web Application) : tomcat, regin, webLogic, Jeus 등 (JSON까지 사용하려면 필요) - 사용자의 요청에 따라 서버는 HTML form을 전달한다. (로그인, 검색 등의 양식) - 사용자는 HTML form에 적절한 데이터를 입력한 후 서버로 전송(submit)한다. - 서버는 사용자의 요청을 분석한 후 데이터를 등록하거나 원하는 데이터를 조회하여 결과를 다시 반환한다. * 결과 출력 : HTML(보통 여기에 출력), json, xml.. 2022. 3. 14.
[HTML] HTML 마크업 요소 (링크&iframe) 링크 요소 (Anchor) - Tag는 Anchor의 약자로 텍스트/이미지 콘텐츠에 링크를 설정하거나 다른 페이지로 연결한다. * 하이퍼링크 - 지정한 페이지(다른 html 파일)나 웹 사이트(http://www.~~)나 지정한 위치로 이동할 때 사용한다. - Tag를 서로 중첩해서 사용할 수 없다. ● 소스코드 Hoongrammer로 이동 속성 설명 href 이동할 페이지 또는 링크할URL을 연결합니다. href = "이동할 페이지 또는 링크할URL" target 새 윈도우 창을 여는 방식을 설정합니다. target = "_blank | _top | _self | _parent" ● target 속성 상세 설명 속성 값 설명 _blank - 링크 내용이 새창이나 새탭에서 열린다. _self - targ.. 2022. 3. 14.
반응형
LIST