본문 바로가기

반응형

FrontEnd

(65)
#7. HTML5에서 추가된 다양한 타입의 input 요소 # HTML5에서 새롭게 추가된 다양한 타입의 input 요소는 다음과 같습니다. # datalist 요소, keygen 요소, output 요소 # 각 요소들의 특징과 사용방법에 대해서 알아보도록 하겠습니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML에서 추가된 다양한 타입의 input 요소 1) datalist 요소 datalist 요소는 input 요소에 대해 미리 정의된 옵션 리스트를 명시해 주는 요소입니다. 사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 골라도 됩니다. 단, input 요소의 list 속성값이 datalist 요소의 id 속성값과 반드시 일치해야 연결됩니다. 2) keygen 요소 keyge..
#6-3. HTML input 요소의 속성 변경하기 # 앞서 살펴본 input 요소의 다양한 형태에서 속성을 바꿔 알맞는 속성을 사용할 수 있도록 합니다. # value, readonly, disabled, maxlength, size 등의 속성을 변경할 수 있습니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML Input 요소의 속성 1) value 속성 value 속성은 input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정합니다. 이름 : 학번 : 학과 : 2) readonly 속성 readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정하는 것입니다. disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 초깃값이 서버로 전송된다는 점입니다. 이름..
#6-2. HTML input 요소를 사용해 입력받기 # HTML에서는 다양한 타입의 input 요소를 사용해 사용자로부터 입력을 받을 수 있습니다. # 텍스트 입력(text), 비밀번호 입력(password), 라디오 버튼(radio), 체크박스(checkbox) # 파일선택(file), 선택 입력(select), 문장 입력(textarea), 버튼 입력(button), 전송 버튼(submit), 필드셋(fieldset) # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML 1. 다양한 타입의 input 요소 HTML에서 사용할 수 있는 대표적인 input 요소들은 다음과 같습니다. 텍스트 입력(text) 비밀번호 입력(password) 라디오 버튼(radio) 체크박스(checkbox) 파일선택(file) 선택 입력(sele..
#6-1. HTML Form 사용 방법(method :: get, post) # HTML에서 사용되는 form 요소를 알아보겠습니다. # from 사용 문법을 배우도록 하겠습니다. # method 속성의 get , post에 대해 배우고 그 장,단점에 대해 배워보도록 하겠습니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML Form 요소 1) form 요소란? 웹 페이지에서는 form요소를 사용하여 사용자로부터 입력을 받을 수 있습니다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form요소를 사용합니다. 문법: action: 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시해야 합니다. (이렇게 전달 받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 합니다.) method: 입력받은 데이터..
#5-2. HTML 테이블(table) 만드는 방법 # HTML에서 테이블(table)을 만드는 방법을 소개합니다. # 테이블의 구성요소와 열을 합치는 방법, 행을 합치는 방법 등을 소개합니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 테이블(TABLE) 1) HTML 테이블(table)이란? 테이블(table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다. HTML에서는 태그를 사용하여 이러한 테이블을 작성할 수 있습니다. 태그의 구성은 다음과 같습니다. 1. 태그는 테이블에서 행을 구분 2. 태그는 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨가 적용되고 정렬은 가운데 정렬 3. 태그는 테이블의 열을 각각의 셀(cell)로 나누어 줌 CSS의 border..
#5-1. HTML 리스트(list) 만드는 방법(ul, ol, dl) # HTML 에서 리스트(list)를 만드는 방법을 설명한다. # HTML 리스트(list)에는 세 가지 방법이 있습니다. # 1) 순서가 없는 리스트(unordered list) :: # 2) 순서가 있는 리스트(ordered list) :: # 3) 정의 리스트(definition list) :: # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 리스트(List) 리스트를 만들 때 한 가지 팁이 있는데, 리스트를 만들 때 "Tap" 키를 활용하는 것입니다. 이 방법은 프론트 개발자들의 피로도를 줄여줄 수 있는 조그만한 팁이라고 할 수 있습니다. 아래와 같은 리스트를 만든다고 가정을 했을 때, 손으로 작성하는 코드의 양을 줄일 수 있습니다. 1) 순서가 없는 리..
#4-4. HTML 이미지(Image) <img> 태그 # HTML 에 이미지를 삽입하는 방법을 알아봅니다. # HTML 다양한 설정 방법을 알아봅니다. # 이미지 삽입, 이미지 크기 설정, 이미지 테두리(border) 설정, 이미지에 링크 설정, 이미지맵 만들기 # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 이미지 1) 이미지 삽입 문법 src 속성은 이미지가 저장된 주소의 URL 주소를 명시합니다. alt 속성은 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있습니다. 2) 이미지 크기 설정 HTML 에서는 style 속성으로 이미지의 크기를 설정할 수 있습니다. 또한, width와 height 속성을 이용하면, 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정할 수 있습니다..
#4-3. HTML 링크(link) 설정 방법(<a>) # html 에서 링크(link)를 설정하는 방법과 tag의 target 속성, 링크의 상태 등을 설명한다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML 1. HTML 링크(link) 1) 문법 이 링크를 클릭하세요 2) target 속성 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다. _blank : 링크로 연결된 문서를 새 창이나 새 탭에서 오픈 _self : 링크로 연결된 문서를 현재 프레임(frame)에서 오픈(기본 설정) _parent : 링크로 연결된 문서를 부모 프레임(frame)에서 오픈 _top : 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈 프레임(frame) 이름 : 링크로 연결된 문서를 지정..
#4-2. HTML 배경(Background) 설정 방법 # HTML 문서의 기본 배경은 흰색입니다. # 또한, HTML 요소들도 각자 자신만의 배경을 가지고 있습니다. # 이번 "HTML 배경(Background) 설정 방법"편에서는 HTML의 배경을 변경하는 방법에 대해 설명합니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 배경(Background) HTML에서는 이러한 배경을 다음과 같이 변경할 수 있습니다. 1. 배경을 다른 색으로 변경 2. 배경을 다른 이미지로 변경 위의 두 가지 방법을 아래에서 하나씩 배워보겠습니다. 1) 배경을 다른 색으로 변경 HTML5 이전까지는 bgcolor 속성을 이용해 HTML 요소의 배경색을 다른 색으로 변경할 수 있었습니다. 하지만 HTML5 부터는 bgcolor 속성..
#4-1. HTML 스타일(style) 속성 # 속성을 이용하면 CSS 스타일을 HTML 요소에 직접 설정이 가능합니다. # 하지만 이러한 style 속성을 이용한 방법은 오직 하나의 HTML 요소에만 스타일을 적용할 수 있습니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 스타일(style) 속성 1) 문법 2) 배경색 변경 style 속성을 이용한 배경색 변경 3) 글자색 변경 style 속성을 이용한 글자색 변경 4) 글자 크기 변경 style 속성을 이용한 글자 크기 변경 5) 문단 정렬 변경 style 속성을 이용한 문단 정렬 변경 6) 여러 스타일 설정 style 속성값에 사용되는 CSS 속성과 속성값들은 세미콜론(;)을 이용하여 구분 CSS 속성을 하나만 사용할 때나, 여러 개의 CSS ..

반응형