본문 바로가기

Frontend/HTML13

HTML 페이지 내에 다른 HTML을 출력해보자 (<iframe>태그) iframe은 인라인프레임, 현재 HTML 문서 내에 다른 문서를 포함하는 데 사용된다. 태그는 태그 내에서만 사용되며, src속성을 적지 않아도 빈 상태로 영역이 만들어 진다. 또한 인라인 프레임 안에 또 다른 인라인 프레임을 중첩해서 만들 수 있다. 최근에는 보안 상의 문제로 iframe을 가급적 사용하지 않는 것을 권장한다. 태그 기본형식src는 iframe에 포함할 다른 문서의 주소를 나타내며, width는 iframe의 너비 그리고 height는 iframe의 높이를 설정한다. 2024. 6. 28.
HTML에서 표(table)를 만들어보자 태그 기본형식  표는 제목, 표의 가장 윗부분 , 본문 , 아래부분으로 구성되어 있다. 와 태그를 사용함으로써 테이블의 본문이 변경되더라도 영향을 받지 않는다. 표는 을 통해 행 단위를 표현하고 제목 정보를 가진 셀은 로 표현하여 굵게 표시되며 중간 정렬되고, 데이터 정보 셀은 로 표현한다. 태그의 경우 반응형 웹 구현시에 한계가 있다는 단점과 행 단위의 지정은 쉽지만 열 단위의 지정이 어려워 디자인에 어려움이 있다.  제목 항목1 항목2 내용1 내용2 .. 2024. 6. 27.
HTML의 <a>태그에 대해 알아보자 태그   앵커태그로 불리는 태그는 하이퍼링크를 연결할 수 있는 태그로 다른 웹페이지를 이동하거나 웹 페이지 내부에서 특정한 위치로 이용할 때 사용된다. 방문하지 않은 링크는 파란색으로, 방문한 링크는 보라색으로 활성 링크는 빨간색으로 표시된다. 태그 기본형식 내용  href는 링크의 대상을 나타내는 속성이다. target에는 blank, parent, self, top 속성이 있으며 링크를 열 때 어떻게 열 지에 대해서 지정한다.target 속성설명_blank새 창이나 탭에서 링크를 연다._self동일한 창에서 링크를 연다. (기본값)_parent상위 창에서 링크를 연다. (없으면 _self)_top전체 브라우저 창에서 가장 상위의 창에서 연다. (상위 창 없으면 _self) 나의 티스토리로.. 2024. 6. 27.
HTML 이미지 삽입을 할 수 있는 <img>태그에 대해 알아보자 태그 태그는 여는 태그로만 작성할 수 있으며(싱글태그) 자신의 내용과 앞뒤 태그의 내용을 같은 라인에 출력하는(인라인태그) 태그다. 태그의 경우 이미지 소스에 대한 경로를 지정하여 불러올 수 있는데 경로를 지정하는 방식은 상대경로지정방식과 절대경로지정방식으로 나뉜다. 태그 기본형식 src의 경우 이미지의 경로, HTML문서에서 이미지 파일까지 찾아가는 경로를 작성하는 칸이다. src 속성으로 지정할 수 있는 이미지 종류는 gif, png, jpg, svg 가 있다. alt는 이미지 대한 정보가 작성되어있는 속성으로 소리내어 읽어주는 기능, 사진이 없는 경우 출력되는 이미지 설명 등에서 사용된다. width는 이미지의 폭, height는 이미지의 높이를 설정할 수 있는 속성이다.  태그 경로지정방식상대경로.. 2024. 6. 27.
HTML의 목록 태그 HTML의 목록태그는 나열되는 목록을 작성할 때 사용한다. 나열되는 목록을 작성하는 것에도 사용되지만, 웹 브라우저의 메뉴를 형성할 때 기본적으로 사용되는 태그다. 이번에 설명할 목록태그는 , 그리고 태그다.  목록 태그  목록 순서가 없고 목록화 할 수 있는 태그로, 으로 설정하여 웹 브라우저의 메뉴를 형성하는데 사용된다. 목록 순서가 있는 목록태그로 목록타입을 숫자, 영대소문자, 로마 대소문자 및 역순으로 설정이 가능하다. 목록타입작성타입 기본적으로 숫자(1,2,3,4..) 영어 소문자(a,b,c,d..)순 영어 대문자(A,B,C,D..)순로마 소문자(i,ii,iii...)순로마 대문자(I,II,III..)순 숫자 5부터 (5,6,7,8..) 작성숫자 5부터 역순으로(5,4,3,2,1..) 작성 .. 2024. 6. 27.
HTML의 텍스트 관련 태그 HTML의 태그는 웹페이지의 구조와 컨텐츠를 정의하는 필수 구성 요소로, 시작태그와 종료태그로 이루어져있다. 태그는 각자 고유한 속성을 가지고 있는 경우가 있으며 태그에 속성을 부여할 수 있다. 또한 HTML의 태그는 블록태그(block)와 인라인태그(inline)로 나뉜다. 블록태그는 항상 새 라인에서 시작하고 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지하고, 인라인태그는 자신의 내용과 앞뒤 태그의 내용을 같은 라인에 출력하는 태그이다.  종류블록태그, , , 인라인태그, , ,  텍스트 관련 태그 html은 기본적으로 엔터, 탭, 스페이스바는 무조건 공백 하나로 인식한다. 텍스트 관련 태그를 사용하여 인식할 수 있게 할 수 있으며, CSS를 사용하지 않아도 텍스트에 스타일을 변경할 수 있다.  HTM.. 2024. 6. 26.