텍스트 관련 태그들
- 텍스트를 덩어리로 묶어 주는 태그 >> 덩어리? block element!
- <h1>~<h6> 태그 (heading : 제목, 머리말 / 1이 제일 큰 주제나 제목을 나타내고 나머지는 보조해주는 제목)
- <p> 태그 : paragraph, 문단 텍스트 단락을 나타냄. 앞뒤 줄바꿈이 있는 텍스트 덩어리.
- <br> 태그 : 줄바꾸기 태그. 닫는 태그가 없다. <br><br> 두 번 써서 p 태그 처럼 보일 수 있지만 그러면 정보전달에 있어 무의미함.
- <hr> 태그 : horizontal, 수평 줄 삽입. 위의 내용이랑 다르니까 새로 시작하겠다 뭐 이런 의미? 닫는 태그는 없음.
- <blockquote> : 인용문, 다른 텍스트와 다르게 탭 키 눌러 쓴 거처럼 들여쓰기가 적용된다.
- <pre> : 소스에 표시한 공백을 그대로 나타나게 하고 싶을 때, 프로그램 소스를 웹 페이지 상에 그대로 표시하고 싶을 때 사용.코드를 입력하세요- 텍스트를 한 줄로 표시하는 태그 >> inline element
- <strong>,<b> : strong 은 텍스트를 강조! 해서 굵게 만들고 싶을 때 사용, bold는 키워드에 단순히 굵게 표시하고 싶을 때 사용.
- <em>,<I> : em, emphasis 텍스트를 이탤릭체로 강조! 하고 싶을 때 씀, i는 그냥 키워드에 단순히 이탤릭체 쓸 때 사용.
- <q> : quote, 인용 내용 표시하는데 블록코트와는 다르게 줄바꿈 없이 다른 내용과 함께 한 줄로 표기되고 인용 내용에 따옴표(" ")가 붙는다.
- <mark> : 형광펜 효과
- <span> : 줄바꿈 없이 영역 묶기, 의미는 없는 태그 (반대 : div)
-<ruby> : 아몰랑- 목록을 만드는 태그
-
ul, ol 태그와 li 태그 (부모자식 관계의 태그임)
-
ul : unordered list
-
ol : ordered list
-
ol tag 에서의 속성 : type, start, reversed (css에서 적용하는게 굿탱)
<ul>
<li>
<ol type="a"> <!-- 타입의 속성이 소문자 a 일때, a,b,c,d 순으로 매겨짐 -->
<li>사과</li> <!-- 디폴트 값은 숫자 1, 속성 값은 a, A, Ⅰ, 로마자 소문자 이렇게 있다. -->
<li>배</li>
<li>치킨</li>
</ol>
</li>
<li>
<ol start="3"> <!-- 타입의 속성이 start 이면 기본적으로 숫자 1부터 시작하는데 가령 3으로 한다면, -->
<li>사과</li> <!-- 3.사과 4.배 5.치킨 이런 순으로 표시된다. -->
<li>배</li>
<li>치킨</li>
</ol>
</li>
<li>
<ol reversed> <!-- 3.사과 2.배 1.치킨 이런 순으로 표시된다. -->
<li>사과</li>
<li>배</li>
<li>치킨</li>
</ol>
</li>
</ul>-
dl, dd, dt 태그 : Description list(조상), Description title(부모), Description data(자식)
-
설명 목록을 만드는 태그이며 하나의 목록을 dl로 감싸 주고 여러 가지의 dt 가 있고 각각의 dt 에는 여러 개의 dd 태그를 가질 수 있다.
- 표를 만드는 태그 - row(행), column(열), cell(행과 열이 교차하는 지점)
- <table>,<tr>,<td>,<th> ; 표에 행추가 하는거는 <tr>, <td>와 <th>는 똑같이 내용은 같게 써지지만 <th>는 표에서 제목 셀, 굵게 써지고 셀의 중앙에 배치되게끔 해준다.
- <td colspan="합칠 셀의 개수">내용</td>, <th rowspan="합칠 셀의 개수">내용</th> : 머릿속에 표를 떠올리며 상상해 보삼..
- <caption>표의 제목</caption> : 표의 윗부분에 제목이 오고 가운데 정렬이다. <table> 태그 바로 다음에 사용한다.
- <figure>, <figcaption> : 설명 글을 붙이고 싶은 대상을 (그게 표이든, 이미지, 동영상 적용가능) <figure>로 감싼 후 (여기서는 <table>을 감싸겠지), <figcaption>을 <table> 태그 시작 하는 곳 바로 위 또는 <table>태그 끝나는 곳 바로 아래 적용 할 수 있다.
- <thead>, <tbody>, <tfoot> : 표의 구조를 정의한다. (화면낭독기를 통해 시각장애인들도 표의 구조를 쉽게 이해할 수 있고 css구조 짜기좋다)
- <colgroup>, <col> : 여러 열 묶어 스타일 지정하기, 캡션 태그 뒤와 티알 티디 태그 전에 사용되어야 함. 단독으로 사용한 col의 갯수와 표의 열의 개수가 같아야 한다. 부모자식 관계.이미지와 하이퍼링크
- 이미지 : 웹에서 사용하는 이미지 형식 (git, jpg, jpeg, png)
- <img src="경로" alt="블라블라" width="100" height="100"> : 경로가 단일이거나 하위폴더가 있다면 경로를 모두 입력해야 한다. alt 는 이미지가 깨져서 안보일 경우 어떤 이미지다 텍스트로 대신 보여지게 된다. 폭과 높이는 이미지 크기 조정하는 거.
- <figure>,<figcaption> 태그 사용 : 이미지의 위 또는 아래에 설명글을 표시, 태그가 붙은 한 이미지가 옮겨져도 설명글은 그대로 표시된다.- 링크 만들기 (하이퍼링크, 링크라고 부른다)
<a href="https://blog.naver.com/blahblahblagh" target="_blank">
2-1. 한 페이지 안에서 점프하는 앵커 만들기
<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>
<a href="#앵커 이름"> 텍스트 또는 이미지 </a><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<h1>앵커 만들기</h1>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<ul id="menu">
<li><a href="#content1">메뉴1</a></li>
<li><a href="#content2">메뉴2</a></li>
<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
</body>
</html>코드를 입력하세요!!중요!! #'우물정' 자가 있으면 "anchor ID" 로 이동하라는 것이구나~ 라고 이해하면 쉽다.(나만)
- <map.>, <area.> 얘는 닫는 태그가 없다, usemap 속성 - 이미지 맵 지정하기
-
하나의 그림에 어디를 클릭하면 블로그로 연결되고, 또 다른 데를 클릭하니 다른 외부 사이트로 링크를 시켜주는 태그들
-
한 이미지 상에 여러 다른 링크를 만드는 것
<img src="images/cover.jpeg" alt="블로그주인" usemap="#맵이름">
<map name="맵이름">
<area shape="rect" coords="43, 770, 690, 1170" href="https://blog.naver.com/ylwsparkling" target="_blank" alt="블로그메인">
<area shape="circle" coords="330, 238, 41" href="http://주소" target="_blank">
</map>-
coords : 링크를 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정한다.
1) 원의 경우, 원의 중점인 좌표 (x,y) 와 반지름(r) 크기를 알아야 한다. 2) 사각형의 경우, 왼쪽 상단 좌표 (x,y)와 오른쪽 하단 좌표 (x,y) 를 알아야 한다. (x,y는 가로,세로) 3) 방법 : 윈도우는 그림판, 나는 맥북이라서 머리를 싸매다 발견한 사이트(하단) 이미지 넣고 지정하면 좌표 뜬다.이미지좌표 체크 (https://maschek.hu/imagemap/imgmap/)
이거 따라하면서 깨달은 사실.. 1) usemap="맵이름" 이렇게 쓰면 링크 절대 안뜸..반드시 "#맵이름" 이렇게 속성을 지정한다. 2) 좌표값은 반드시 , 찍고 띄어쓰기 한 후에 다음 좌표를 입력해야 한다.
.