Frontend/HTML & CSS
HTML, CSS 2일차 - 기본태그2
Jenny_yoon
2022. 12. 6. 10:00
728x90
반응형
HTML 2.0
<table border="1" cellpadding="0" cellspacing="0"
width="300" height="120"
align="center">
<!-- table 태그에 표 전체 크기 넣을 수도 있음 -->
<!-- align : left, center, right
table태그에 적용시 body기준으로 정렬하게 됨. -->
<tr align="center" bgcolor="skyblue">
<td>1</td>
<td >2</td>
</tr>
<tr align="center">
<td valign="top">5</td>
<!-- valign(세로정렬) : top, middle, bottom -->
<td>
<a href="http://naver.com" target="_blank">
<!-- target : 페이지 이동시 출력형태 설정
_self : 현재페이지에서 이동, _blank : 새창으로 열기, (둘중 어떤건 쓰느냐에 따라 트래픽이 달라짐)
_top -->
<img src="./고양이.jpeg" width="100" height="40"></a>
</td>
<!-- 테이블 내 이미지 삽입 가능, 크기조절 가능, 링크삽입 가능 -->
</tr>HTML 3.0
<input type="text"><br>
<!-- input : 사용자가 키보드/마우스/터치/스왑등 다양하게 정보를
적용하는 태그
text : 기본입력값 -->
<input type="password"><br>
<!-- 디스크!!! 특수문자를 이용한 암호화 -->
<input type="checkbox"><br>
<!-- checkbox : 1개이상 체크가능 -->
<input type="radio"><br>
<!-- radio : 여러개 옵션 중 1개만 선택가능 -->
<input type="button" value="login"><br>
<!-- button : 각종 이벤트를 적용할때 사용 -->
<select>
<option> 통신사 선택</option>
<option> SKT</option>
<option> KT</option>
<option> LGT</option>
<option> 알뜰폰</option>
<!--
select :(상위태그)리스트 중에서 사용자가 한가지 선택 (하위태그 option말고는 사용불가)
option :(하위태그)리스트 보기를제작할때 사용 -->
</select>
<textarea cols="100" rows="5">
[이용약관]
서비스 이용시..
</textarea>
<!--
textarea: 여러개의 문자를 입력 받을 때 사용되는 태그
cols: 한줄에 입력되는 문자수
rows: 최초 보여지는 줄 수
-->
SMS수신여부 :
<input type="radio" name="a">동의함
<input type="radio" name="a">동의안함
<!--
radio : gruop형태로 이루어져있음. name이라는 속성이 필수!
a라는 그룹안에서 1개만 채크하게 됨.
그룹명은 무조건 백엔드한테 물어보고 뭘로할지 정해야함!
그룹명엔 숫자가 먼저 들어가면 안됨. 무조건 문자가 먼저! b1(o), 1b(x)
-->
<ul> <!-- ul : 상위태그, 디스트모양 목록 리스트 태그. 무조건 li태그랑 같이씀. -->
<li>공지사항 관리자 등록현황이 업데이트</li> <!-- li : 하위태그 -->
<li>결제 시스템 업데이트로 잠시 중단 됩니다.</li>
</ul>
<ol> <!-- ol :숫자리스트 태그. 역순은 안됨.-->
<li>공지사항 관리자 등록현황이 업데이트</li>
<li>결제 시스템 업데이트로 잠시 중단 됩니다.</li>
</ol>+ CSS 1.0
<input type="button" value="로그인" style="
width:100px;
height:50px;
background-color:black;
color:white;
">
<!-- style: css1.0을 선언하는 속성명.
background-color: 배경색상
color: 글자색상
-->
<input type="checkbox" style="
width:50px;
height:50px;
">
<!-- 마우스로 입력하는건(버튼, checkbox 등) background-color속성 못씀.
키보드로 입력하는건 다 가능. -->
<textarea style="width:800px; height:400px;"></textarea>
<!--
textara: 입력한 엔터/공백도 다 출력됨. 사이에 넣은 주석도 출력됨.
style적용시 해당 크기만큼 적용됨
-->
<input type="text" style="width:300px; height:40px;
border:0; border-bottom:1px solid black;
/*
border: 외곽선
border-top, border-left, border-right, border-bottom
: 두께, 외곽선종류, 색상(style은 순서가 중요, html은 순서상관없음-table태그에 넣을때 등))
solid : 외줄
dashed :절취선
dotted : 점선
*/ ">form태그(html)
<script>
function abc(){
f.submit();
}
function bbbs(){
location.href="http://naver.com";
}
</script>
<body>
<form name="f" method="get" action="./index7.html">
<input type="text" name="aaa"><br>
<input type="password" name="bbb"><br>
<!-- <input type="button" value="검색" onclick="abc()"> -->
<input type="submit" value="검색">
<input type="button" value="로그인" onclick="bbbs()">
<input type="reset" value="초기화">
</form>
<!--
method와 action은 form전용(에서만 사용가능)
method: 전송방식 속성
action: 이동할 url
method 종류 : post, get
get 전송시: url에 해당 정보가 노출되면서 전송됨(아디/비번 입력창을 절대 get으로 만들면안됨)
post 전송시: 암호화된 데이터를 이용하여 해당 url로 전송
-->
<!--
form: 데이터를 전송할 때 사용하면 HTML태그. 유일한 통신 태그.
input type(submit): 무조건 form안에 있어야 정상 작동함.
form은 form문 안에서 한번만 써야함. 밖에서는 여러번 더 생성해도됨.
submit: js/속성 필요없다->onclick속성 절대 쓰지 않기!, 한form에 한번만 쓸수있음.
reset: 한 form에 한번만 쓸수있음. onclick속성 절대 쓰지 않기!
-->
</body>border:0; /* 외곽선 없애기 */
</form> <!-- form의 가장 상위태그는 body -->728x90
반응형