각진 세상에 둥근 춤을 추자

autofocus - 입력 커서 표시 placeholder - 힌트 표시 readonly - 읽기 전용 필드 readonly 속성으로 지정되면 해당 필드의 내용은 새로 입력할 수 없고 삭제할 수도 없다.

태그 - 입력 항목 만들기 사용자가 내용을 입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분이다. 이런 부분을 만들 때 사용하는 태그가 태그이다. 태그에서 사용하는 타입은 다음과 같다. "text" 텍스트 필드 텍스트 필드는 한 줄짜리 일반 텍스트를 입력하는 필드이다. 폼에서 가장 많이 사용하는 요소로 주로 아이디, 이름, 주소 등 텍스트를 입력할 때 사용한다. 텍스트 필드에서 사용하는 속성은 다음과 같다. "password" - 비밀번호 입력란 패스워드 필드는 텍스트 필드와 같지만 사용자가 입력하는 내용이 화면에 표시되지 않는다. (예제) 로그인 폼 만들기 아이디: 비밀번호: "search" - 검색 상자 "url" - url 입력란 "email" - 이메일 주소 입력란 "tel" - 전화번호 입..

웹 폼은 특정 항목에 사용자가 뭔가를 입력하는 형태이다. 익숙하게 사용하는 로그인 창도 웹 폼을 이용한 대표적인 사례이다. 태그 - 폼 만들기 태그는 폼을 만드는 가장 기본적인 태그로 태그와 태그 사이에 여러 폼 요소와 관련된 태그를 넣는다. 여러 폼 요소 속성 설명 method 사용자가 입력한 내용을 서버 프로그램에 어떻게 넘길지 지정한다. 속성 값 get 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. post 사용자의 입력을 표준 입력으로 넘겨 입력 내용 길이에 제한을 받지 않고 입력한 내용이 드러나지 않는다. name 폼의 이름을 지정한다. action 태그 안의 내용을 처리할 서버 상의 프로그램을 지정한다. target 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록..

아이프레임은 프레임의 일종으로 프레임 중에서 문서 본문에 액자처럼 삽입하는 것을 말한다. 을 이용해 현재 문서에 다른 문서를 포함시키거나, 자바스크립트를 이용해 팝업 창을 열도록 했을 때 현재 문서는 부모 문서가 되고, 으로 삽입된 문서와 팝업 문서는 자식 문서가 된다. 예제를 통해 아이프레임과 target에 대해 이해해 본다. parent.html 문서 안에 태그를 이용해 child.html 문서를 삽입한 후 홈페이지를 링크한다. 이때, "target=" _top"으로 지정하면 프레임을 벗어나 브라우저 창 전체에 링크 내용이 표시된다. 먼저 parent.html 문서를 작성한다. Parent 그리고 삽입할 child.html 문서를 작성한다. Child 네이버 웹툰 보기(전체 화면)

'링크'는 웹 문서가 다른 문서와 구별되는 가장 큰 특징이다. 클릭만 하면 연결된 곳으로 즉시 이동해 웹 사용을 더욱 편리하게 해 준다. 텍스트를 클릭해 해당 페이지로 넘어갈 수 있고 이미지에 링크를 걸 수도 있으며, 열고 있는 브라우저에 해당 페이지로 이동하지 않고 새 창을 띄워 보여 줄 수 있다. (1) 태그, href 속성 - 링크 만들기 링크를 만드는 태그는 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 된다. 텍스트 태그 안에서 사용할 수 있는 주요 속성은 다음과 같다. 속성 설명 href 링크한 문서나 사이트의 주소를 입력한다. target 링크한 내용이 표시된 위치(현재 창 또는 새 창)을 지정한다. download 링크한 내용을 보여 주는 것이 아니라 다운..

HTML 태그 중 자주 쓰는 태그 중 하나가 바로 이미지 관련 태그다. 사진과 그림 등의 이미지를 웹 문서에 넣을 수 있는데 몇 가지 파일 형식만을 사용할 수 있다. 만약 다른 형식으로 된 이미지 파일을 웹에서 사용한다면 다음과 같은 파일 형식으로 변환해야 한다. GIF (Graphic Interchange Form) JPG/JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) (1) 태그 - 이미지 삽입하기 - src 속성: 이미지 파일 경로 지정하기 - alt 속성: 이미지를 설명해 주는 대체 텍스트 - width, height 속성 - 이미지 크기 조정하기 예제를 통해 태그를 이해해 본다. 짱구 위 예제를 보면 src 태그를..

웹 문서에서 자료를 정리할 때 자주 사용하는 요소가 ‘표(table)’이다. 표는 행(row)과 열(column)로 이루어져 있고, 행과 열이 만나 이루는 영역을 셀(cell)이라고 부른다. (1) , , , 태그 - 기본적인 표 만들기 제목 셀 내용 내용 ... ... 예제를 통해 , , , 태그를 이해해 본다. 제목 셀 1행 2열 1행 3열 제목 셀 2행 2열 2행 3열 여기서 table border을 추가하면 표 테두리를 만들 수 있다. →

목록을 이용해 이미지나 텍스트 어떤 것이든 목록화하여 정리할 수 있고 CSS를 적용해 메뉴나 본문 내용 등에서 다양하게 활용할 수 있다. (1) 태그, 태그 - 순서 없는 목록 만들기 순서가 필요하지 않은 목록 (unorderered list)을 만들 때는 태그를 사용하고 태그(list item)을 사용해 각 항목을 표시한다. 내용 내용 ... 예제를 통해 , 태그를 이해해 본다. 관광 안내 전화 한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행 편의를 위해 관광안내전화 1330 서비스를 연중무휴 실시하고 있습니다. 1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할 수 있을 정도의 다양한 정보가 있습니다. 원하는 관광지는 물론이며 숙박, 교통, 음식점 등의 자세한 정보를 한국..

(1) 태그 - 제목 표시하기 제목태그 Hello, 안녕 Hello, 안녕 Hello, 안녕 Hello, 안녕 Hello, 안녕 Hello, 안녕 (2) 태그 - 단락 만들기 태그는 paragraph의 줄임말로, 텍스트 단락을 만드는데, 이때 ‘단락’이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말한다. (3) 태그 - 줄 바꾸기 태그는 break의 줄임말이며 닫는 태그가 없다. 웹 브라우저 창에서 줄바꿈을 하려면 줄을 바꿀 위치에 태그를 사용한다. 문단태그 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 남산 위에 저 소나무 철갑을 두른 듯 바람 서리 불변함은 우리 기상일세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 가..

파일 생성 (1) 개인 PC 작업 폴더에 HTML 파일을 생성한다. (2) 다운로드 받은 Visual Studio Code를 실행 후, EXPLORER 영역에 HTML 파일을 끌어다 놓는다. (3) New Folder 아이콘을 클릭하여 새로운 폴더를 생성한다. (ex. Ch01) (4) New File 아이콘을 클릭하여 방금 생성한 폴더의 하위 파일을 생성한다. (💡 이때 확장자명은 .html 로 작성한다. ) (ex. Hello.html) (5) ! 입력 - 키보드 enter : 기본 양식을 불러올 수 있다. 여기서, Document의 Document 자리에는 원하는 파일의 제목을 입력한다. 기본 구조 HTML 문서는 일반 문서와 달리 정해진 형식이 주어진다. 현재 언어가 HTML 언어로 작성된 웹 문..