brackets

brackets 설치

emmet 설치하기 -> ! + tab 누르면 자동완성 ctrl + enter : 줄바꿈 ctrl+d: 복사

beauty 설치 ctrl + alt + b : 자동정렬

<열림 속성="여닫이문">정보</닫힘> <tag prop="imp">value</tag>

<br> - 줄바꿈 <span></span>: 그 글자만큼만 공간 확보(div와 차이점임) <div></div> : 한 줄을 모두 공간으로 씀 <p></p>: 위아래 공간 있음

image.png

<img>

image.png

<b>보다는 <strong>을, <i>보다는 <em>을 자주 사용한다.

100m<sup>2</sup> H<sub>2</sub>O

image.png

<a>-하이퍼링크

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <h4>skt</h4>
    <a href="<https://www.sktelecom.com/>">
    <img src="<https://search.pstatic.net/common/?src=http%3A%2F%2Fimgnews.naver.net%2Fimage%2F5875%2F2024%2F12%2F13%2F0000037375_001_20241213115010498.jpg&type=l340_165>" alt="skt" width="200" height="200">
    </a>
    <br>
    <h4>kt</h4>
    <a href="<https://www.kt.com/?NaPm=ct%3Dm67f7167%7Cci%3Dcheckout%7Ctr%3Dds%7Ctrx%3Dnull%7Chk%3D43c9033d4e203c7d55d1dbb176e8d14f9781fe1d>">
    <img src="<https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyNDAzMTlfMTcx%2FMDAxNzEwODUyNzQ1NDg3.5_7WDmPFuZltiJ5Qwf2nxMNfL8XEfDYtW1ZoRgsfemwg.A54LqIsyDeCxVEnV9xGzFwUtDrDpQd12_7OHRFSU4aQg.PNG%2Fimg.png&type=a340>" alt="kt" width="200" height="200">
    </a>
    <br>
    <h4>u+</h4>
    <a href="<https://www.lguplus.com/?utm_campaign=u25newgalaxy01pfm&utm_source=naver&utm_medium=bsa_brandsearch_impression_cpp&utm_content=texthomelink_%EB%85%BC%ED%83%80%EA%B2%9F_pc_impression_cpp_main_alarm_before_paid&utm_term=%7Bkeyword%7D>">
    <img src="<https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20120824_267%2Fmissalz_1345793955388Y2zEa_JPEG%2FU-%25C7%25C3%25B7%25AF%25BD%25BA.jpg&type=a340>" alt="u+" width="200" height="200"></a>
    <br>
    <h4>깃허브</h4>
    <a href="<https://github.com/pmj8298>">
    <img src="<https://search.pstatic.net/sunny/?src=https%3A%2F%2Fvelog.velcdn.com%2Fimages%2Fsuzu11%2Fpost%2F3291f857-6be6-49ed-a597-d30dd56034b6%2F%25E1%2584%258C%25E1%2585%25A6%25E1%2584%2586%25E1%2585%25A9%25E1%2586%25A8%25E1%2584%258B%25E1%2585%25B3%25E1%2586%25AF%2520%25E1%2584%258B%25E1%2585%25B5%25E1%2586%25B8%25E1%2584%2585%25E1%2585%25A7%25E1%2586%25A8%25E1%2584%2592%25E1%2585%25A2%25E1%2584%258C%25E1%2585%25AE%25E1%2584%2589%25E1%2585%25A6%25E1%2584%258B%25E1%2585%25AD_-001%2520%287%29.png&type=a340>" alt="u+" width="200" height="200"></a>
</body>
</html>

<Form 양식> form 양식의 각 input의 속성 중에 서버로 전달되어 중요한 전달자 역할을 하는 것은? → name 속성

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>form 양식</title>
</head>

<body>
    <h1>6. Form 양식</h1>
    <fieldset>
        <legend>form양식</legend>
        <!--<form action="<https://www.google.com/>">-->
        <form action="#">
            <!--전달 할 곳의 주소를 넣어주면 된다-->
            <label for="fname">First Name:</label>
            <!--First Name: <input id="fname" type="text" placeholder="이름" required><br> 이렇게 쓰는 대신 label 태그를 이용
            웹 접근성을 위한 스크린 리더 지원: <label> 태그의 for 속성과 연결된 컨트롤 요소의 id를 매칭하여 매칭된 컨트롤 요소의 이름표라는 것을 명확히 파악하게 해줌.
            사용자 편의성 증대: <label>을 클릭하면 매칭된 컨트롤 요소가 포커스되거나 접근 가능하게 해줌.
            label태그를 이용할 때는 id를 지정해줘서 사용-->
            <input id="fname" name="fname" type="text" placeholder="이름" required><br>
            <!--required: 입력하지 않으면 값을 전달할 수 없게 만듦-->

            <label for="lname">Last Name:</label>
            <input id="lname" name="lname" type="text" placeholder="성"><br>

            <label for="age">Age:</label>
            <input id="age" name="age" type="number" min="12" max="20" step="2" value="15"><br>
            <!--min: 최솟값 max:최댓값 step: 2로 해두면 2씩 증가함 value: 기본값을 저장해둠-->

            신남: <input type="checkbox" name="chk1">
            배고픔: <input type="checkbox" name="chk2" checked><br>
            <!--라벨로 신남: 적어줘도 됨-->
            <!--checked: 미리 체크되어있음-->

            남성: <input type="radio" name="gender" value="man">
            여성: <input type="radio" name="gender" value="woman" checked>
            <br>
            남성: <input type="radio" name="man">
            여성: <input type="radio" name="woman">
            <!--form 양식의 각 input의 속성 중에 서버로 전달되어 중요한 전달자 역할을 하는 것은? → name 속성/ name을 gender로 같게 하면 둘 중 하나만 선택되고 name을 man, woman으로 따로 주면 둘 다 선택할 수 있다-->
            <br>

            비밀번호: <input type="password" name="pw" id="pw">
            <br>

            날짜: <input type="date" name="date" id="date">
            <br>

            시간: <input type="time" name="time" id="time">
            <br>

            birth: <input type="datetime-local" name="birth" id="birth"><br>

            File: <input type="file" name="file" id="file"><br>

            hidden: <input type="hidden" name="신난다" value="집에 간다">

            <hr>
            <input type="submit" value="보내기">
            <input type="reset" value="내용지우기">
            <hr>
            <button type="submit">제출버튼</button>
            <button type="reset">삭제버튼</button>
        </form>
    </fieldset>
</body></html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dropdown</title>
</head>

<body>
    <!--form>select>option*4-->
    <form action="#">
      <select name="path" id="">
            <option value="blog">블로그</option>
            <option value="search">검색</option>
            <option value="sns">SNS</option>
            <option value="etc">기타</option>
       </select>
       <button type="submit">전송</button>
    </form>
</body></html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인 패턴</title>
</head>

<body>

    <!--fieldset>legend{패턴테스트}+form>input*2 (+는 형제라는 의미)-->

    <fieldset>
        <legend>패턴테스트</legend>
        <form action="#">
            ID: <input type="text" pattern="[a-zA-Z가-힣]{5,}">
            PW: <input type="password" pattern="[0-9]{4,10}">
            <input type="submit">
        </form>
    </fieldset>
</body></html>