본문 바로가기

Frontend146

HTML 웹 페이지를 통해 사용자 입력을 받는 폼을 만들어 보자 HTML에서는 폼을 만들기 위한 다양한 태그들을 제공한다. 폼의 경우 로그인, 등록, 검색, 예약, 쇼핑 등의 다양한 웹 서비스에서 사용자의 입력을 받기 위해 사용된다.  태그 기본 형식name 속성은 폼의 이름을 지정하는 것으로 자바스크립트에서 사용되며, action속성은 폼 데이터를 처리할 목적지를 지정한다. method속성은 폼 데이터를 웹 서버로 전송하는 형식을 설정하는데 삭제(delete), 추가(post, put), 변경(patch), 색인(get) 등의 속성이 있으나 대표적인 방식은 get 과 post 이다. get의 경우 url의 마지막에 정보가 작성이 되며, 개방적이기 때문에 주의 해야한다. post의 경우에는 get보다 담을 수 있는 데이터 용량이 크다. post의 경우 무거운 파일을 .. 2024. 6. 29.
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.

티스토리툴바