입력 양식을 만들어 주는 은 사용자가 입력한 데이터를 서버로 보내는 것을 목적으로 사용하는 태그 로그인 페이지 회원가입 페이지 검색어 입력 페이지 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출할 수 있음 입력 태그들을 포함시키면 해당 입력 요소들은 양식의 개별 항목으로 역할을 수행 서버로 전송하는 역할을 수행 시키기 위해서 사용해야 하는 속성 action : 입력 값을 전송할 서버의 url method : 클라이언트가 입력한 데이터를 어떠한 방식으로 전송할지 설정(GET or POST) 각 입력 항목에 name 속성을 넣어야 각 입력 항목의 역할을 구별해 줄 수 있음 에 속성 submit을 넣어서 제출할수 있게 제출 버튼을 마지막에 넣어야 함
input 태그 단일 태그 데이터 유형 미입력시 Text 데이터 유형 text, email, password, search, date, file 등 목적에 따라 데이터 유형을 다르게 한다. 수치를 입력받는 타입 : color(팔레트), number(스피너), range checkbox placeholder속성으로 입력부 안쪽에 글씨를 표시할 수 있음 Label 태그 입력요소에 라벨을 붙이는 역할을 한다. 이를 이용하면 사용자에게 좀 더 직관적인 입력 요소를 제공할 수 있으며 코드의 가독성 및 명확성이 향상된다. 라벨 안에 input 태그를 위치시켜 붙임 수 있음 input 태그의 아이디 부여수 for속성으로 연결시킬 수 있음 input 외의 다른 입력 태그 다수의 옵션을 포함할 수 있는 선택 메뉴를 만듦..
표 만들기 행과 열로 이루어진 구조로, 행과 열이 만나는 지점인 셀(Cell)이 콘텐츠를 나타내는 최소 단위 목록 만들기와 마찬가지로 여러 개의 태그를 채워 넣음으로 완성한다 표를 만들기 위해서 사용되는 태그 : 하나의 표를 나타내는 태그 : 표 안에서 하나의 행을 나타내는 태그 : 행 안에서 제목에 해당하는 셀을 나타내는 태그 : 행 안에서 콘텐츠에 해당하는 셀을 나태 내는 태그 속성 border : 테두리의 두께를 지정 캐그는 태그 안쪽에서 제목 또는 설명을 나타내는 역할을 수행되며 기본적으로 가운데 정렬 표의 구조 명확하게 표현하기 셀에 표시된 콘텐츠의 성격이나 표의 구조에 따라 여러 개의 셀을 그룹으로 묶어서 관리할 수 있음(컨테이너 역할을 하는 태그들이 있음) : 표의 제목이나 주제를 나타내는 ..
목록 만들기 연관이 있는 항목(item)들을 나열하는 것 순서 있는 목록과 순서 없는 목록으로 구분된다 순서 없는 목록(Unordered List) : 순서 있는 항목(Ordered List) : 리스트에 들어가는 항목 하나하나를 표현할 때는 li태그를 사용 : 항목들을 어떤 태그가 감싸느냐에 따라서 기호가 달라진다(Unordered List 인지 Ordered List인지) 목록을 만드는 데 사용되는 모든 태그는 블록 레벨 요소를 만드는 태그 start 속성으로 순서 있는 목록의 시작 값을 조정 가능 type 속성으로 순서 있는 목록의 앞 모양을 바꿀 수 있음 목록 안에 목록이 들어갈 수 있음
링크표시하기 링크란? 현재 문서에서 다른 문서로 이동할 수 있는 수단 a태그 다양한 유형의 콘텐츠로 연결되는 링크(연결) 역할을 한다. herf 특성 필요 : 해당 속성에 링크를 입력 target속성 지정으로 현재탭에서 열지, 새 탭에서 열지 결정 할 수 있음 target = “_self” : 현재 탭에서 열기(기본값) target = “_blank” : 새탭에서 열기
이미지 표시하기 이미지 태그 이미지를 표시할 때 사용하는 태그 단일태그(닫는 태그는 필요 없음) 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 함 src 속성은 이미지의 위치정보와 파일명(url or 경로) 이미지 태그의 사용법 추가 속성 alt alt는 alternative의 약자로 대체 텍스트 역할을 함 이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신 대체 텍스트가 표시 alt를 사용하면 이미지를 볼 수 없는 시각장애인에게 웹페이지를 서비스해야 하는 상황에 대한 대비가 가능 음성인식기가 이미지 대신 이를 활용 웹 접근성이 좋아짐 width, height 이미지를 표현할 때 이미지 크기를 지정 width, height 각각 너비, 높이를 지정 단위 없이 정수 ..
컨테이너 콘테츠나 레이아웃에 아무런 영향도 주지 않는다 다른 요소 여럿을 묶어 관리하기 편한 게 만드는 역할을 하는 요소이다. 콘텐츠 내용을 구분하거나 공통적인 스타일을 적용하고 자 할 때는 컨테이너를 사용하는 것이 좋다 컨테이너 역할을 담당하는 요소를 만드는 태그 : 블록 레벨 컨테이너 : 인라인 컨테이너 전역속성 모든 HTML 태그에서 공통으로 사용할 수 있는 속성 주요한 전역 속성 전역속성 설명 id 요소에 고유한 이름을 부여하는 식별자 역할 class 요소를 그룹 별로 묶을 수 있는 식별자 역할, 다중 부과 가능 style 요소를 적용할 CSS 스타일 선언 title 요소의 추가 정보를 제공하는 텍스트로 툴팁(요소에 마우스르 올렸을때 나오는 말풍선) 제공함 추가 전역 속성 정보 : https://..
텍스트 표시하기 문단 표시하기 : p태그() 문단 요소를 나타내는 태그로 가장 많이 사용되는 텍스트 태그이다 하나의 태그는 하나의 문단을 표시한다 문단과 문단 사이에는 여백이 존재한다 제목 표시하기 : h태그() 제목(표제) 요소를 나타내는 태그이다 숫자와 함께 사용되며 1일때 가장 크고 6일 때 가장 작다 텍스트 사이 구분선 : hr태그() 수평선을 표시하는 태그이다 수평선은 주제 변경 또는 내용 구분을 위해 주로 사용된다. HTML 텍스트의 특징 엔터를 이용한 줄바꿈을 무시한다 스페이스를 이용한 공백은 한 번만 허용한다 줄 바꿈 태그와 공백 문자 줄 바꿈 : br태그( 두 개 이상의 공백을 표시 : → 해당 문자를 공백 대신 넣어준다 요소의 구분과 인라인 텍스트 요소 요소 구분 웹 요소는 블록레벨 요..
