폼 태그

span은 인라인태그다

강조요소로 사용되곤 함

 

 <h2>블럭요소 vs 인라인요소</h2>
    <div style="background-color: lightcoral;">div</div>
    <p style="background-color: antiquewhite; width: 100px; height: 100px;">p</p>

블록요소는 너비/높이 속성을 지정해줄 수 있고, 별도의 사이즈를 주지 않으면 기본사이즈 너비는 부모너비 100%이다.

높이(auto)는 콘텐츠 높이다. 여러개인 경우 세로배치를 하며 한줄을 다 차지한다.

    <a href="#" style="background-color: lightskyblue; width: 200px;">a태그</a> <img src="imgs/0401-1.jpg" alt="" width="100">

ㄴ여기서 width는 적용 안됌
    <span style="background-color: lightskyblue;">span태그</span>
    <span style="background-color: lightskyblue;">
        인라인요소 안에는 블록요소가 존재할 수 없다. (존재한다면 유효성에 어긋남)
        ***인라인 요소의 하위요소에 블록요소가 존재하는 경우 부모(인라인) 요소의 display상태를 바꿔야함***

 

이름을 잘 써야 위치가 잘 맞아들어감

유효경로같은 느낌?

 

placeholder="asdf" <텍스트 작성시 자동으로 지워지는 글

 

    <form>
        아이디: <input type="text" name="id" placeholder="placeholder"><br>
        이메일: <input type="email" name="email" placeholder="email"><br>
        URL: <input type="url" name="url" placeholder="url"><br>
        전화번호: <input type="tel" name="tel" placeholder="tel"><br>
        색상: <input type="color" name="color"><br>
        월: <input type="month" name="month"><br>
        날짜: <input type="date" name="date"><br>
        주: <input type="month" name="week"><br>
        시간: <input type="time" name="time"><br>
        지역 시간:<input type="datetime-local" name="local"><br>
        숫자: <input type="number" name="number" min="1" max="10" placeholder="1~10"><br>
        범위: <input type="range" name="range" min="1" max="10" step="2"><br>
    </form>

 

    <form>
        <h2>회원 가입 화면</h2>
        <label for="name">이름: </label>
        <input type="text" name="name" placeholder="이름"><br>
        <label for="adress">주소: </label>
        <input type="text" name="adress" placeholder="주소"><br>
        <label for="email">이메일: </label>
        <input type="email" name="email" placeholder="asdf@naver.com"><br>
        <label for="gender"></label>
        <input type="radio" name="gender" value="Male" checked> Male<br>
        <input type="radio" name="gender" value="Female"> Female<br>
        취미:<br>
        <input type="checkbox" name="else" value="value1" checked> 축구
        <input type="checkbox" name="else" value="value2"> 배구
        <input type="checkbox" name="else" value="value3"> 야구
        <input type="checkbox" name="else" value="value4"> 배드민턴
        <br>
        <input type="submit" value="Send"><!--value값 없으면 기본이 제출-->
        <input type="reset" value="초기화"><!--value값 없으면 기본이 초기화-->
    </form>