HTML (9) 썸네일형 리스트형 HTML input요소의 속성 값 속성 value 속성 value 속성은 input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정 1 2 3 4 5 6 7 8 9 이름 : 학번 : 학과 : Colored by Color Scripter cs 읽기 전용 속성 readonly 속성 readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정 disabled 속성과 다른 점은 전송 버튼을 누르면 초깃값이 서버로 전송된다는 점이다. 1 2 3 4 5 6 7 8 9 이름 : 학번 : 학과 : Colored by Color Scripter cs disabled 속성 disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정 이 속성이 설정된 필드는 사용할 수도 없고, 클릭할 수도 없다.. HTML input 요소 HTML에서 사용할 수 있는 대표적인 input요소의 타입 1. 텍스트 입력(text) 2. 비밀번호 입력(password) 3. 라디오 버튼(radio) 4. 체크박스(checkbox) 5. 파일 선택(file) 6. 선택 입력(select) 7. 문장 입력(textarea) 8. 버튼 입력(button) 9. 전송 버튼(submit) 10. 필드셋(fieldset) 텍스트 입력(text) 태그의 type 속성값을 "text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있다. 1 2 3 4 5 6 7 검색할 내용을 입력하세요 : Colored by Color Scripter cs 비밀번호 입력 태그의 type 속성값을 "password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있다.. HTML iframe요소 iframe이란 inline frame의 약자 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다. 문법 iframe 요소는 frame 요소와는 달리 종료 태그가 존재한다. 또한, 명시된 크기로 삽입되는 창의 크기가 고정된다. 1 2 3 Colored by Color Scripter cs iframe 요소의 테두리 변경 iframe 요소는 기본적으로 검정색 테두리(border)를 가진다. style 속성에서 border 속성을 이용하면 변경 가능 1 2 3 Colored by Color Scripter cs 테두리를 표현하고 싶지 않으면 style 속성에서 border 속성값을 none으로 설정하면 된다. 1 2 3 Col.. HTML 블록과 인라인 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display속성을 가진다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 중 하나를 가지게 된다. 1.블록(block) 2.인라인(inline) 블록(block)타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다. 1 2 3 4 5 p요소는 display 속성값이 블록인 요소입니다. cs display 속성값이 블록(block)인 대표적인 요소 : , , , , , 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block)요소. 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 .. HTML 리스트,테이블 HTML 리스트(List) 리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미한다. 1. 순서가 없는 리스트(unordered list) 2. 순서가 있는 리스트(ordered list) 3. 정의 리스트(definition list) 순서가 없는 리스트(unordered list) 태그로 시작, 포함되는 각각의 리스트 요소는 태그로 시작. 각각의 리스트 요소 앞에는 기본 마커로 검정색의 작은 원이 위치 1 2 3 4 5 6 7 8 9 사과 멜론 바나나 cs 순서가 있는 리스트(ordered list) 태그로 시작, 포함되는 각각의 리스트 요소는 태그로 시작. 각각의 리스트 요소 앞에는 기본 마커로 아라비아 숫자가 위치 1 2 3 4 5 6 7 8 9 사과 멜론 바나나 cs 정의 리스트.. HTML 링크 , 이미지 링크 오늘날 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재한다. 이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 태그로 표현! 문법 HTML 링크 태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시한다. 태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있다. 1 2 3 4 5 이 링크를 클릭해 보세요! cs line3 클릭하면 "/html/intro"로 이동 target 속성 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시한다. 예제) 1 2 3 4 5 6 7 8 9 10 11 12 blank self parent top myframe cs 링크의 상태(s.. HTML 스타일(색,글꼴,배경) HTML 스타일(Style) HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있다. 하지만 이러한 style 속성을 이용한 방법은 오직 단 하나의 HTML 요소에만 스타일을 적용할 수 있다. 문법 배경색 변경 style 속성을 이용한 배경색 변경 글자색 변경 style 속성을 이용한 글자색 변경 글자 크기 변경 style 속성을 이용한 글자 크기 변경 텍스트(문단) 정렬 text-align속성은 HTML 요소에 대한 수평 텍스트 정렬(가운데) style 속성을 이용한 문단 정렬 변경 여러 스타일의 설정 style 속성을 이용하여 여러 CSS 스타일을 한 번에 적용할 수 있다. style 속성을 이용하여 한 번에 스타일링 하기! HTML 배경(.. HTML텍스트 요소 제목(Heading) HTML은 제목을 표현할 수 있는 다양한 크기의 태그를 제공한다. 가장 큰 태그부터 가장 작은 태그까지 다양한 크기로 제목을 표현할 수 있다. 단락(Paragraph) 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 부른다. HTML에서는 태그를 이용하여 이러한 단락을 표현한다. This is a paragraph. This is another paragraph. 띄어쓰기와 줄 나누기 HTML 코드에서 띄어쓰기나 줄 나누기를 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에는 전혀 영향X 웹 브라우저는 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식하기 때문이다. 태그(break line)를 사용하면 새로운 단락을 만들지 않고.. 이전 1 2 다음
