오늘 한것.
1. 이미지관련태그
2. 하이퍼링크 관련 태그
3. 입력관련태그
4. 이것들을 활용한 연습문제
5. css개요

07_이미지관련태그

img 태그

        -웹 문서에 사진, 그림 같은 이미지를 삽입하는 용도의 태그
    [속성]
    1) src : 삽입할 이미지의 경로를 지정하는 속성(파일경로, 웹주소)
    2) width / height : 이미지의 크기를 지정하는 속성
    3) alt : 이미지를 설명하는 속성 -> 이미지가 출력되지 않는 경우 화면에 직접 표시
    (웹접근성)
</pre>

<hr>

<h3>src 속성 확인</h3>
<!-- 
    상대경로 : 현재 위치를 기준으로 경로 지정
    .. : 상위 폴더
    / : 아래, 안쪽, 안에 
    ./ : 동일레벨
 -->
 <img src="./images/pandagif/baog2.gif" alt="아기판다푸바오">

 <hr>

 <!-- 웹 이미지 경로(웹상 절대 경로)를 이용해서 이미지 출력 -->
 <img src="https://images.unsplash.com/photo-1540126034813-121bf29033d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cGFuZGF8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" alt="unsplash사진">

 <hr><hr>

 <h2>width, height 속성을 이용한 크기 조절(고정/가변 크기)</h2>

 <h4>고정 크기 단위(px) : 화면의 크기와 상관없이 지정된 값의 크기를 갖는 단위</h4>

 <img src="./images/panda/bao3.png" width="300px"alt="">
 <img src="./images/panda/bao4.png" width="300px"alt="">
 <img src="./images/panda/bao5.png" width="300px"alt="">
 <img src="./images/panda/bao6.jpg" width="300px"alt="">

 <hr>

 <h4>가변 크기 단위(%) : 화면이나 영역 기준 사이트 크기에 따라 크기가 변경되는 단위</h4>
 <img src="./images/panda/bao11.png" width= "15%" alt="">
 <img src="./images/panda/bao10.jpg" width= "15%" alt="">
 <img src="./images/panda/bao9.png" width= "15%" alt="">
 <img src="./images/panda/bao8.png" width= "15%" alt="">
 <img src="./images/panda/bao7.png" width= "15%" alt="">

 <hr>

 <img src="./images/pandagif/baog1.gi" alt="푸바오">






    
    
    08_하이퍼링크관련태그


    
하이퍼 링크 관련 태그 : a(anchor) 태그
    
    
        a태그는 현재 html문서와 다른 html문서를 연결해서
        페이지 이동을 할 수 있게 하는 기능을 제공
    이 때, a태그로 감싸진 문자열 == 하이퍼링크
</pre>

<hr>

<h2>a태그를 이용한 하이퍼링크 구현</h2>

<ul>
    <li>
        <a href="01_글자관련태그.html">01_글자 관련 태그</a>
    </li>
    <li>
        <a href="02_목록관련태그.html" target="_blank">02_목록 관련 태그</a>
    </li>

    <!-- target 속성 : 연결된 문서를 어디에서 열 것인지 지정하는 속성
        기본값 : 같은 탭
        _blank : 새탭 == 비어있는탭
     -->

     <li>
        <a href="https://www.naver.com" target="_blank">네이버</a>
     </li>

     <hr>

     <a href="https://www.naver.com">
        <img src="./images/panda/bao3.png" width="128px">
     </a>
     <hr>

     <h2>한 페이지 내에서 이동하기</h2>

     <ul id="list">
        목록
        <li><a href="#panda1">판다1</a></li>
        <li><a href="#panda2">판다2</a></li>
        <li><a href="#panda3">판다3</a></li>
     </ul>

     <h3 id="panda1">판다1</h3>
     <img src="./images/panda/bao1.png" >
     <a href="#list">목록으로 이동</a>

     <h3 id="panda2">판다2</h3>
     <img src="./images/panda/bao2.png" >
     <a href="#list">목록으로 이동</a>

     <h3 id="panda3">판다3</h3>
     <img src="./images/panda/bao3.png" >
     <a href="#list">목록으로 이동</a>
</ul>






    
    
    09_입력관련태그

<>
    
input 태그, form 태그
<h2>input 태그</h2>
<p>웹 문서에서 사용자가 입력할 수 있는 양색을 제공하는 태그</p>

<h3>text 관련된 input 태그</h3>

<h4>type="text"</h4>
<pre>
    - 한 줄 짜리 문자열(텍스트)을 입력할 수 있는 입력 상자
    - input 태그의 type이 기본값으로, 생략가능
    - inline 형식 (모든 input 태그가 inline)
</pre>

<input>
<input type="text">

<pre>
    <h3>text 관련 input 태그의 공용 속성</h3>
    - size : 입력상자 크기
    - maxlength : 입력받는 텍스트의 최대길이
    - placeholder : 입력 상자에 작성될 내용을 설명
</pre>

아이디 : <input type="text" size="15" maxlength="10" placeholder="아이디 입력">
<hr>

<h4>type="password"</h4>
<p>비밀번호 입력 상자(입력되는 택스트를 가려줌)</p>
비밀번호 : <input type="password">

<hr>

<h4>type="url"</h4>
<p>주소 입력 시 사용하는 입력 상자</p>
홈페이지 : <input type="url" value="http://">
<!-- value : 모든 input 태그의 type에서 사용 가능한 속성
            input 태그에 들어갈 초기값을 지정
-->

<hr>

<h4>type="tel"</h4>
<p>전화번호 입력 시 사용하는 입력 상자</p>
전화번호 : <input type="tel" size ="30" placeholder="'-' 기호 포함">

<hr>
<h4>type="email"</h4>
<p>이메일 입력 시 사용하는 입력 상자</p>
이메일 : <input type="email" size="30">

<!-- url, email, tel 단독 사용 시 type="text" 와 같지만
    form 태그 내부에서 사용되면
    입력된 값이 용도에 맞는 값인지 유효성 검사를 간단히 진행함.
 -->
 <hr><hr><hr>

 <h3>숫자 관련 input 태그</h3>

 <pre>
    <h3>숫자 관련 태그 공용 속성</h3>

    - min : 최소값
    - max : 최대값
    - step : 증가/감소 단계 지정
</pre>

<h4>type="number"</h4>
<p>
    숫자만 입력할 수 있는 입력상자<br>
    브라우저에 따라 스핀박스 표시되기도 함.
</p>

점수 입력 : <input type="number" min="0" max="100" step="10">

<hr>
<h4>type="range"</h4>
<p>슬라이드 바를 이용해서 숫자 지정(단독 사용x, JS와 함께 사용)</p>
<input type="range" min="0" max="50" step="10">

<hr><hr><hr>
<h3>날짜/시간 관련 input 태그</h3>
<input type="date"><br>
<input type="month"><br>
<input type="week"><br>
<input type="time"><br>
<input type="datetime-local">

<hr><hr><hr>
<h3>radio와 checkbox</h3>
<pre>
    여러 관련된 값을 묶어서 선택하는 경우에 사용하는 input type

    <strong style="color: red;">
    묶음으로 다루려는 input 태그들은 반드시 같은 name 속성의 값을 가져야 한다
    </strong>

    name 속성
    1) radio, checkbox 뿐만 아니라 input 태그들 중
    관련된 것들을 묶어서 부를 때 사용 (== 그룹이름)

    2) 서버쪽에 제출되는 input 태그 값의 이름 지정(form 태그와 같이 사용)
</pre>

<h4>type="radio"</h4>
<!-- id(#) 속성 : 식별자 (하나의 html문서에서 중복 금지) -->

팀 선택<br>
<label for="a-team">A팀</label> <input type="radio" name="team" id="a-team">
<label for="b-team">B팀</label> <input type="radio" name="team" id="b-team">
<label for="c-team">C팀</label> <input type="radio" name="team" id="c-team">

<hr>

<h4>type="checkbox"</h4>

<h5>취미 선택</h5>
<label for="baseball">야구</label><input type="checkbox" name="hobby" id="baseball">
<label for="football">축구</label><input type="checkbox" name="hobby" id="football">
<label for="basketball">농구</label><input type="checkbox" name="hobby" id="basketball">

<!-- 두번째 방법! -->
<label for="">뜨개질
    <input type="checkbox" name="hobby" id="">
</label>

<hr><hr><hr>

<h3>기타 input 태그</h3>
type="color" : <input type = "color"><br>
type="file" : <input type="file"><br>
type="hidden" : <input type="hidden" value="값이 있긴한데 안보여요">

<hr><hr><hr>
<h1 style="color: red;">form 태그</h1>
<pre>
    -div와 같은 영역(block 형식)
    * 내부에 작성된 input 태그의 값을 서버로 전달하는 역할

    [속성]
    1) action : 내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성
    2) method(방식) : 서버로 데이터 전달하는 방식을 지정하는 속성
    3) name : form 태그의 이름을 지정하여 form 태그 구분(JS 사용)
    4) target : action에 지정된 주소를 현재탭/새탭 중 어디서 열지 지정

</pre>

<h3>form 예시 1</h3>

<form action="">
    아이디 : <input type="text" name="id">
    비밀번호 : <input type="password" name="pw">
</form>
<!-- 
    text에 user01입력, pass01입력시
    주소?id=user01&pw=pass01 전달
    ? : 제출된 값을 나타내는 문자열의 시작부문
    id, pw : input태그 name 속성값
    user01, pass01 : input 태그에 입력한 값 (value)
    id=user01&pw=pass01 : name 속성 값이 'id'인 input 태그에 작성된값 'user01'과,
                        name 속성 값이 'pw'인 input 태그에 작성된값 'pass01'이다.
 -->

 <hr>
 <h3>form 예시 2</h3>

 <form action = "08_하이퍼링크관련태그.html">
    <!-- action : 제출할 서버 또는 페이지 주소 -->
    이름 : <input type="text" name="inputName"><br>
    나이 : <input type="number" name="inputAge"><br>

    <button type="submit">제출</button>
 </form>

 <hr>
 <h3>form 예시 3</h3>

 <form action="07_이미지관련태그.html" target="_blank">

    팀 선택<br>
<label for="a-team">A팀</label> <input type="radio" name="team" id="aa-team" value="A">
<label for="b-team">B팀</label> <input type="radio" name="team" id="bb-team" value="B">
<label for="c-team">C팀</label> <input type="radio" name="team" id="cc-team" value="C">

<br><br>

<label for="baseball">야구</label><input type="checkbox" name="hobby" id="baseball" value="야구">
<label for="football">축구</label><input type="checkbox" name="hobby" id="football" value="축구">
<label for="basketball">농구</label><input type="checkbox" name="hobby" id="basketball" value="농구">

<button type="submit">제출</button>

</form>
<!-- radio, checkbox 선택 시 전달되는 값이 'on' 으로 나오는 경우
    -> 선택된 input 태그에 아무런 값이 작성되어있지 않을 때 (value 없을때)
    체크는 되어있다라는 것을 인식해 'on' 이라는 단어로 표현
    
    ** input 태그 value 속성 추가 **

-->

<h3>버튼을 나타내는 input 태그</h3>
<pre>
    input 태그 중
    type="submit" / type="reset" / type="button"

    위 3개가 버튼을 나타내는 타입, 최근 사용 안함
    -> 왜? 버튼의 사용도가 너무 많아져서
    별도의 button 태그가 새롭게 등장함
</pre>

<!-- 
    button 태그
    type="submit / reset / button"
-->

<!-- submit : 제출(기본값) -->
<button>제출</button>

<!-- reset : 버튼이 포함된 form 태그 내부 input 값을 모두 초기화 -->
<form>
    <input>
    <button type="reset">초기화</button>
</form>

<button type="button" id="btn">그냥 버튼</button>
<!-- 아무런 기능이 없는 버튼
    JS 를 이용해서 원하는 기능을 추가할 수 있다!    
-->

<script>
    // 자바스크립트 작성 영역

    document.getElementById("btn").addEventListener("click", function() {
        alert("버튼 클릭됨");
    })

</script>


<hr>

<h3>fieldse / legend</h3>
<pre>
    fieldset : 테두리를 만들어 그룹을 구분하는 영역
    legend : fieldset 테두리에 이름을 붙이는것
</pre>

<form>
    <fieldset>
        <legend>회원가입</legend>
        아이디 : <input type="text" name="" id="">
        비밀번호 : <input type="password" name="" id="">

        <button>가입하기</button>

    </fieldset>
</form>

<hr><hr><hr>
<h2>textarea / select / option</h2>

<h3>textarea 태그 : 여러줄을 입력하기 위한 입력상자</h3>

<textarea rows="5" cols="70" style="resize: none;" placeholder="placeholder도 가능하다..."></textarea>

<hr>

<h3>select 태그, option 태그</h3>

<form>
    <select>
        <option value="1">선택1</option>
        <option>선택2</option>
        <option selected>선택3</option>
        <option>선택4</option>
        <option>선택5</option>
    </select>

    <!-- 
        select 제출시 
        option 태그에 value가 있으면 : value 속성안에 작성된 값
        option 태그에 value가 없으면 : <option></option> 사이에 작성된 내용이 제출된다

        selected 속성 : select의 기본 값을 설정하는 속성
     -->

     <input type="checkbox" checked>
     <input type="radio" checked>

     <!-- checked 속성 : checkbox / radio 체크해두는 속성 -->
</form>






    
    
    10_연습문제1


    
        고객명 : 


        전화번호 : 


        E-mail : 


    <label for="">피자선택 : </label>
    <select name="pizza">
        <option value="cheese" >치즈 피자</option>
        <option value="pepperoni" >페퍼로니 피자</option>
        <option value="patato" >포테이토 피자</option>
        <option value="sweetp" >고구마 피자</option>
        <option value="" selected>피자를 선택하세요</option>
    </select>
    <fieldset>
        <legend>피자 사이즈</legend>
        <input type="radio" name="size" id="s" value="small"><label for="s">Small</label><br><br>
        <input type="radio" name="size" id="m" value="medium"><label for="m">Medium</label><br><br>
        <input type="radio" name="size" id="l" value="large"><label for="l">Large</label><br><br>
    </fieldset>
    <fieldset>
        <legend>토핑 선택</legend>
        <input type="checkbox" name="to" id="bacon" value="bacon"><label for="bacon">베이컨</label><br><br>
        <input type="checkbox" name="to" id="cheese" value="cheese"><label for="cheese">치즈</label><br><br>
        <input type="checkbox" name="to" id="onion" value="onion"><label for="onion">양파</label><br><br>
        <input type="checkbox" name="to" id="mushroom" value="mushroom"><label for="mushroom">버섯</label><br><br>
    </fieldset>        



    희망배송시간 : <input type="time" name="" id="" value="time"><br><br>
    배송시 요청사항 : <textarea name="" id="" cols="20" rows="3"></textarea><br><br>
    <button type="submit">주문하기</button>
</form>






    
    
    11_연습문제2


    
        
            납품자 정보
            

                
납품자명 : 



                
email : 



                
홈페이지 : 



                
지역 : 
                    서울
                    대전
                    대구
                    부산
                



            
        
        
        
            납품 정보
            

                
상품명 :



                
납품수량 :



                
납품등급 :



                
기타사항 : 



            
            
        
        

        send massage
    






    
    
    12_연습문제3


    
회원 가입



    
        필수 입력 사항
        

            

                
ID
                

                    
중복 확인
                
            
            

                
비밀번호
                

            
            

                
비밀번호 확인
                

            
            

                
Email
                

                    

                    직접입력
                    @naver.com
                    @daum.net
                    @gmail.com
                
                
            
        
    
<fieldset>추가 정보
    프로필 사진 <input type="file" name="" id=""><br><br>
    성별: <input type="radio" name="gender" id="male"><label for="male">남자</label>
    <input type="radio" name="gender" id="female"><label for="female">여자</label><br><br>
    생년월일: <input type="date" name="" id=""><br><br>
    취미<br>
    <input type="checkbox" name="hobby" id="baseball"><label for="baseball">야구</label>&nbsp;
    <input type="checkbox" name="hobby" id="basketball"><label for="basketball">농구</label>&nbsp;
    <input type="checkbox" name="hobby" id="football"><label for="football">축구</label><br>
    <input type="checkbox" name="hobby" id="study"><label for="study">공부</label>&nbsp;
    <input type="checkbox" name="hobby" id="music"><label for="music">음악감상</label><br>
    <input type="checkbox" name="hobby" id="etc"><label for="etc">기타</label><textarea name="" id="" cols="20" rows="1" style="resize: none;"></textarea>
    <br><br>
    자기소개<br>
    <textarea name="" id="" cols="80" rows="10" style="resize: none;"></textarea>
    

</fieldset>
<br>
<button>회원가입</button>
<button type="reset">다시입력</button>
<button onclick="history.back();">이전으로</button>






    
    
    01_CSS개요,CSS선택자1
<style>
    /* CSS 주석 */
    /* style 태그 : css 코드만 작성할 수 있는 영역을 제공하는 태그 */

    div {
        border : 3px solid red; /* 3px 두께의 빨간 실선 */
    }
    
    strong {
        background-color: yellow;
    }

    span {
        background-color: hotpink;
    }

    /* 아이디 선택자(#) */
    #li-1 { background-color: red;}
    #li-2 { background-color: orange;}
    #li-3 { background-color: yellow;}
    #li-4 { background-color: green;}
    #li-5 { background-color: blue;}

    /* 콤마(,)를 이용한 여러 선택자 동시 작성 */
    #li-1, #li-2, #li-3, #li-4, #li-5 {
        color: white;
    }

    /* 클래스 선택자 (.) */
    .test-1 { color: red;}
    .test-2 { color: white; background-color: black;}

    .aaa {
        font-weight: bold;
    }

    /* 모든 요소 선택자 (*) */


    @font-face {
        font-family: 'omyu_pretty';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/omyu_pretty.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'Ramche';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Ramche.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }

    * {
        font-family: 'omyu_pretty';

        font-size: 20px;
    }
</style>


    
CSS(Cascading Style Sheets)
    
        마크업 언어(HTML)가 실제로 화면에
        표시되는 방법(모양, 색상, 크기, 스타일...)을 기술하는 언어
        (HTML 코드ㅏ 화면에 어떤 스타일로 보여질지 지정하는 것)
    
<hr>

<h1>CSS Selector(선택자)</h1>
<pre>
    Selector란?
    현재 HTML 문서 내에서 특정한 요소를 선택하는 문자 또는 문자열.

    스타일을 적용하고자 하는 요소를 선택하는 방법
</pre>

<hr>

<h3>태그선택자</h3>
<pre>
    현재 HTML 문서 내에 같은 태그를 선택하는 선택자.

    작성법
    태그명 { CSS 코드 ; }
</pre>

<div>
    <strong>Strong 태그에 작성된 내용입니다.</strong>
    <br>

    <span>span 태그에 작성된 내용입니다.</span>

    <ul>
        <li>
            <strong>Strong 태그에 작성된 내용입니다.</strong>
        </li>

        <li>
            <span>span 태그에 작성된 내용입니다.</span>
        </li>
    </ul>
</div>

<hr>

<h3>id 선택자(#id속성값)</h3>
<pre>
    HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자.

    [작성법]
    #id속성값 { CSS 코드; }

    # == id
</pre>

<!-- 
    Java : 카멜 표기법(helloWorld)
    DB : 대문자, 띄어쓰기 _ 로 표시(MEMBER_NO)
    HTML : 하이픈 표기법 (li-1, class-1) / 언더바 표기법(li_1, class_1)
 -->
<ol>
    <li id="li-1">id 선택자 테스트 1</li>
    <li id="li-2">id 선택자 테스트 2</li>
    <li id="li-3">id 선택자 테스트 3</li>
    <li id="li-4">id 선택자 테스트 4</li>
    <li id="li-5">id 선택자 테스트 5</li>
</ol>

<hr>
<h3>class 선택자(.class속성값)</h3>
<pre>
    HTML 문서내에서 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자

    [작성법]
    .class속성값 { CSS 코드 ;}

    . == class
</pre>

<ul>
    <li class="test-1 aaa">클래스 선택자 테스트1</li>
    <li class="test-2">클래스 선택자 테스트2</li>
    <li class="test-1">클래스 선택자 테스트3</li>
    <li class="test-2">클래스 선택자 테스트4</li>
    <li class="test-1">클래스 선택자 테스트5</li>
    <li class="test-2">클래스 선택자 테스트6</li>
</ul>

<hr>
<h3>모든 요소 선택자(*)</h3>
<pre>
    [작성법]
    * { CSS속성값 }
</pre>