컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

옵션 선택하기 기존 폼 요소들은 을 이용해 한 줄짜리 폼만 이용했다. 그러나 태그를 사용하면 다양한 항목 중에 옵션을 선택하는 폼 요소를 생성할 수 있다. ,, 태그 안에서 태그를 쓰면 다양한 요소를 선택할 수 있는 옵션을 사용할 수 있다. 그리고 은 로 묶어서 그룹을 만들어줄 수 있다. 학과 선택 건축공학과 기계공학과 컴퓨터공학과 사학과 어문학부 철학 이외에도 옵션으로 선택 가능한 태그가 있다. 태그를 이용하면 태그의 텍스트가 들어갈 항목에 옵션으로 대신 넣을 수 있는 텍스트를 지정할 수 있다. 학과 선택 건축공학과 기계공학과 컴퓨터공학과 사학과 어문학부 철학 태그를 이용하면 여러 줄 입력하는 텍스트 영역을 만들 수 있다. 태그 내에 cols와 row를 이용해서 텍스트 영역의 가로 너비와 세로 줄 단위..

태그 - 사용자의 입력값을 받는 태그 태그는 사용자의 입력을 받는 아주 중요한 태그다. 를 이용하면 로그인, 이메일 외에 체크박스 등으로 고객 입력 자료를 다양한 경로로 입력 받을 수 있다. 태그들의 type속성 태그들을 잘 써주려면 type속성을 잘 지정해주어야 한다. 태그들의 다양한 속성 태그는 모양뿐 아니라 다양한 속성을 가졌다. 그 외엔 다음 속성을 가졌다. 속성 설명 formaction 실행할 프로그램을 연결. 'type'가 'submit' 또는 'image'일 때만 사용 가능. formenctype 서버로 폼을 전송했을 때 폼 데이터를 어떤 식으로 해석할 것인지 지정. 'type'가 'submit' 또는 'image'일 때만 사용 가능. formmethod 서버로 폼을 저장하는 방식(get, ..

폼이란? 아이디와 비밀번호를 입력하거나 하는 등 사용자가 웹사이트로 정보를 보낼 수 있는 요소들을 폼이라고 한다. 폼과 관련된 대부분 작업은 정보 저장, 검색, 수정인데 이는 데이터 베이스를 기반으로 한다. 따라서 텍스트 상자, 버튼 같은 폼의 형태를 만드는 것은 HTML 태그를 이용한다. 그리고 사용자 정보를 처리하는 것은 ASP, PHP, JSP같은 서버 프로그래밍을 이용한다. 태그 이용하기 태그는 폼을 만드는 가장 기본적인 태그다. 폼을 통해 사용자가 입력한 자료를 서버로 어떤 방식으로 넘길 것인지, 어떤 프로그램을 이용해 서버에서 처리할 것인지 지정할 수 있다. 폼 태그는 다음과 같은 속성을 갖는다. 속성 설명 method 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다. ..

링크 만들기 링크 HTML에서 문서 간 이동할 수 있는 링크를 만들기 위해선 태그를 이용하면 된다. 링크에 속성값 주기 링크 링크 링크 링크 링크 에 'target' 속성을 부여할 수 있다. _blank 링크 내용이 새 창이나 새 탭에서 열림 _self target 속성의 기본 값으로 링크가 있는 화면에서 열림 _parent 프레임을 사용했을 때 내용을 부모 프레임에 표시 _top 프레임을 사용시 프레임에서 벗어나 링크 내용을 전체에 표시 추가적으로 태그의 'href' 속성의 값으로 페이지 주소만 들어가는 것이 아니다. 예를 들어 값으로 해당 웹페이지 내 아이디 값 등을 속성값으로 준다면 해당 링크를 눌렀을 때 그 아이디를 속성값으로 가지는 웹페이지 위치로 이동한다. 실제 예를 들면 홈페이지 같은데서 위..

이미지 표현하기 HTML 문서에서 이미지를 표현하기 위해선 태그를 써주면 된다. 이미지 크기 조절하기 이미지를 조절하기 위해서는 태그 안에 'width', 'height' 속성을 넣고 조절값을 입력해주면 된다. 이미지 대체하는 텍스트 이미지가 오류나서 뜨지 않거나 어떤 이미지에 설명 내부적으로 넣고 싶을 땐 'alt' 값을 속성으로 주면된다. 'alt'를 속성으로 주고 원하는 내용을 입력해주면 된다. 이미지에 설명 글 붙이기 이미지에 대한 설명 alt와 다르게 html 화면 상에 나타나는 그림의 설명을 붙이고 싶을 땐 와 태그를 쓴다. 태그를 써서 이미지와 이미지에 대한 설명이 있는 을 그 안에 같이 넣어주면 된다.

과 일반적으로 테이블을 만드는 태그를 쓸 때 을 써주게 되면서 가로줄인 행을 기준으로 테이블의 구조를 짜게 된다. 그렇다보니 스타일을 지정할 때 열(column)만 따로 묶어서 표현하기 힘든 점이 있다. 그래서 생긴 것이 과 이다. 과 의 적용 구분 빨강 배경 파랑 배경 녹색 배경 구분2 빨강 배경 파랑 배경 녹색 배경 위와 같은 테이블을 만든다고 상상해보자. 구분 빨강 글씨 파랑 글씨 녹색 글씨 구분2 빨강 글씨 파랑 글씨 녹색 글씨 세로 줄 단위로 스타일을 적용하고 싶다면 우선 태그를 태그 안(과 사이)에 넣어준다. 구분 빨강 글씨 파랑 글씨 녹색 글씨 구분2 빨강 글씨 파랑 글씨 녹색 글씨 그리고 세로 줄의 의미하는 태그 4개를 안에 넣어준다. 한 개의 태그는 테이블에서 1개의 열을 의미한다. 이제..

테이블 구조 정의하기 테이블 구조를 사용하다보면 합계나 요약 내용을 표시하게 된다. 이런 테이블의 경우 제목부분과 본문, 요약 부분은 구조적으로 나누는 것이 관리가 편하다. 이렇게 나눌 경우 CSS를 적용하기도 용이하고 관리적인 측면에서도 한 눈에 테이블을 볼 수 있다. 구분 학교 수 학생 수 교원 수 초등학교 17 12,800 70 중학교 15 11,400 100 고등학교 16 13,700 100 합계 48 37,100 270 위와 같은 표는 아래와 같이 코드를 작성해서 만들어줄 수 있다. 구분 학교수 학생수 교원수 초등학교 17 12,000 70 중학교 15 11,400 100 고등학교 16 13,700 100 합계 48 37,100 270 태그 위 표를 기준으로 보면 첫 행 [구분, 학교수, 학생수..

colspan과 rowspan 테이블을 이용하다보면 가끔 테이블 셀을 합칠 일이 생긴다. 그럴 때면 과 으로 나눠진다. 은 세로줄을 나타내고, 은 가로줄을 나타낸다. 하지만 span에서 은 가로 방향으로 셀을 합쳐주고 은 세로 방향으로 셀을 합친다. 과 모두 전체 테이블 칸수보다 더 많은 칸을 쓸 수 없다. 예를 들어 테이블 가로 세로 3칸짜리 테이블에서 과 에게는 3까지 줄 수 있다. 그 이상의 숫자는 주어져도 동작을 하지 않는다. 태그 - 가로방향 셀 병합 대형 마트 목록 이마트 롯데마트 홈플러스 대형마트 목록 이마트 롯데마트 홈플러스 태그를 쓰면 가로 방향으로 셀을 병합할 수 있다. 이때 의 최대 범위는 3이다. 태그 - 세로 방향 셀 병합 마트 목록 이마트 롯데마트 홈플러스 빅마트 이마트 트레이더..