2022.12.06 Wep2일차 HTML,CSS

2022.12.06 Wep2일차 HTML,CSS

2022. 12. 6. 17:09ㆍWep

input태그
<input>태그는 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줌.

type : 태그모양을 다양하게 변경할 수 있음.
text(텍스트 입력박스 생성), radio(선택박스 생성 같은그룹중 택1가능),
checkbox(선택박스 생성 다중선택 가능), password(텍스트 입력박스 생성 외부로 텍스트가 안보임),
button(범용버튼), hidden(화면에 보이지않음 개발자 전용), submit(서버전송버튼), reset(리셋버튼)등이 있음

radio와 checkbox는 name가 중복될수있다.
radio와 checkbox는 name로 그룹을 나눈다.

button,submit,reset는 겉으로 보이는건 똑같다

name : 해당 type의 이름지정
readonly : 태그를 읽기전용으로 지정
maxlenght : 해당 태그 최대 글자 수를 지정
required : 해당 태그가 필수 태그로 지정됨. 필수 태그를 입력하지 않고 submit버튼을 누르면 에러메세지가 브라우저에 출력됨.(HTML5부터 추가)
autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동됨(HTML5부터 추가)
placeholder : 태그에 입력할 값에 대한 힌트를 줌. (HTML5부터 추가)
pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용함.(HTML5부터 추가)

상대경로 : 파일이름 앞에 경로가 붙지않는 경우 또는 ./가 붙어있는 경우(../는 윗폴더를 의미함)
이때는 호출하는 파일과 호출할려는 파일이 같은 폴더에 있어야 한다

절대경로 : 파일이름 앞에 전체경로가 붙는경우

예제) input태그 활용

<!DOCTYPE html>
<html>
  <head>
    <title>input실습</title>
  </head>
  <body>
    이름 : <input type="text" name="Myname" size="20" /><br />
    비밀번호 : <input type="password" name="My_password" size="20" /><br />
    <input
      type="text"
      name="Myname2"
      size="20"
      value="수정불가 테스트"
      readonly
    />
    <br />
    <h3>radio 인풋</h3>
    <br />
    <b>아침메뉴</b>
    <br />
    <input type="radio" name="food" value="치킨" checked />치킨
    <input type="radio" name="food" value="피자" />피자
    <input type="radio" name="food" value="짜장면" />짜장면
    <input type="radio" name="food" value="짬뽕" />짬뽕
    <br />
    <b>점심메뉴</b>
    <br />
    <input type="radio" name="food2" value="치킨" checked />치킨
    <input type="radio" name="food2" value="피자" />피자
    <input type="radio" name="food2" value="짜장면" />짜장면
    <input type="radio" name="food2" value="짬뽕" />짬뽕
    <br />
    <h3>ckeckbox</h3>
    <br />
    <input type="checkbox" name="computer" value="그래픽카드" />그래픽카드
    <input type="checkbox" name="computer" value="램" />램
    <input type="checkbox" name="computer" value="CPU" />CPU
    <input type="checkbox" name="computer" value="메인보드" />메인보드
    <br />
    <h3>select option</h3>
    <br />
    <table>
      <tr>
        <td colspan="2">
          <h2>가장 재미있는것을 고르세요</h2>
        </td>
      </tr>
      <tr>
        <td valign="top">
          <select name="items1">
            <option value="HTML">HTML</option>
            <option value="javaScript">javaScript</option>
            <option value="CSS">CSS</option>
          </select>
        </td>
      </tr>
      <tr>
        <td valign="top">
          <select name="itmes2" size="3">
            <option value="HTML">HTML</option>
            <option value="javaScript">javaScript</option>
            <option value="CSS">CSS</option>
          </select>
        </td>
      </tr>
    </table>
    <br />
    <br />
    <h3>button</h3>
    <input type="button" value="로그인화면" />
    <input type="submit" value="회원가입" />
    <input type="reset" value="다시입력" />
    <br />
    <br />
    <h3>이미지</h3>
    이미지:<input type="image" src="flower.jpg" />
    <br />
    <h3>File</h3>
    <br />
    파일명 : <input type="file" name="fileName" />
  </body>
</html>

출력

input실습 이름 :
비밀번호 :

radio 인풋

아침메뉴
치킨 피자 짜장면 짬뽕
점심메뉴
치킨 피자 짜장면 짬뽕

ckeckbox

그래픽카드 램 CPU 메인보드

select option

가장 재미있는것을 고르세요

button

이미지

이미지:

File

파일명 :

Form 관련 태그
<form> : 폼 만들기 폼 태그의 속성에서 사용자가 입력한 자료를 서버로 어떤방식으로 넘길 지와
어떤 프로그램을 이용해서 처리할지 지정함

method : 사용자가 입력한 내용을 서버로 어떻게 넘겨줄 것인지 지정
get - 주소 표시줄에 입력값이 그대로 드러남
post - 표준 입력으로 데이터를 전송. 입력길이에 제한이 없으며, 입력한 내용이 드러나지 않음

name : 한 문서 안에 여러개의 form이 있을경우를 위해 이름 지정
action : form 태그 안의 내용을 처리해줄 서버 프로그램 지정
target : action태그에서 지정한 스크립트 파일을 다른 창에서 열기.
accept-charset : 폼 전송에 사용할 문자 인코딩을 지정.(utf-8)

<form action="search.jsp" name="search info" method="post">
<input type="text" title="검색"/>
<input type="submit" value="검색"/>
</form>

GET방식, POST방식
서버에 특정 서비스 요청을 하기 위해서 클라이언트에 작성한 값을 넘기는 방식

GET방식 : 클라이언트 데이터를 URL뒤에 붙여서 보내는 방식(?key=value&key=value...)
보안에 취약, 길이제한이 있음(256byte),전송속도가 POST보다 빠름

POST방식 : URL에 노출하지 않고 데이터를 body에 포함시킴(URL에 노출되지 않아 기본 보안유지), 전송길이에 제한이 없음.
사용예)회원가입 시 사용자 입력값

예제)form태그 활용 회원가입창 만들기

<!DOCTYPE html>
<html>
  <head>
    <title>회원가입 테스트</title>
  </head>
  <body>
    <form action="1206.html" method="get" name="form1">
      <b>아이디</b> : <input type="text" name="userId" /><br />
      <b>비밀번호</b> : <input type="password" name="userPassword" /><br />
      <input type="hidden" name="addr" value="abc" />

      <h3>성별 선택</h3>
      <input type="radio" name="gender" value="남" checked />남자
      <input type="radio" name="gender" value="여" />여자
      <h3>좋아하는 음식</h3>
      <input type="radio" name="food" value="짜장면" checked />짜장면
      <input type="radio" name="food" value="짬뽕" />짬뽕
      <input type="radio" name="food" value="치킨" />치킨
      <input type="radio" name="food" value="피자" />피자
      <input type="radio" name="food" value="육회" />육회
      <br />
      <h3>취미</h3>
      <input type="checkbox" name="hobby" value="게임" />게임
      <input type="checkbox" name="hobby" value="독서" />독서
      <input type="checkbox" name="hobby" value="축구" />축구
      <input type="checkbox" name="hobby" value="산책" />산책
      <input type="checkbox" name="hobby" value="여행" />여행
      <br />
      <b>프로그램 언어 : </b>
      <select name="pg" multiple="multiple">
        <option value="java">java</option>
        <option value="html">html</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>
      </select>
      <br />
      <b>자기소개 : </b>
      <textarea name="info" rows="7" cols="30">
자기소개를 간단히 입력하세요</textarea
      >
      <br />
      <input type="submit" value="회원가입" />
      <input type="reset" value="다시입력" />

      <table></table>
    </form>
  </body>
</html>

출력

회원가입 테스트

CSS란
HTML이 정보를 표현한다면 CSS는 HTML을 시각적으로 꾸며주는 역할(정보와 디자인을 분리)
특정태그를 선택하여, 해당태그의 속성을 변경하는 목적으로 사용 됨.

.in line 방식
html과 같이 기술하여 사용하는 방식
유지보수가 힘들다

.style tag방식
style태그에 기술하는 방식
in line방식에 비해 유지보수가 편리하다

.외부파일 방식
CSS를 별도의 파일로 분리해서 링크하는 방식
문법적으로는 style tag와 동일
파일의 교체로 디자인을 변경할 수 있다는 점에서 유지보수가 편리

레이아웃 구성태그 -div,span
Div : 블럭요소를 가지고있음, 줄바꿈이 발생
Span : '' , 줄바꿈이 발생되지않음

.HTML 요소 지원되는 속성

속성      :       설명

calss : 요소의 클래스이름
id : 요소의 아이디
style : 요소에 대한 인라인
title : 요소에 대한 추가정보, 툴 팁으로 표시됨

선택자(seletor)란 효과가 적용될 태그를 지정

h1 { color:blue; font-size:12px;}
--
△
선택자

ID선택자
id속성은 전체 문서에서 하나의 태그를 식별하기 위해서만 사용됨
우선순위가 가장 높음
css 선택자에서는 #을 사용해서 id임을 표시
예)

<style>
#div1 {
        color: red;
        font-size: 45px;
      }
</style>

<div id="div1">11111</div>

예제)CSS in line, style tag, 외부파일방식,선택자 활용

HTML 구역

<!DOCTYPE html>
<html>
  <head>
    <title>레이아웃 실습</title>
    <style>
      h2 {
        font-size: 30px;
        color: pink;
      }
      #div1 {
        color: rebeccapurple;
        font-size: 45px;
      }
      #div2 {
        color: gold;
        font-size: 35px;
      }
    </style>
    <!-- style tag방식-->
    <link type="text/css" href="./CSS/style.css" rel="stylesheet" />
    <!-- 외부파일 방식-->
  </head>
  <body>
    <p>block</p>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
    <div id="div1">ID 선택자 활용(div)</div>
    <div id="div2">ID 선택자 활용2(div)</div>
    <div>33333(div)</div>
    <div>44444(div)</div>
    <div>55555(div)</div>
    <span>item1(span)</span>
    <span>item2(span)</span>
    <span>item3(span)</span>
    <span>item4(span)</span>
    <span>item5(span)</span>
    <br />
    <h3 style="color: blue">in line 방식 CSS란?</h3>

    <p>웹프로그래밍의 준비단계</p>
    <p>누구나 프로그래밍을 할 수 있음</p>

    <br />
    <h2>style tag 방식 CSS란?</h2>

    <p>웹프로그래밍의 준비단계</p>
    <p>누구나 프로그래밍을 할 수 있음</p>

    <br />
    <h1>외부파일 방식 CSS란?</h1>
    <!--style tag 방식 -->
    <p>웹프로그래밍의 준비단계</p>
    <p>누구나 프로그래밍을 할 수 있음</p>
  </body>
</html>

CSS구역

h1 {
  font-size: 50px;
  color: blueviolet;
}

출력

'Wep' 카테고리의 다른 글

2022.12.14 Wep 6일차 JS(JS기초) (0)	2022.12.14
2022.12.09 Wep5일차 HTML(text속성 선택자),CSS(box-shadow) (0)	2022.12.09
2022.12.08 Wep4일차 HTML,CSS(input 추가요소) (1)	2022.12.08
2022.12.07 Wep3일차 HTML,CSS (0)	2022.12.07
2022.12.05 Wep1일차 비주얼 스튜디오 코드 설치,HTML (1)	2022.12.05

코딩일기

코딩일기

태그

최근글

댓글

공지사항

아카이브

radio 인풋

ckeckbox

select option

가장 재미있는것을 고르세요

button

이미지

File

성별 선택

좋아하는 음식

취미

'Wep' 카테고리의 다른 글

관련글

티스토리툴바