🌐HTML5 기본2🌐

Kim-yujin·2022년 5월 15일

웹사이트제작

목록 보기

2/10

테이블 태그 기본

tr : 표 내부의 행 태그
th : 행 내부의 제목 셀 태그
td : 행 내부의 일반 셀 태그
border : 표의 테두리 두께를 지정(테이블 태그의 속성)
rowspan : 셀의 높이 지정
colspan : 셀의 너비 지정

<body>
	<table border = "1">
    	<tr>
        	<th>Header1</th>
            <th>Header2</th>
        </tr>
        <tr>
        	<td>Data 1</td>
            <td>Data 2</td>
        </tr>
     <table>
<body>

img 태그

src : 이미지 경로 지정
alt : 이미지가 없을 때 나오는 글자 지정
width : 이미지의 너비 지정
heigth : 이미지의 높이 지정

입력 양식 태그

form 태그의 속성

<body>
	<form>
    	<input type = "text" name = "search" />
        <input type = "submit" />
    </form>
</body>

action : 입력 데이터의 전달 위치 지정
method : 입력 데이터의 전달 방식을 선택

input 태그

사용자에게 정보를 입력받는 기능을 수행하는 태그

input 태그의 속성
button : 버튼을 생성
checkbox : 체크박스를 생성
file : 파일 입력 양식을 생성
hidden : 보이지 않습니다.
image : 이미지 형태 생성
password : 비밀번호 입력 양식을 생성
radio : 라디오 버튼 생성
reset : 초기화 버튼 생성
submit : 제출 버튼 생성
text : 글자 입력 양식 생성

입력 양식의 type 속성값

color : 색상 선택 양식을 생성
date : 일 선택 양식을 생성
datetime : 날짜 선택 양식을 생성
datetime-local : 지역 날짜 선택 양식을 생성
email : 이메일 입력 양식을 생성
month : 월 선택 양식을 생성
number : 숫자 생성 양식을 생성
range : 범위 선택 양식을 생성
seach : 검색어 입력 양식을 생성
tel : 전화번호 입력 양식을 생성
time : 시간 선택 양식을 생성
url : URL 주소 입력 양식을 생성
week : 주 선택 양식을 생성

textarea 태그

<body>
	<form>
    	<textarea></textarea>
    </form>
</body>

textarea 태그의 속성

clos : 태그의 너비를 지정
rows : 태그의 높이를 지정

select 태그

여러 개의 목록에서 몇 가지를 선택할 수 있는 입력 양식

select : 선택 양식을 생성
optgroup : 옵션을 그룹화
option : 옵션을 생성

<body>
	<select multiple = "multiple"> //여러 개 선택하고  싶을 시 
    	<option>김밥</option>
        <option>떡볶이</option>
        <option>순대</option>
        <option>오뎅</option>
    </select>
</body>

fieldset 태그와 legend태그

<body>
	<form>
    	<fieldset>
        	<lengend>입력양식</legend>
            <table>
            	<tr>
                	<td><label for ="name">이름</label></td>
                    <td><input id ="name" type = "text" /></td>
                </tr>
                <tr>
                	<td><label for ="mail">이메일</label></td>
                    <td><input id ="mail" type = "email" /></td>
                </tr>
             </table>
             <input type ="submit" />
        </fieldset>
    </form>
</body>

공간 분활 태그

div : block 형식으로 공간을 분환
span : inline 형식으로 공간을 분활

HTML5 시멘틱 구조 태그

header : 헤더를 의미
nav : 내비게이션을 의미
aside : 사이드에 위치하는 공간을 의미
section : 여러 중심 내용을 감싸는 공간을 의미
article : 글자가 많이 들어가는 부분을 의미
footer : 푸터를 의미

Kim-yujin

🐰노력하며 살아가기🐰

이전 포스트

🌐HTML5 기본🌐

다음 포스트