티스토리 뷰

카테고리 없음

KH아카데미 - 국비지원 '자바개발자 양성과정' : CSS, HTML

HSP 2024. 11. 19. 22:08

<body>
1.전송 <form action="url" method="get(조회)"> action목적지, method보내는 방식
(폼,인풋) ID <input type="text" name="userId">
PW<input type="password" name="userPw">입력값 name속성값과 짝

<input type="submit" value="로그인">

2.액션, 메소드, 네임 <form action="url" method="post(부여)"> 입력값 이하 안보임

3.초기화 <input type="reset">
ㅁ <input type="checkbox">짜장면 checked입력하면 기본값
ㅇ <input type="radio" name="gender">남 name값 제시해야 함**

버튼 <input type="button" value="버튼">
파일 <input type="file">

날짜 <input type="date">
시간 <input type="time">
날짜시간 <input type="datetime-local">
주 <input type="week">
숫자 <input type="number" min="0" max+"100">제한안하면 음수까지
범위 <input type="range">
메일 <input type="email">
검색 <input type="search">
확장 <textarea rows="30" cols="100">

4. <form>
<fieldset>틀
<legend>벤다이어그램 제목같은?</legend>
ㅁ <input type="checkbox" value="jjm" checked > 
글씨눌러도 선택(라벨링) <lavel for="jjm">짜장면</label>
value 안적으면 사용자값이 전송

5. placeholder 칸안에 내용
required 유효성체크(입력여부만)

6. 선택하게 <select name="seachcondition">
분류 <option value="~">제목</option>

</fieldset>
</form>
</body>
------------------------------------------------------------------------------------------------
<style>
1.Tag h1 { -- color : blue }
h2 { color : orange }
2.ID #hOne { color : }
#good-color, #bad-color
3.class .p1 { }
4.basic [type = ] { }
[name = ] { background-color : }
input[name = ] { }
5.text p[name^ = ] { } 시작
p[name$ = ] { } 끝
p[class~ = ] { } 띄어쓰기
p[class* = ] { } 검색

6.자손

div>h2 { }
ul li { }
div>ul>li { }
</style>
--------------------------------------------------
하이퍼링크
<body>
기본값: 현재창 open(target="_self")
<a href="url" target="_blank">홈피 제목</a> 새탭열기
<a href="./"></a> 상대경로, 상위폴더도 가능(../)
<a href="image등" download></a> 열기가 아니라 다운로드
</body>
--------------------------------------------------------------------------
영역 단위
<body>
1.블록(세로)  <div style = "border:1px solid></div>
2.텍스트(가로)  <span style = ></span>
3.홈피박제(보안x) <iFrame src = "url" style="width:800px; height: 500px"></iframe>
4.PDF박제 <embed src = "./" type= width height></embed>
</body>

 

<body>
    <h1>데이터 전송 태그</h1>
    <h1>첫번째 폼(form, input)</h1>
    <!-- 폼 태그는 데이터를 전송하는데 필요한 태그임
    action에는 데이터를 보내는 목적지 url을 적고
    method는 보내는 방식을 적는다. -->

    <!-- input 태그에 id,pw를 입력하고
    로그인(sumit)을 누르면 데이터 전송이 시작된다. -->

    <!-- 내가 입력한 값은 name속성값과 짝을 이룬다.
     예를 들어 id값은 userId, userId=khuser01
     pw값은 userPw, userPw=pass01 -->

     <!-- action에 적은 값은 뒤에 물음표과 앰퍼센트(&)로 연결됨 -->
    <!-- http://127.0.0.1:5500/member/login.do?userId=khuser01&userPw=pass01 -->

    <form action="/member/login.do" method="get">
        <!-- form: 감싸주는 -->
    ID: <input type="text" name="userId"><br>
    <!-- input이 입력받는 태그, text: 보임 -->
     <!-- name: 주소창에서 ? 다음 값 -->
    PW: <input type="password" name="userPw"><br>
    <!-- password:마스킹처리로 안보임 -->
     <input type="submit" value="로그인">

    </form>
    <h2>두번째 폼(action, method, name)</h2>
    <!-- 데이터 전송시 만들어지는 URL(예상) -->
     <!-- 입력값은 user01, 1234 했다고 가정해보자
       -->
    <form action="/user/login.do" method="post">
        <!-- 메소드 방식
         1.GET방식(조회) - http://127.0.0.1:5500//user/login.do?memberId=user01&memberPw=1234
         2.POST방식(부여) - http://127.0.0.1:5500//user/login.do
         GET방식은 입력된 값(? 이하)이 보이고 POST 방식은 안보임.
         *쿼리스트링(querystring): ? 이하의 사용자가 입력한 데이터(키와 벨류로 쌍을 이룸)-->
        ID : <input type="text" name="memberId"><br>
        PW : <input type="password" name="memberPw"><br>
        <input type ="submit" value="로그인">
    </form>
       
        <h1>세번째 폼(html5 속성)</h1>
    <form>
        text 텍스트입력 : <input type="text"><br>
        password 패스워드입력 : <input type="password"><br>
        submit 폼 데이터 전송버튼 : <input type="submit"><br>
        reset 입력값 초기화 : <input type="reset"><br>

        <hr>
        checkbox : <input type="checkbox">짜장면
        <input type="checkbox">짬뽕<input type="checkbox">탕수육
        <br>
        radio : <input type="radio"name="gender"checked>남
        <!-- checked가 기본값 -->
                <input type="radio"name="gender">여

        <br>
        button : <input type="button"value="버튼">
        <hr>
        file : <input type="file"><br>
        *hidden : <input type="hidden" value="1"><br>
        date : <input type="date"><br>
        datetime : <input type ="time"><br>
        datetime-local : <input type="datetime-local"><br>
        week : <input type="week"><br>
        number : <input type="number" min="0" max="100"><br>
        <!-- 제한 안두면 음수까지   -->
        range : <input type="range"><br>
        email : <input type="email"><br>
        search : <input type="search"><br>
        textarea : <textarea rows="30" cols="100"></textarea>
        <!-- textarea : 여러 줄 쓸 때 (input은 한줄만) cols가로 rows세로-->
    </form>

    <h1>네번째 폼(label, fieldset, legend)</h1>
    <form action="/user/login.do" method="post">
        <fieldset>
            <legend>로그인</legend>
        ID : <input type="text" name="userId"><br>
        PW : <input type="password" name="userPw">
        </fieldset>
    </form>
    <hr>
    <form action="" method="">
        <fieldset>
            <legend>좋아하는 음식은?(다중선택)</legend>
            <label>
                <input type="checkbox" value="wym">우육면
            </label>
            <!-- label은 글씨를 눌러도 선택됨(친절한 개발자(1) -->
           
            <input id="jjm" type="checkbox" value="jjm">
            <label for="jjm">짜장면</label>
            <!-- 이렇게도 가능함(2) -->
            <input type="checkbox" value="wm">울면
            <input type="checkbox" value="sm">소면
            <!-- value는 전송값이라 안보이고 깨질까봐 영어로 주로 씀 but 전송 등 제외/ 소면 기본값-->
        </fieldset>
        <input type="submit" value="전송">
    </form>

    <hr>
    <form action="" method="">
        <fieldset>
            <legend>성별</legend>
            <label>
                남 <input type="radio" name="gender" value="man">
            </label>
           
            <label for="female">여</label>
            <input id="female" type="radio" name="gender" value="woman" checked>
            <!-- value 안 적으면 사용자값이 전송 -->
        </fieldset>
    </form>

    <h1>다섯번째 폼(placeholder, required)</h1>
    <form action="/user/login.do">
        <fieldset>
            <legend>로그인</legend>
            <input type="text" name="userId" placeholder="ID를 입력하세요" required><br>
            <input type="password" name="userPw" placeholder="PW를 입력하세요"><br>
            <!-- required : 유효성 체크 (입력여부만)-->
            <input type="submit" value="로그인">
        </fieldset>
    </form>

    <h1>여섯번째 폼(select)</h1>
    <!-- 폼 태그는 전송 -->
    <form>
        <fieldset>
            <legend>게시글 검색</legend>
            <select name="searchCondition">
                <option value="subjec">제목</option>
                <option value="content">내용</option>
                <option value="writer">작성자</option>
            </select>
            <input type="search" name="searchKeyword"><input type="submit" value="검색">
        </fieldset>
    </form>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

모질라 이렇게 검색

https://www.edrawsoft.com/ad/edrawmind/?gad_source=1&gclid=EAIaIQobChMI8YS4td3niQMVlddMAh3RRASSEAAYASAAEgKA-vD_BwE

 

EdrawMind (formerly MindMaster) , a Versatile Mind Mapping Tool

Structure Your Knowledge, Information, and Ideas.

www.edrawsoft.com

마인드맵으로 정리하기

https://www.canva.com/ko_kr/graphs/mind-maps/

    </p>
    <h1>기본 속성 선택자</h1>
    <input type="text" name="userId" id="">
    <input type="text" name="userPw" id="" class="">

CSS Diner - Where we feast on CSS Selectors!

 

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

저작자표시
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
글 보관함