HTML

HTML.2 HTML 코드 관련

codermun 2020. 11. 4. 16:56
728x90
반응형

개발 코드 관련

  • HTML
! -> 가장 기본 틀

<!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>

</body>

</html>

<h1> ~ <h6> 

  • 번호별로 크기가 달라짐 (높을수록 하위 제목)
  • 줄바꿈 적용

권장사항

  1. h1는 페이지당 하나
  2. 순서를 건너뛰지 말 것 (예: <h1> 다음에는 <h2>)
  3. 시각적 효과를 위해 사용하지 말 것 (디자인은 CSS로)
  4. 정보의 구조를 나타내는 용도로 사용하 것

줄바꿈 태그

<br> vs. <p> 

<br> : break

  • 닫는 태그 필요 없음, 위치 무관
  • 여러번 사용 → 여러 줄
  • 단순 시각적인 줄 바꿈 (엔터) 

<p> : paragraph

  • 정보 부여: 한 문단, 정보 덩어리임을 나타냄
  • CSS가 적용될 단위로 사용
  • 단순 줄 바꿈이 아닌, 문단 구분을 위한 태그

강조 태그

<b> vs. <strong> 

<b> : bold

  • 단순히 진하게

<strong> 

  • 정보적 강조 (컴퓨터에게 중요한 정보임을 알림)

기울임 태그

<i> vs. <em> 

<i> : italic

  • 단순히 기울임

<em> : emphasize

  • 정보적 강조 (컴퓨터에게 중요한 정보임을 알림)

 

<cite> : citation

  • 저작물의 출처 표기 (제목을 표시할 것)

이미지 태그

  • <img> / alt = 이미지 설명
  • 1. 이미지파일이 image라는 폴더 내에 있는 경우
  • <img src="image/13491509_0.jpg" alt="숭례문 사진"/>
  • 2. 이미지파일을 이미지 주소 복사로 불러오는 경우

<img src=“이미지 주소” alt="숭례문 사진"/>

이미지 태그

<img> : image 

속성

역할

값

src

포함하고자 하는 이미지의 절대/상대 경로

경로 텍스트

alt

이미지 설명

설명문 텍스트

width

이미지의 가로 길이

단위 없는 정수값

• alt 속성 : 정보 용도

    • 스크린 리더가 읽어주는 값
    • 네트워크 오류, 컨텐츠 차단 죽은 링크 등의 상황 대처
  • width는 CSS로 대체 가능

<sup> : superscript (위첨자)

  • 거급제곱, th 등 관례적으로 위 첨자로 넣는 글자일 때

<sub> : subscript (아래첨자)

  • 화학 기호 등 관례적 아래 첨자

<s> : strike (취소선)

<blockquote> : 텍스트가 긴 인용문에 사용

하이퍼 링크 

<a> : anchor

  • <a href= “~~”>Text</a> -> 현재 페이지에서 링크로 이동
  • <a href=“~~” target=“_black>Text</a> -> 링크 새페이지 실행

 

Ex:

        숭례문 위키백과 바로가기</a>

 

 

 

728x90
반응형
저작자표시 동일조건