개발하는 삶

[HTML] 홈페이지, 기초 문법 태그 본문

JavaScript, Vue.js, CSS/HTML

[HTML] 홈페이지, 기초 문법 태그

삶_ 2022. 6. 23. 12:43

홈페이지 관련

무료호스팅/유료호스팅

  • 닷홈 > 계정당 도메인 첫 1년 무료

W3C HTML 검사기

검색엔진 최적화

  • 내가 검색한 단어가 웹사이트 내용과 일치한다고 가정했을 때,
    • <body>태그속 단어보다 <title>태그에 검색단어가 있을 때 그 사이트가 먼저 노출된다.
  • <meta>태그는 짧은 간략내용이 노출된다
  • 페이지의 URL 구조를 관련있게, 알아보기 쉽게 간략하게 개선하면 더 좋다
  • 한가지 형태의 url로 도달 설정 : 301 리디렉션 
  • <head> <link rel="canonical" href="<http://localhost/1.html>"> </head>
  • (같은내용을 설명할때, 어떤 사이트를 url에 설정해도 똑같은 사이트가 뜸)
  • 사이트 내에서 이동할 때
    • 사용자가 url 일부를 지우고 접속했을때의 상황을 고려하기
    • 게시판 등으로 사용자가 알아보기 쉽게 사이트의 이동경로를 표시하기
  • 앵커 텍스트
    • 링크를 걸때 '이곳을 클릭하세요' 등의 텍스트, 이미지에 링크 첨부(알트태그)해서
    • 관련 링크로 이동하는 것을 의미
    • 페이지의 url은 대부분 앵커텍스트로 해놓으면 좋음
    • 사용자가 앵커텍스트라는걸 인지하는게 핵심 (css를 너무 많이 넣지말자)

 

 

단축키

  • 줄맞춤: Ctrl+A 모두 선택 -> Ctrl+K,F 차례로 클릭

 

 

 

기초 태그

<!doctype>

  • 현재 문서 유형이 어떤 언어로 작성된 웹 문서인지 설명.
  • <!DOCTYPE html> : 강조하기 위해 대문자로 쓰이기도 함

 

<html> ~ </html>

  • 웹 문서의 시작과 끝
  • <html lang="ko">
    • lang이라는 속성을 이용해, 문서에서 사용할 언어를 지정

 

<head> ~ </head>

  • 웹 브라우저에게 정보를 주는 태그.
  • <title>~</title> 
    • 웹 브라우저의 제목 표시줄에 표시됨
  • <meta>
    • utf-8 방식으로 문자 인코딩을 지정
      • 웹서버는 영어를 기본으로 함.
      • 한글을 화면에 나타내는 문자세트를 지정해야 함
      • <meta charset="utf-8">
    • 국내 검색 사이트는 포털 내 블로그를 중심으로 검색 해 <meta> 태그가 제 역할을 못함
      • <meta name="description" content="사이트 설명">
      • 구글 검색엔진에서 이해 가능.

 

<body> ~ </body>

  • 실제로 웹 브라우저 화면에 나타날 내용.
  • 대부분의 HTML 태그가 들어가는 곳.

 

<h1, h2..>

  • 글씨 진하게, 제목 표시하기.
  • <h1>~<h6>
  • 글씨가 커질수록 띄어쓰기 크기도 커짐

<p>

  • 텍스트 단락
  • <p>~</p>

<br>

  • 줄바꿈을 하려면 줄을 바꿀 위치에 넣어줌
  • 보통 같은 태그속성 사이에 넣어준다

<hr>

  • 수평 줄을 삽입

<pre>

  • 입력하는 그대로 띄어쓰기 포함 해 화면에 표시됨

 

 

<b> <strong>

화면 낭독기가 중요도를 파악하게 하려면 **<strong>**을 써 줍니다

  • <strong> 중요한 내용 </strong>
  • <b> 문서 글씨를 굵게 </b>
  • <strong> : 보이는 내용은 같은데, 음성으로 강조해야할때 사용
  • 중요도를 더 높이고 싶다면, <strong> 태그를 여러 번 겹쳐씀

<i> <em>

글씨를 비스듬히, 이탤릭체로 표시

  • <i> 이탤릭체로 표시할 텍스트 </i>
  • <em> 이탤릭체로 강조할 텍스트 </em>
  • <em> : 보이는 내용은 같은데, 음성으로 강조해야할때 사용

<ins> : 밑줄

<del> : 취소선

<code> : 코드를 표현할때

<sup>, <sub> : 위 첨자 / 아래첨자

<ruby>

  • 주로 동아시아 국가의 글자들에 주석을 함께 표기하기 위한 용도로 쓰임
  • <ruby>내용<rt>내용 바로 위에 올라갈주석</rt></ruby>

 

<mark>

  • 형광펜 효과 (텍스트 배경색이 노란색)
  • <mark> 텍스트 <mark>
  • 형광펜 효과 + 텍스트 색 변경 : <mark style="color:컬러이름;">텍스트</mark>

 

 

 

<iframe>

  • 웹문서 내에 다른 웹문서를 표시할 때 사용
  • <iframe src="a.html" name="링크대상이름" title="iframe의 제목"> : a문서에 있는 내용이 그대로 출력됨
  • <p><a href="구글주소" target="위의 링크대상이름과 같을때">google</a></p>
    • 만약 위와 이어지는 내용일때, 저 name과 target이 같으면 iframe 영역 내에 "구글주소"가 보여짐 

<span>

  • 웹문서의 한줄에 대해 inline형식으로 분할함 (span이 들어간 영역만)
  • 텍스트가 있는 내용 부분만 스타일이 적용됨. 줄바꿈 X
  • <span> 내용 </span>
<!DOCTYPE html>
<html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>테쉬폰</title>
</head>
<body>
    <h2>야외 텐트를 닮은 건축물 <mark style="color:aqua;">"테쉬폰"</mark></h2>
    <p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장,
        성당으로 활용됐습니다. 제주에서 점차 다른 지방으로 보금됐지만 현재 제주에만 건축물이
        남아있으며, <span style="color:rgb(111, 111, 179);">국내 근현대 건축사의
				한 페이지를 보여주는 가치를 지닌다</span>고 전문가들은 평가
        합니다.</p>
</body>
</html>

 

<div>

  • 줄바꿈 O. 텍스트와 텍스트가 포함된 줄의 스타일을 적용하고 싶을 때 사용.
  • 웹문서의 그 div영역 모두(그 줄 모두 박스 크기만큼을)를 가지고있다
  • div 박스들 가운데 정렬 
     margin:0 auto;  //위아래 공백은 0, 가로 중앙에 배치

 

 

인용 태그

<q> : " "안에 출력. 길이가 짧은 인용.

<blockquote>

  • 길이가 긴 인용구
  • 안으로 들여써진다는 게 특징
  • <blockquote> 내용 </blockquote>
  • 인용 문구/사이트를 삽입할 때 쓰임

<abbr> : 약어. 밑줄 점선이 그어짐.

  • <abbr title="어쩌구저쩌구...">HTML</abbr> -> 마우스 갖다대면 title=""안의 내용이 뜸

<cite> : 이탤릭체로 인용느낌 냄

<address> : 이탤릭체로 주소느낌 냄

 

 

 

 

<a>의 속성

 

href

  • 연결할 주소를 지정하는 속성
  • 문서링크/실제주소링크/이미지코드
  • href="#content1"
    • id="content"인 곳으로 이동해라(한 페이지 내에서, 그 id태그가 있는 곳으로 이동됨)

title

target

  • 링크를 클릭할 때, 창을 어떻게 열지 결정하는 속성
  • _blank  : 새 탭으로 열기
  1. _self   : 연결 문서를 클릭한 상태에서 엶(기본값)
  2. _parent  : 상위 창에서 엶 (창이 여러개 띄워져있을 때 맨 앞에서 띄워짐)

onClick

  • 현재탭에서 열기
    onClick="location.href='링크주소'"
  • 새탭에서 열기
    onClick="window.href='링크주소'"

 

 

 

<img>

  • 이미지를 만드는 태그
  • <img scr="image.jpg" width="400" height="500" alt="이미지" title="이미지">
    • alt = 이미지가 깨졌을때 보이는 이름
    • title = 이미지에 마우스를 댔을때 뜨는 이름
  • <img src ="링크"> 도가능 (검색했을때 링크에 해당되는 이미지를 띄워줌)
    • 이미지 링크첨부하기  : <a href="이동링크주소"><img src="이미지.png"></a>
저작자표시

'JavaScript, Vue.js, CSS > HTML' 카테고리의 다른 글

[HTML] form, input, select  (0) 2022.06.24
[HTML] ul, li, table  (0) 2022.06.23
'JavaScript, Vue.js, CSS/HTML' Related Articles more