2일차 html 기초

10875 단어 taghtmlhtml

HTML(Hyper Text Markup Language)

하이퍼텍스트(HyperText)

문서의 개체(텍스트, 이미지, 영상 등)가 서로 연결되어 있는 구조

하이퍼링크(Hyperlink): 문서와 문서 사이를 이동할 수 있는 기능

마크업 언어(Markup Language)
태그(Tag)를 이용하여 문서나 데이터구조를 명시하는 언어

<!DOCTYPE html> <!-- html 최신 문법 사용 -->
<html lang="en"><!-- 언어설정 en-영어, ko-한국어 -->
<head><!-- 설정 -->
  <meta charset="UTF-8"><!-- 인코딩을 국제규격인 utf-8로 지정>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 엣지 최신버전 적용 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 기본 세팅을 모니터 기준 -->
  <title>Document</title>
</head>
<body>
  안녕하세요
  여기는 body입니다
  html 내부 문서 작성은 여기서 합니다
</body>
</html>

수업에서 자주 사용하는 태그 몇가지를 배웠다.

  1. h1~h6(heading) tag
  • 제목 지정
 <h1> 제목1 </h1>
 <h2> 제목2 </h2>
 <h3>이것이 heading 3 입니다.</h3>
 <h4>이것이 heading 4 입니다.</h4>
 <h5>이것이 heading 5 입니다.</h5>
 <h6>이것이 heading 6 입니다.</h6>
  1. p(paragraph) tag
  • 단락 지정
     <p>이것이 하나의 단락입니다.</p>
  <p>이것이 하나의 단락입니다.</p>
  <p>이것이 하나의 단락입니다.</p>
  1. br(break) tag와 hr(horizontal rule) tag, 단일태그
  • br - 줄바꿈 태그
  • hr - 수평선 태그
     <br />
 <hr />
  1. a(anchor) tag
  • 하이퍼 링크를 의미함
    많이 쓰이는 속성은 href, target으로 target을 blank로 지정하면 새 탭에서 열리고 self로 지정하면 현재 탭에서 열린다. target 속성 지정 안할시 현재 창에서 열림.
    <!-- 새 탭 -->
<a href="#" target="_self"> anchor1 </a>
<!-- 현재 탭 -->
<a href="#" target="_blank"> anchor2 </a>
  1. &nbps와 title tag
  • title - 문서의 제목을 정의 제목은 텍스트 전용이어야 하며 브라우저의 제목 표시줄이나 페이지의 탭에 표시됨
  • &nbps - html에서 사용되는 특수 문자 중 하나, 공백과 <> 등은 html에서 예약어로 지정되어 있는데 이를 문자열로 표시하려면 엔티티로 대체되어야 함
    html 문서 안에 작성된 문자열들의 공백을 여러개 지정 가능함.
  1. img tag
  • 이미지 사용을 위한 태그. 내부 주소 이미지와 외부 주소 이미지 전부 사용 가능함
     <!-- img tag 속성 경로(src) (가로 width) (세로 height) alt(대체텍스트) -->
 <img src="0109_seolak.jpg" alt="설악산" width="300" height="230" />
  • 주요 속성
    • src - 경로 지정을 위한 속성으로 외부 주소와 내부 주소 전부 가능
    • alt - 대체 텍스트로 이미지 경로에 문제가 생기거나 시각 장애가 있는 사용자에게 img tag에서 지정한 alt 속성을 읽어 주는 등 웹 접근성에 있어서 필요한 존재
    • widht - 가로 크기
    • height - 세로 크기

덧) 하나의 프로그래밍 언어를 쭉 배우고 다음 단계로 넘어갈 줄 알았는데 1일차에 java, 2일차에 html을 배워서 당황스럽다... 강의 시작 전 사전학습 관련 강의 문자 내용에 비슷한 내용이 있어서 갑자기 html로 넘어와도 이해하는데 크게 문제가 없었다. 다행이다.
사전학습html tag 강의 정리
늘 참고해야 할 w3school

클로저함수(Closure FunCtion) / 권한분기
JavaScript : 콜백함수의 활용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage