html

[HTML] HTML - 17.Form요소

이번 시간에는 웹 페이지에서 사용자의 입력을 받는 Form 요소에 대해 알아보도록 하겠습니다. Form 요소 웹 페이지에서 form 요소를 사용해 사용자로부터 입력을 받을 수 있습니다. 또한, 사용자가 입력한 데이터를 서버로 보낼 시에도 form 요소를 사용합니다. form 요소는 다음과 같은 문법을 사용합니다. action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시합니다. 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler) 라고 합니다. method 속성에는 입력받은 데이터를 서버에 전달하는 방식을 명시합니다. 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달됩니다...

[HTML] HTML - 16.레이아웃

이번 시간에는 HTML에 레이아웃에 대해 배워보도록 하겠습니다. HTML 레이아웃(layout) 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관 사항을 결정하는데 매우 중요한 요소입니다. HTML에서 다음과 같이 레이아웃을 작성할 수 있습니다. div 요소를 이용한 레이아웃 HTML5 레이아웃 table 요소를 이용한 레이아웃 div 요소를 이용한 레이아웃 div 요소는 CSS 스타일을 손쉽게 적용할 수 있으며 레이아웃을 작성하는데 자주 사용됩니다. Header 영역 Nav영역 Section 영역 Footer 영역 HTML5 레이아웃 HTML5에서 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공..

[HTML] HTML - 15. iframe 요소

어느덧 HTML이 중간단계쯤 까지 온것 같습니다. 이번 시간에는 HTM에서 다른 웹페이지를 삽입하는 방법을 알아보도록 하겠습니다. iframe 요소 HTML에서 iframe이라는 요소는 inline frame의 약자로 iframe 요소를 이용해 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있습니다. iframe 요소는 frame 요소와는 달리 종료 태그가 존재합니다. 또한. iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정되는 요소입니다. iframe 요소의 테두리 변경 iframe 요소에는 기본적으로 검정색의 테투리(border)를 가집니다. 이러한 테두리의 스타일은 style 속성에서 border 속성을 이용해 변경할 수 있습니다. 테두리를 표현하고 싶지 ..

[HTML] HTML - 14.블록과 인라인

이번시간에는 HTML 공간분할에 대해 알아보도록 하겠습니다. HTML 블록과 인라인 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짖는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. 블록(block) 인라인(inline) 블록(block) 타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며 해당 라인은 모든 너비를 차지합니다. p요소는 display 속성값이 block인 요소입니다. 여기서 ,, , ,, 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 ..

[HTML] HTML - 13.리스트와 테이블

이번 시간에서는 HTML 리스트와 테이블을 삽입하는 방법을 알아보겠습니다. HTML 리스트(List) 리스트(list)란 여러 요소들을 일려로 나열한 목록이나 명단을 의미합니다. HTML에서는 이러한 리스트를 표현하기 위해서 다음과 같은 리스트를 제공합니다. 순서가 없는 리스트(unoredered list) 순서가 있는 리스트(ordered list) 정의 리스트(definition list) 순서가 없는 리스트 순서가 없는 리스트는 태그로 시작되며, 여기에 포함되는 각각의 리스트 요소는 태그로 시작합니다. 각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet) 이 위치합니다. 사과 멜론 바나나 CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는..

[HTML] HTML - 12.링크와 이미지

이번 시간에서는 HTML 링크 주소와 이미지를 삽입하는 방법을 알아보도록 하겠습니다. HTML 링크(Link) 오늘날 웹 페이지에 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlin)가 존재합니다.이러한 하이퍼 링크를 간단히 링크(link)라고도 불리고, HTML에서는 태그로 표현합니다. HTML 링크 태그의 href 속성은 링크를 클릭 시 연결할 페이지나 또는 다이트 URL 주소를 명시합니다. 태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다. 링크를 클릭해서 접속 target속성 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다. 새창에서 열기 현재 창에서 열기 링크로 연결된 부모 프레임 에서 열기 링크로 연결된 창의 가장 상위..

[HTML] HTML - 11.색과 배경

HTML 색(Color) 표현 이번 시간에는 HTML Style을 사용해서 색을 표현하는 방법을 알아보겠습니다. HTML에서 색을 표현하기 위해서 다음과 같은 3가지 방법이 있습니다. 색상의 이름으로 표현 RGB 색상값으로 표현 16진수를 이용한 표현 색상 이름을 사용해 표현하기 W3C에서 정의한 16가지의 HTML5 표준 색상이름은 다음과 같습니다. 그럼 위 표를 참고해서 만들어 보겠습니다. 색상: 파란색 색상: 브라운 색상: 초콜렛 색상: 아쿠아 RGB 색상값으로 표현 모니터나 스크린에서는 빨간색(Red),녹색(Green),파란색(Blue)를 혼합하여 색을 표현합니다. HTML에서도 위와 같이 세 가지 색을 가지고 색을 표현하기 위해 RGB 색상을 사용합니다. RGB 색상의 기본색은 각각 0부터 25..

[HTML] HTML - 10.스타일

HTML 스타일(Style) 이번 시간에는 HTML 스타일을 사용해 CSS스타일을 HTML요소에 설정하는 방법을 알아보도록 하겠습니다. HTML 요소의 style 속성(attribute)을 이용해 CSS 스타일을 HTML 요소에 직접 설정가능합니다. 하지만 이러한 style 요소를 사용하면 단 하나의 HTML 요소에만 스타일을 적용할 수 있습니다. 배경색 변경 다음 예제에서는 style 속성을 이용해 배경색을 변경 해보겠습니다. style 속성을 이용한 배경색 변경 글자색 변경 다음 예제는 style 속성을 이용해 글자색을 변경하는 방법입니다. style 속성을 이용한 글자색 변경 글자 크기 변경 다음 예제는 style 속성을 이용해 글자 크기를 변경하는 방법입니다. style 속성을 이용한 글자 크기 ..

[HTML] HTML - 9. 주석과 엔티티 그리고 문자셋

이번 시간에는 3가지 항목을 배워볼텐데 먼저 내가 짠 코딩에 대한 해석이 필요할 때 사용하는 주석(Comment) HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위한 문자셋 엔티티(Entity) 웹 브라우저가 HTML 문서를 정확하게 나타내기 위해 사용되는 문자셋(Character Set) 이 3가지의 항목은 한번 배워보도록 하겠습니다. 1. 주석(Comment) 주석(comment)란 개발자가 직접 작성한 해당 코드에 대해 다른 사용자가 보았을때 직접 해석이 가능할 수 있도록 설명이나 디버깅을 위해 작성하는 구문입니다. 주석은 다른 HTML 코드와는 달리 웹 브라우저 화면상에는 나타나지 않습니다. HTML에서 주석을 표현하려면 다음과 같습니다. HTML 주석의 시작 태그( ) 에는 느낌표가 없..

[HTML] HTML - 8.인용구

인용구(Quotation) HTML에서 인용구를 표현하기 위해서는 다음 2가지 방법으로 나뉩니다. 짧은 인용구(Short Quotation) 블록 인용구(Block Quotation) 1. 짧은 인용구 짧은 인용구는 태그(quotation)을 사용해 표현할 수 있으며, 자동으로 앞뒤에 큰따옴표가 붙습니다. HTML 정의는 웹 페이지를 만들고 그리기 위해 만들 하이퍼텍스트 마크업 언어 입니다. 2. 블록 인용구 블록 인용구는 길이가 긴 인용문을 태그(block quatation)을 사용해 표현합니다. 태그는 이러한 인용 부분을 별도의 단락으로 구분해 나타냅니다. Internet Service의 하나인 World-Wide-Web(WWW)을 통해 볼 수 있는 문서를 만들 때 사용하는 Programming La..

[HTML] HTML - 7.서식

서식(Formatting)\ HTML에서 텍스트(text)에 다양한 효과를 주는 여러 태그(tag)들을 제공합니다. 1.강조 효과 HTML 문서에 텍스트를 굵게 표시하고 싶다면 태그를 사용하거나 태그를 사용합니다. "볼드체 글씨 부분"은 글씨가 굵은 부분을 나타낸다 "strong 부분"은 중요한 부분을 굵게 표시 태그는 단순히 화면의 텍스트를 굵게 표시하는데 사용하고 태그는 텍스트 자체를 굵게 표현해줄 뿐만 아닌 그 내용이 중요하다는 의미와 함께 포함됩니다. HTML 문서에서 italic체를 표현하고 싶을 때에 태그(italic text)나 태그(emphasized text)를 사용합니다. "이탤릭체 글씨부분"은 단순히 글씨가 이탤릭체인 부분 "em 태그 부분"은 단순히 중요한 부분이라 이탤릭체로 표현 ..

[HTML] HTML - 5.제목 Title

1.제목(Heading) HTML에서 제목을 표현하기 위해서는 의 태그를 사용합니다. 크기가 가장 큰 부터 태그까지 다양한 크기로 페이지의 제목을 설정할 수 있습니다. 제목1 제목2 제목3 제목4 제목5 제목6 태그는 제목의 표현이라는 기능 외적으로도 중요한 역할을 담당하고 있습니다. 여러 검색엔진에서는 각 웹사이트의 내용을 바로 태그를 사용해 키워드를 수집하며 각각의 내용들을 파악하는 역할을 하고 있습니다. 따라서 HTML 문서에 포함되는 제목을 태그로 작성해야만 검색엔지에 의해 제대로 검색될 확률이 높습니다. 태그에는 항상 종료태그가 포함되어야 한다. 대부분의 웹 브라우저에서는 종료 태그를 포함하지 않아도 HTML 문서를 제대로 표현할 수 있습니다. 종료 태그를 포함해야하나? 그러나 종료 태그가 없다..