WEB/HTML6 [HTML] 레이아웃(Layout) HTML 레이아웃 레이아웃(Layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 것을 의미한다. HTML 레이아웃을 구성할 때는 의미를 명확히 전달해 주는 요소를 사용해, 해당 요소가 무슨 목적으로 사용되었는지 알 수 있도록 하는 것이 중요하다. 예를 들어 의미 요소가 아닌 태그나 태그는 해당 요소가 무슨 목적으로 사용되었는지 코드를 봐야 알 수 있지만, 의미 요소인 태그는 코드를 보지 않아도 해당 요소가 문서의 도입부를 나타내기 위해 사용되었다는 것을 알 수 있다. 1) header 요소 HTML 문서 전체나 특정 부분에 대한 헤더(header)를 나타내는 요소이다. 헤더(header)란 한 컨텐츠에서의 도입부를 의미하며, 하나의 문서 내에는 여러 개의 header 요소가 존.. 2023. 1. 7. [HTML] 테이블(Table) 요소 테이블 구성 요소 테이블은 셀(내용이 들어가는 하나의 칸)로 이루어져 있다. 테이블의 행(가로 방향)을 row, 열(세로 방향)을 column이라 합니다. : 표를 나타내는 태그 : 행을 나타내는 태그 : 제목 셀을 나타내는 태그로 텍스트가 굵게 표현됨 : 셀을 나타내는 태그 태그는 하나 이상의 태그로 이루어져 있으며, 태그는 셀을 나타내는 , 태그를 자식으로 가진다. 테이블 구조 관련 태그 테이블이 복잡해지면 이를 해석해서 음성으로 전달해야 하는 스크린 리더기가 테이블을 이해하는 것이 더욱 어려워질 것이다. 이와 같은 문제를 해결하기선 위해 테이블을 구조적으로 파악하는데 도움이 되는 태그를 사용해야 한다. : 표의 제목을 나타내는 태그 : 제목 행을 그룹화하는 태그 : 본문 행을 그룹화하는 태그 .. 2023. 1. 7. [HTML] 이미지(Image) 요소 이미지(Image) 요소 이미지 태크는 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그이며 기본 문법은 아래와 같다. [결과] 1) src 속성 이미지 태그의 필수 속성으로 이미지의 경로를 나타낸다. 2) alt 속성 이미지를 대체하는 텍스트를 나타내는 속성으로, 이미지가 존재하지 않거나 사용자가 이미지를 볼 수 없을 때 해당 이미지 를 대신한 정보를 제공한다. 웹 접근성 측면에서 중요한 속성이기 때문에 src 속성과 더불어 반드시 들어가야 하는 속성이다. 3) width/height 속성 이미지의 가로/세로 크기를 나타내는 속성으로, 값을 입력하면 자동으로 픽셀 단위로 계산된다. width/height는 선택적인 속성이지만 이미지의 크기가 고정적이라면 선언하는 것이 성능적인 측면에서 .. 2023. 1. 7. [HTML] 리스트(List) 요소 리스트(List) 요소 리스트는 일련된 항목들을 나열한 것으로, 콘텐츠가 많은 사이트는 구분할 항목이 많기 때문에 리스트가 자주 사용된다. 리스트는 , , 태그를 이용해 다양한 형식으로 표현할 수 있다. 1. 태그 ul(unordered list) 태그는 순서가 없는 리스트를 표현할 때 사용한다. 콩나물 파 국 간장 [결과] 태그를 선언한 후 자식 태그로 를 사용해 리스트를 나열하며, 자식 태크로는 만 올 수 있다. 2. 태그 ol(ordered list) 태그는 순서가 있는 리스트를 표현할 때 사용한다. 냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다. 콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다. 뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다. [결과].. 2023. 1. 6. [HTML] 앵커(Anchor) 요소 앵커(Anchor) 요소 앵커(Anchor) 태그의 기본 표현은 아래와 같으며 a 태그, 앵커, 링크 등 여러 이름으로 불린다. 네이버 1. href 속성 링크를 만들기 위해 는 반드시 href(hypertext reference) 속성을 가지고 있어야 한다. href 속성은 이동하고자 하는 페이지의 URL 값을 가진다. 2. target 속성 target 속성은 이동한 페이지를 어떤 방식으로 표시할지를 나타내는 속성으로 _self, _blank 등이 있다. _self는 링크 클릭 시 현재 탭 내에서 페이지를 이동하며, target 속성을 선언하지 않으면 기본적으로 self와 같이 동작한다. _blank는 링크 클릭 시 새로운 탭을 띄어 페이지를 이동한다. 내부 링크 를 통해 만들어진 링크가 꼭 외부 .. 2023. 1. 6. 이전 1 2 다음
