ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [XHTML] 개발자 지망생 스터디 - 1일차
      스터디/KAKAOCLOUDSCHOOL 2022. 11. 1. 22:53
      개발자를 꿈꾸며 6개월 간의 교육을 통해 배운 내용을 복습/정리/기록하고자 작성을 시작

       

      ■ VS Code

      - 마이크로 소프트가 개발한 소스 코드 편집기(에디터)로 다양한 프로그래밍 언어와 편리한 기능을 제공.

      - 해당 프로그램을 이용하여 스터디 시작.

       

      ■ XHTML 구성 요소

          ▶ 태그(tag) : <,>

          ▶ 요소(Element) : 요소 이름과 속성 이름에 소문자 사용

          ▶ 속성(Attribute)

          ▶ 값(Value)

      a(anchor) 요소는 텍스트나 이미지 콘텐츠에 링크를 설정할 때 사용

      ■ XHTML 서식

          ▶ 혼동의 문제로 <, >, &의 경우 변환하여 사용.

      < &lt;
      > &gt;
      & &amp;
      공백 &nbsp;

          ▶ 주석 : <!-- 주석 내용 -->

       

      ■ XHTML 기본 구조

          ▶ <!DOCTYPE>            - DTD 선언

          ▶ <html>                       - xhtml 문서의 시작

          ▶ <head> ~ </head>   - head 영역

          ▶ <body> ~ </body>   - body 영역 (눈에 보이는 영역)

          ▶ </html>                      - xhtml 문서의 종료

       

      ■ TAG 분류

          ▶ 블록 요소

              → 독립적 형태의 상자로 제목 <h1> ~ <h6>, 문단 <p>, div, ul, ol, dl 등이 있음.

              → 각 요소들이 수직으로 쌓임.

      💡  h<n> 태그
           "<h1> ~ <h6>" 작은 숫자 부터 대제목, 중제목, 소제목 순으로 계층 구조를 가짐.
           h1의 경우 대제목으로 한문서에 1번 만 사용하는 것을 권장함. 

      💡  <p> : paragraph 문단 요소
           텍스트를 문단으로 정의할 때 사용
           문단 안에서 강제로 줄 바꿈 해야하는 경우 "<br/>" 요소를 사용할 수 있지만,
           시작적 효과 등을 위해 함부로 사용하지 않아야 함.

          ▶ 인라인 요소

              → 주요 인라인 요소 : span, a, b, strong, video, audio 등이 있음.

              → 블록 상자 안의 일부 하는 의미로 링크, 이미지, 강조 등이 해당함.

              → 각 요소들이 수평으로 쌓임.

       

      ■ 전역 속성

          ▶ title

              → 설명을 설정하고자 하는 태그에 작성 <태그 title="설명"></태그>

          ▶ style

              → 요소에 직접 CSS를 적용하게 해주는 속성 <태그 style="값"></태그>

          ▶ class

              → 요소들을 그룹화하기 위한 속성 <태그 class="값"></태그>

              → 값의 중복이 가능함.

          ▶ id

              → 요소들을 구별하기 위한 속성 <태그 id="값"></태그>

              → 값의 중복이 불가능함. (단일 값만 사용 가능)

          ▶ data

              → 데이터를 저장하는 용도로 사용 <태그 data="값"</태그>

       

      ■ 문서 정보 (meta)

          ▶ 웹 브라우저에서 웹 페이지를 제작할 때 사용한 문자가 제대로 인코딩 되도록 하기 위해서는 meta 요소를 이용해야 함.

              → 다국어 인코딩의 경우 utf-8을 지정할 수 있음. <meta charset="utf-8">

       

      🎲 meta.html 실습

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 실습</title>
    </head>
    <body>
        <p>안녕하세요 반갑습니다</p>
        <p>shine IT 블로그 입니다.</p>
    </body>
</html>

      meta.html 실행 결과

      ■ a(anchor) 요소

          ▶ a(anchor) 요소는 텍스트나 이미지 콘텐츠에 링크를 설정할 때 사용

          ▶ 절대 경로와 상대 경로

              → 절대 경로 : 프로토콜, 도메인 이름, 필요한 경우는 경로명 까지 포함한 전체 URL

              → 상대 경로 : 현재 URL을 기준으로 한 경로

                   - 현재 작업 디렉토리 : ./

                   - 상위 디렉토리 : ../

                   - 루트 기준 : / 

       

      ■ 목록 태그

          ▶ ul(unorderlist)

              → 순서 없는 목록

          ▶ ol(orderlist)

              → 순서 있는 목록

          ▶ 세부 항목은 li 태그를 이용해서 표시

       

      🎲 list.html 실습

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>목록 태그</title>
    </head>
    <body>
        <ul>
            <li>Front End</li>
            <li>Back End</li>
            <li>DevOps & MLOps</li>
        </ul>
        <div id="content"></div>
        <script>
            document.getElementById("content").innerHTML = "JavaScript";
        </script>
    </body>
</html>

      list.html 실행 결과

       

      ■ 이미지 태그 <img/>

          ▶ 사용 형식 : <p> <img src="이미지 경로" alt="대체텍스트"/> </p>

          ▶ src : 이미지의 경로

          ▶ width : 이미지 가로 크기

          ▶ height : 이미지 세로 크기

       

      🎲 img.html 실습

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>이미지 태그</title>
    </head>
    <body>
        <!--이미지 전체에 링크 설정-->
        <a href="https://bodeum.co.kr/html/edu_movie/">
        <img 
        src="data:image/jpeg;base64,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"
        width="100" height="100" />
        </a>
        <p></p>
        <!--화면에 보여지는 부분을 변경하는 것은 CSS 에서 하는 것을 권장-->
        <table border="1">
            <tr>
                <th>제목</th>
                <th>내용</th>
            </tr>
        </table>
    </body>
</html>

      img.html 실행 결과
      img 클릭시 지정된 site로 이동

       

      ■ form
          ▶ 웹 클라이언트에서 여러 데이터를 받아서 서버에게 한 번에 전송하기 위해서 사용
          ▶ 기본 형식

      <form action="데이터를 전송받을 서버 URL" method="요청 방식" enctype="multipart/form-data">
</form>

          ▶ action 은 생략하면 요청한 URL(현재 웹 브라우저의 URL)
          ▶ method 는 생략하면 get
          ▶ GET: 데이터를 URL에 붙여서 전송하는 방식으로 일반적으로 조회할 때 사용 (READ)
              → 데이터가 URL에 노출이 되기 때문에 보안성이 떨어지고 데이터의 길이에 제한이 있음
              → 자동 재전송 기능이 있음

                   - 때문에 서버 나 네트워크가 일시적으로 사용 중지 되었다가 복구되는 경우 자동으로 전송되는 경우가 있음
          ▶ POST: 데이터를 헤더에 숨겨서 전송하는 방식으로 예전에는 READ를 제외한 모든 작업에 사용함

              → 지금은 삽입에만 사용하는 것을 권장 (CREATE)
              → 숨겨서 전송하기 때문에 보안성이 뛰어나고 URL에 포함시키지 않기 때문에 길이에 제한이 없음
              → 패스워드나 파일이 존재할 때는 반드시 POST 나 PUT 또는 PATCH를 사용
          ▶ PUT: 전송 방법은 POST 와 동일한데 데이터 전체 수정에 사용 (UPDATE)
          ▶ PATCH: 전송 방법은 POST 와 동일한데 데이터의 일부분 수정에 사용 (UPDATE)
          ▶ DELETE전송 방법은 GET 과 동일한데 데이터 삭제에 사용 (DELETE)
          ▶ OPTIONS: 리소스가 지원하고 있는 메서드 취득
          ▶ HEAD: 서버 리소스의 헤더
          ▶ CONNECT: 프록시 동작의 터널 접속을 변경
          ▶ enctype: 보통 때는 설정하지 않아도 됨

              → 파일을 전송하고자 하는 경우에만 multipart/form-data 로 설정
              → 기본값은 application/x-www-form-urlencoded(인코딩해서 전송)
          ▶ 그룹화 및 제목
              → 그룹화를 하고자 할 때는 fieldset 을 이용

              → 그룹에 제목을 붙이고자 할 때는 fieldset 안에 legend 태그를 이용해서 제목을 작성

          ▶ label
              → 텍스트를 출력할 때 사용
              → for 라는 속성에 다른 입력 객체를 연결시킬 수 있습니다.
              → 모바일에서는 필수
          ▶ input
              → 사용자로부터 입력을 받거나 이벤트를 받기 위한 용도로 사용하는 태그
              → type 속성은 종류를 선택하는 것인데 HTML4.01 에서는 10가지가 있고 HTML5에서는 다양한 type이 추가됨
                   - text: 한 줄 입력
                   - password: 한 줄을 입력받는데 텍스트가 마스킹되서 보임
                   - radio: 여러 개 중 하나를 선택하게 할 때 사용
                   - checkbox: 여러 개 중에서 0개 이상을 선택하게 할 때 사용
                   - file: 파일
                   - image: 이미지 버튼
                   - submit: form 의 데이터를 서버에게 전송하는 기본 역할을 수행
                   - reset: form 의 데이터를 모두 삭제하는 기본 역할을 수행
                   - button: 버튼
                   - hidden: 눈에 보이지 않음
              → name 속성은 서버에게 전달할 때 같이 전송되는 이름
                   - radio 나 checkbox를 하나의 그룹으로 만들 때는 name 속성을 동일하게 해주면 됨
              → size, maxlength, checked, disabled, readonly 등이 있음
              → radio를 만들 때는 되도록이면 하나의 데이터를 선택된 상태로 출력되도록 해주는 것이 좋음.
              → value는 값을 설정하는 것인데 text 에서는 보여지는 글자가 되고 radio 나 checkbox에서는 구분하기 위한 값
                   - file 에는 value 설정이 안됨

          ▶ textarea
              → 여러 줄의 글을 입력받고자 할 때 사용
              → name, value, rows 와 cols 속성을 제공
              → value는 처음에는 사용할 수 없고 초기값은 태그 사이에 작성해야 함
              → 여는 태그 와 닫는 태그가 다른 줄에 있으면 커서가 첫번째 칸에 위치하지 않음

          ▶ select 
              → 목록 태그
              → select 태그 안에 option 태그로 목록을 만듭니다.
              → select 에는 name을 설정하고 option에는 value를 설정합니다.

          ▶ button
              → button 은 form 안에 있으면 submit의 기능을 수행

      <button>텍스트</button>

      '스터디 > KAKAOCLOUDSCHOOL' 카테고리의 다른 글

      [JavaScript] 개발자 지망생 스터디 - 6일차  (0) 2022.11.09
      [JavaScript] 개발자 지망생 스터디 - 5일차  (0) 2022.11.08
      [JavaScript] 개발자 지망생 스터디 - 4일차  (0) 2022.11.07
      [JavaScript] 개발자 지망생 스터디 - 3일차  (0) 2022.11.04
      [XTML/CSS] 개발자 지망생 스터디 - 2일차  (0) 2022.11.04

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바