본문 바로가기
WEB/Front-end

HTML 기초 (HTML, CSS, JS)

by 최새벽 2024. 7. 18.

태그

<meta> : 데이터에 대한 데이터, 웹 문서 관련 정보 지정

    <meta charset="UTF-8"> <!-- 인코딩 정보 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> <!-- html 열었을 때 탭에 뜨는 이름(제목) -->
  • SEO(search engine optimization) : 검색엔진 최적화를 위해서 meta 태그 사용하기도 (최적화되면 검색 시 검색 엔진을 통해 상위에 노출 시킬 수 있음)
  • keywords, description, author등

텍스트 태그

  • html파일에서 줄 바꿈을 해도 반영되지 않음
    <p></p> : 텍스트 단락. 단락을 지어주기 때문에 텍스트 영역(공백)이 생김
    <br> : 줄 바꿈
    <b></b>: 굵게
    <strong></strong>: 강조

목록 태그 - 메뉴 등에 활용

  • <ol></ol>: 순서가 있는 목록
<ol>
    <li> 목록1 </li>
    <li> 목록2 </li>
    <li> 목록3 </li>
</ol>
  • <ul></ul>: 순서가 없는 목록
<ul>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ul>
  • dl(definition, description list) : 정의 목록
    • dt:title, dd:description
 <dl>
        <dt>과목</dt>
        <dd> HTML</dd>
        <dd> CSS</dd>
        <dd> JAVA</dd>
</dl>

경로

  • 현재 웹서버(라이브서버)의 최상위 디렉토리
    https://localhost:5500/ → D:\html
  • 상대 경로
    '../' 폴더 한 칸 위로 올라감
    <img src="img/google.png" alt="구글로고" title="구글로고" width="300">
  • 절대 경로
    <img src="/img/google.png">

form

  • 속성
    • action: 전송할 위치(경로), 기본값: 현재 페이지
    • method: 전송 방법(get/post), 기본값: get
      • get: 전송량 제한. 주소에 포함 url?이름1=값&이름2=값...
      • post: 전송량 제한 없음. 주소에 미포함(보안). 개인정보 포함, 파일 전송 시 post 활용
  • <input> 태그_회원가입 예시
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--원래 회원가입 get으로 하면 안됨(보안상의 이유)-->

    <form action = "regist.jsp" method = "get"> 
    <!-- <form action = "regist.jsp" method = "post" enctype="multipart/form-data">  -->

        <!-- text -->
        아이디: <input type="text" name="id" value="test1", size = "5" maxlength="5" readonly><br>
        아이디2: <input type="text" name="id2" value="test2", size = "5" maxlength="5" disabled><br>
        이름: <input type = "text" name="name" required placeholder="이름" autofocus><br>
        <!-- 
            name : 무조건 적어줘야 함.
            value : 무조건 존재해야 하지만 기본값(빈 문자열?)이 존재하므로 꼭 안적어도 됨.
            size : 보이는 칸 사이즈 지정.
            maxlength : 입력의 최대 길이 지정.
            readonly : 입력이 안됨. 전송은 됨.
            disabled : 입력, 전송 안 됨.
            required : 필수 항목에 대해 입력하지 않으면 summit이 안 됨.
            placeholde : 사용자에게 이 칸이 뭐하는 칸인지 적어줌.(value는 미리 값이 넣어져 있는거라면 이거는 무슨 자리인지 표시만 해주는 거)
            autofocus : 페이지에 들어갔을 때 커서가 자동으로 해당 칸에 들어가게 해줌
            tabindex = "숫자" : 숫자 순서대로 다음칸으로 이동, 미지정시 아래에서 위 순서로 
        -->


        <!-- password -->
        <!-- password키워드를 사용하면 안에 입력한 문자들 가려져서 보임-->
        비밀번호: <input type = "password" name="pwd"><br>


        <!-- radio -->
        <!-- name이 같을 경우 선택지 중 하나만 고를 수 있음 -->
        <!-- label : 라디오 버튼이 아니라 글자를 눌러도 선택이 될 수 있게 하기 위해서 사용 -->
        <!-- checked : 페이지 들어갔을 때 해당 칸 체크된 상태-->
        <input type = "radio" name = "gender" value="1" id="gender1"> 
        <label for="gender1">남자</label>
        <input type = "radio" name = "gender" value="2" id="gender2" checked> 
        <label for="gender2">여자</label><br>


        <!-- checkbox -->
        <!-- 0 ~ n개 체크 가능 -->
        <!-- 자바에서 이후 배열 등으로 처리 -->
        <!-- checked : radio에서랑 마찬가지 -->
        취미: 
        <input type = "checkbox" name = "hobby" value="1"> 독서
        <input type = "checkbox" name = "hobby" value="2" checked> 영화
        <input type = "checkbox" name = "hobby" value="3"> 게임 <br>


        <!-- select -->
        <!-- 드롭다운 메뉴 -->
        <!-- multiple: (기본에서는 ctrl 누르고 선택하면) 여러개 선택할 수 있음 -->
        거주지:
        <select name="city">
            <option value="1">서울시</option>
            <option value="2">경기도</option>
            <option value="3">제주도</option>
        </select><br>


        <!-- file -->
        <!-- value 없음 -->
        <!-- 파일전송을 하려면 반드시 method가 post이어야함(get 안 됨) -->
        <!-- form 태그에 enctype="multipart/form-data"라 써줘야 첨부파일이 전송됨 -->
        첨부파일:
        <input type="file" name="filename"><br>


        <!-- textarea -->
        <!-- value 속성X -->
        <!-- form 태그 안에 있어야 전송 시 해당 내용 전송됨 -->
        자기소개: <textarea name = "introduce" rows="10" cols="20">안녕하세요</textarea><br>


        <!-- hidden -->
        <!-- 웹사이트의 사용자에게 보여줄 필요는 없으나 값은 전송되어야 할 경우 사용-->
        <input type = "hidden" name = "no" value="15">


        <!-- submit --> 
        <!-- 입력한 부분 제출 -->
        <!-- 여기서 value는 값이 전송/저장되는 건 아님. 그냥 버튼에 보이는 텍스트 -->
        <br><input type="submit" value="전송"><br>


        <!-- image -->
        <!-- 이미지가 버튼이 됨 -->
        <input type="image" src="/img/google.png" width="200"><br>


        <!-- reset -->
        <!-- 값을 바꾸기 이전 처음 상태로 돌아감 -->
        <input type = "reset" value="초기화"><br><br>


        <!-- button -->
        <!-- input type button은 전송 안 됨 -->
        <!-- submit, image는 자동으로 전송되지만 button은 아님 -->
        <!-- javascript로 onclick=' ' 이벤트 발생시 동작하도록 하는 역할 -->
        <input type = "button" value="버튼"><br><br>

        <!-- button 태그는 전송이 됨 -->
        <!-- <button type = "button"></button>은 전송 안되고 
            여기서 type = "submit"하면 전송됨 -->
        <button>버튼</button>


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

블록 태그

div, hn, p, ul/ol, table...

인라인 태그

span, a, input, img, 텍스트 관련 태그

'WEB > Front-end' 카테고리의 다른 글

jQuery 기초 (HTML, CSS, JS)  (0) 2024.07.18
JavaScript 기초 (HTML, CSS, JS)  (0) 2024.07.18
CSS 기초 (HTML, CSS, JS)  (0) 2024.07.18
React_useEffect, useReducer, 최적화 (React.js)  (0) 2024.07.11
React 서버 배포, React 기초 (React.js)  (0) 2024.07.09

관련글

티스토리툴바