본문 바로가기
HTML

23.02.08 (table2, frame, form-input, 회원가입)

by 2023코딩시작 2023. 2. 8.

😀테이블 다른버전 시험

😀메이플 로그인화면 만들어봐야지

 

<div></div>

==> 문단 묶어줘서 한꺼번에 정렬같은거 할 때 사용

 

<!-- 
table 태그에서 행 또는 열을 병합하는 방법
- rowspan 속성 : 테이블에서 행을 병합하는 속성
- colspan 속성 : 테이블에서 열을 병합하는 속성
형식) rowspan="병합할 행의 수", colspan="병합할 열의 수"
 -->

 

<table border="1" cellsapacing="0">
	<tr>
    	<td colspan="4">4열 병합</td>
        		&middot;
                    &middot;
                    &middot;
    <tr>    
        <td rowspan="2">2행 병합</td>

 

<!-- 
iframe(inline frame) 태그
==> 내부 프레임 이라는 의미로 하나의 HTML 문서 내부에 
다른 HTML 문서를 보여주고자 할 때 사용하는 태그

iframe 태그 속성
- src : iframe 태그에 삽입될 문서의 주소
- width : iframe 태그의 너비 지정(px 또는 %)
- height : iframe 태그의 높이 지정(px 또는 %)
- scrolling : iframe 태그에 스크롤바 설치 유무 지정
==> yes(스크롤바 설치), no(스크롤바 사용 안함)
auto(자동)
- frameborder : iframe 태그의 테두리를 표시할지 여부 설정
==> 1(테두리가 있음), 0(테두리가 없음)
 -->

<ifram src="Ex10.html" scrolling="auto" width="70%" height="600" frameborder="1">

@scrolling은 auto가 dafault / frameborder는 default가 1인듯함

 

<!-- 
frameset 태그  
- 여러개의 HTML 문서를 동시에 한 화면에 나타나게 할 수 있는 태그
주의) 반드시 body 태그 밖에서 설정을 해야 함.

frameset 태그의 속성
- cols : 수직으로 나누고자 하는 프레임의 크기를 
           픽셀이나 비율(%)을 이요하여 순저대로 지정함
- rows : 수평으로 나누고자 하는 프레임의 크기를 
                    픽셀이나 비율(%)을 이요하여 순저대로 지정함
- frameborder : 프레임을 나눈 경계선의 두께를 지정하는데,
"0" 으로 설정하면 경계선이 안 보임

frame 태그 속성
- src : 해당 프레임에서 보여줄 문서의 경로와 파일의 이름을 지정
- name : 해당 프레임의 이름을 지정할 때 사용하는데,
  주로 링크 연결 시 target의 대상이 됨
- scrolling : 프레임에 스크롤바가 보여지게 할 지  여부를 설정 
==> yes(스크롤바 설치), no(스크롤바 사용 안함)
auto(자동)
 -->
</head>

<frameset cols="30%, *">

    <frame src="Ex10.html">

    <frameset rows="30%, *">

        <frame src="Ex14.html">

        <frame src="https://damu.net">

    </frameset>

</frameset>

<body>

 

<!-- 
★★★★★★★★★★★★★★★★★★★★★★★★
form 태그
==> 사용자에게 입력을 받을 데이터 양식을 설정하는 태그.

* input 태그 속성
  - autocomplate : 사용자가 이전에 입력한 값으로 자동완성기능을 사용할 것인지 여부 설정.
                   ==> on(default) or off
  - autofocus : 페이지가 로드될 때 자동으로 포커스를 이동할지 여부 지정.
  - checked : 양식이 선택되었음을 표시할지 여부 지정.
              ==> type 속성 값이 radio, checkbox인 경우만 사용 가능.
  - disabled : 양식을 비활성화할지 여부 지정.
  - max : 지정 가능한 최대값 설정.
          ==> type 속성 값이 number인 경우만 사용 가능.
              min 속성 보다 큰 값만 허용.
  - min : 지정 가능한 최소값 설정.
          ==> type 속성 값이 number인 경우만 사용 가능.
             max 속성 보다 작은 값만 허용.
  - maxlength : 입력 가능한 최대 문자 수 지정.
                ==> type 속성 값이 text, email, password, tel, url인 경우만 허용.
  - multiple : 둘 이상의 값을 입력할 수 있는지 여부 지정.
               ==> type 속성 값이 email, file인 경우면 허용 가능.
                   email인 경우에는 ,(콤마)로 구분.
  - name : 양식의 이름을 지정.
  - placeholder : 사용자가 입력할 값의 힌트 지정.
                  ==> type 속성 값이 text, search, tel, url, email인 경우만 허용.
  - readonly : 수정 불가능한 읽기 전용 지정.
  - step : 유효한 증감 숫자 간격의 지정.
           ==> type 속성 값이 number, range인 경우만 허용.
  - src : 이미지의 url 지정.
          ==> type 속성 값이 image인 경우만 허용.
  - alt : 이미지 대체 텍스트 지정.
     ==> type 속성 값이 image인 경우만 허용.
  - type : 입력 받은 데이터의 종류 지정.
           ==> 하단에 type에 대한 내용 기재.
  - value : 양식의 초기값 지정.
  
  
* 데이터의 종류(type)의 값(value)
  - button : 일반 버튼.
             ==> onClick 속성을 이용하여 자바스크립트 함수를 호출할 때 사용함.
  - checkbox : 체크 박스.
               ==> 여러 개 동시에 선택, 비선택 가능.
                    배열로 값이 전달이 됨.
  - color : 색상 선택. ==> IE 지원 불가
  - date : 날짜 선택. ==> IE 지원 불가
  - email : 이메일 선택.
  - file : 파일 선택.
  - hidden : 보이지 않지만 전송할 양식 설정.
             ==> 양식에는 보이지 않지만 값이 전달될  때 같이 전달되는 양식.
  - image : 이미지 제출 버튼.
  - number : 숫자 선택 ==> IE 지원 불가
  - password : 비밀번호 입력 가능.
               ==> 입력된 내용이 안 보이는 형식.
  - radio : 라디오 버튼. 여러 개 중 하나만 선택됨.
  - range : 범위 컨트롤 지정.
            ==> max, min, step, value(기본값) 속성 사용 가능함.
  - reset : 초기화 하는 버튼.
            ==> 해당 form 범위 내의 모든 양식
                값이 초기화됨.
  - search : 검색 기능 제공.
  - submit : 제출 버튼 기능.
             ==> form 태그 속성 중 action 페이지로 해당 값들을 전송. 
  - tel : 전화번호 입력 가능.
  - text : 일반 텍스트 입력 가능.
  - url : 절대 url 입력 가능.
 -->

 

 

<input type="checkbox" name="hobby" value="운동">운동

<textarea rows="5" cols="30">안녕하세요 </textarea>

<input type="radio" name="gender" value="남자 checked>남

<input type="file">

<select>

	<option>선택하시오</option>

</select>

 

<ul>
<li>HTML5: 웹 문서의 구조(뼈대) 작성</li>
<li>CSS: 웹 문서의 디자인 기능 담당</li>
<li>JQuery: 웹 문서의 동적인 기능 담당(JavaScript의 최신버전)</li>
</ul>

 

<!-- 
용어를 정의하고 용어를 설명하는 태그 
- dl 태그 (data list)
- dl 태그 : 용어
- dd 태그 : 용어를 설명하는 태그
 -->
<dl>
	<dt>컴퓨터</dt>
	<dd>컴퓨터는 ~~이다.</dd>
    
    <dt></dt>
    <dd></dd>
</dl>

 

😀button을 사용할 때는  onclick이 같이 나와야 하며 해당 함수는 /title과 /head사이에  해당 함수에 대해 정의?해준다

</title>
<script type="text/javascript">

	function ongoing() {
    	alert("버튼을 입력하셨네요")
    }

</script>
</head>

<input type="button" onclick="ongoing()" value="클릭">

 

😀각종 타입 값 / fieldset태그 / audto,video태그

<input type="date">
<input type="time">
<input type="number" max="100" min="1"> 
<input type="ranger" max="100" min="1"> range보다는 number선호
<input type="week">
<input type="color">
<input type="email" required>
<input type="submit">


<fieldset>
	<legend>필드셋이름</legend>
    	글을 입력하시오
</fieldset>

<audio src="audio/calm.mp3" controls autoplay loop> </audio>
<video src="audio/cloud.mp4" poster="audio/rose.jpg" controls autoplay loop> </video>

 

<!-- 
시멘틱(sementic) 태그의 태그 종류

1. header 태그
   - 브라우저의 상단에 존재하는 태그.
   - 웹 문서의 머릿말에 해당이 됨.
   - 회사의 로고, 회원가입, 로그인을 할 수 있는 태그.

2. footer 태그
   - 브라우저의 하단에 존재하는 태그.
   - 일반적으로 저작권, 회사의 주소, 연락처, 약관 등에
     대한 정보를 나타내는 태그.

3. article 태그
   - 일반적으로 웹 문서의 본문에 해당하는 내용을 
     작성하는 태그.
   - 개별 기사를 지정할 때 사용함. 주로 특정 기사의 
     미리 보기, 썸네일, 제목, 본문을 지정할 때 사용함.

4. section 태그
   - 문서의 일반적인 영역을 설정하는 태그. article
     태그 사용이 가능함. 
   - 연관성이 있는 콘텐츠 여러 개를 그룹화 할 때 사용함.
     주로 연관된 기사 제목 여러 개를 해당 태그를 사용하여
     그룹으로 지정할 때 사용함.

5. aside 태그
   - 문서의 별도 영역 컨텐츠 영역. 보통 광고나 기타 링크
     등의 사이드 바를 설정하는 태그.
     
6. nav 태그
   - 다른 페이지 링크를 제공하는 태그.
   - 보통 메뉴(home, content 등등) 설정시 사용함.
 -->
저작자표시 (새창열림)

'HTML' 카테고리의 다른 글

23.02.07 (제어문자, 태그, 속성, 테이블)  (0) 2023.02.07
23.02.06 (HTML 기초)  (0) 2023.02.06

관련글

댓글

티스토리툴바