HTML 자주쓰는 태그 모음 img(사진), 상대경로, 절대경로, table(표), a(하이퍼링크), ul&ol(목차)

https://www.advancedwebranking.com/html

에서 통계적으로 32가지의 태그를 보통 사용한다고 한다.

the average web  사이트

어떤걸 제일 먼저 공부해야할지 알 수 있다.

---

이미지 태그, a태그(하이퍼링크), 상대경로와 절대경로

이미지 태그

<img src="cat.jpg" title="이것은 아주 귀여운 고양이랍니다." alt="귀여운 고양이 사진">

• src : 이미지의 경로
• title : 이미지위에 마우스 올렸을 때 보이는 것
• alt  : 이미지가 안보일 때 출력할 내용(권장 속성)

 크기 지정

< img src = "cat.jpg" width = 100 height = 500 >  

• 가로, 세로를 지정하지 않으면 사진 원본크기로 출력
• width : 가로 크기 지정
• height : 세로 크기 지정 

src 위치 경로 설정할때 주의사항

<img src=“1.jpg”> 같은 폴더 일 때

내가 만든 웹문서와 같은 위치 에 있게 해야 한다. 그렇다면, 만약 다른폴더면 위치를 어찌해야 할까?

 

파일을 읽고, 쓸때 '지금 작업 위치'를 기준으로 한다.

 

---

상대경로와 절대경로

[출처] [CS 기본 상식] 절대 경로와 상대 경로|작성자 THIS PATH

 

상대경로 : 상대 경로는 작성 중인 파일을 기준으로 참조하는 파일의 상대적인 위치

- 상위 폴더명이 바뀌더라도 현재 작성중인 파일을 기준으로 삼기 때문에 유동적으로 경로를 찾을 수 있기 때문에 로컬 작업 하기 편하다.

- 절대경로에 비해 간결한 작성

- 불가피하게 절대 경로를 사용해야 하는 상황을 제외하고는, 왠만하면 상대 경로 사용을 권장한다.

- 라이브서버 쓰려면, 상대경로 지정을 해야한다.

 

 절대경로 : 절대 경로는 최상위 디렉토리(users)에서 시작하는 고유 경로이다.

 

출처:http://statkclee.github.io/xwmooc-sc/novice/shell/01-filedir.html

위 그림에서 최상위 디렉토리, root directory는 'users'이다.

​

위치 표기 법

•        / : 최상위 디렉토리(root directory)로 이동한다. 절대 경로를 사용할 때 가장 먼저 사용한다.
•       ./ : 현재 디렉토리를 의미한다. 상대 경로를 사용할 때 가장 먼저 사용한다.
•       ../ : 상위 디렉토리로 이동한다.

​Windows를 사용할 때에는 /(슬래시)를 \(역슬래시)로 바꾸어 사용하면 된다.

 

현재 위치가 original이라면?

절대 경로로 표현 : < /users/backup/original >

상대 경로로 < ./ >

 

만약 original에서 pnas_final의 text.txt라는 파일에 접근하고 싶다면,

절대 경로 :  < /users/backup/pnas_final/text.txt >

상대 경로 : < ./../pnas_final/text.txt >

 

---

 

 a 태그의  기능

하이퍼링크란?

한 웹문서에서 다른 웹문서로 이동하기 위한 기능(웹문서간 이동)

< a href = "이동할 웹 문서의 이름" target = "_self" > 이것을 누르면 이동한다. </a> 입력시

 

• href 속성은, 웹문서의 이름 뿐 아니라 홈페이지의 주소도 입력할 수 있다.
•  target 속성은,  _self  : 같은 창에서 문서가 이동  /  _blank  : 새로운 창 웹문서 띄움

---

각종 서식 적용 방법과 표(테이블)만드는 법

서식 : 문서를 꾸미는 형식 (글자 크기, 글자의 색, 글자의 정렬 등을 조절하는 법)

 

글자의 색을 변경

style = " color : red ; "

div가 span보다 큰 단위 / span 안에 div를 넣는 것은 잘못된 것!

<div style="color:red;"> div 전체 레드 ‘는 무슨색이야?!’는 고로 레드가 된다.

색상은 네이버 html 색상표 검색하면, 다양한 색상 고르기 가능!

 

글자의 크기 변경

style = " font – size : 2em ; ” 속성 지정

*font-size 속성은 1em이 기본값이다.

2em 은 기본크기의 2배라는 뜻 (0.5em 50% 작아진 크기, 3em 3배)

 

글자를 정렬

style = " text-align : center ; " 속성 지정

center 는 글자 가운데 정렬

left, right, center 값 지정 가능

 

여러 서식 동시 사용 가능

<div style="color:red; font-size:2em; text-align:center;">

 

 

---

표를 만드는 방법

• <table> 테이블 > 표를 만드는 태그
•  <tr>은 가로줄

• <td>는 가로줄 안에 칸을 만드는 태그
• 밑의 두 속성은 td의 속성
• colspan 속성 > 가로 칸들이 합쳐짐
• rowspan 속성 > 세로 칸들이 합쳐짐

*가로줄 tr태그 한 줄씩 작성한다. 순차적으로

 

• <border> 경계선
• table border=1  : 굵기가 1인 경계선이 만들어진다.

경계선을 만들지 않으면 글자 나열한 듯 보인다 = 경계선을 지정해줘야 함

 

• cellspacing  경계선 사이의 여백 크기

cellspacing = 0 왼쪽 / cellspacing = 10 오른쪽

• cellpadding 칸 안에 여백의 크기

<table border=1 cellspacing=0 cellpadding=50>

 

• caption : 표의 제목

<caption> caption은 표의 제목! </caption>

table 태그는 하나의 캡션 태그만 가질 수 있다. table 태그 바로 다음에 써줘야 함.

기본적으로 상단 가운데 정렬로 뜬다.

<caption style="text-align:left;"> 왼쪽 정렬 됨

 

 

• thead 태그

 table의 header, 즉 제목 행을 하나로 묶기 위해 사용

• tfoot 태그

 table의 footer, 즉 마지막 행을 하나로 묶기 위해 사용

 

왜 묶어주는가?

=> 첫행, 마지막 행을 고정하고 table의 내용만 스크롤하기 위해서

예시로 카카오톡의 친구목록을 스크롤 하기 위해서는 tbody(내용)만 움직여야 한다.

thead와 tfoot이 고정되고 tbody만 움직일 수 있도록!

 

 

• th 태그

강조하고 싶은 셀의 텍스트를 굵게(bold) 강조해줌

> 보통 제목 셀로 표시하는 역할 = thead 태그 안에 사용

그리고 자동 중앙 정렬 기능

 

제목, 목차 관련 태그

• li (list)

기본적으로 항목은 li태그를 쓴다.

 

• ul (unordered list)

순서가 없는 항목들을 하나로 묶어 준다. 글머리 기호처럼

 

• ol (ordered list)

순서가 있는 항목들을 하나로 묶어 준다. (1,2,3)

• type=“1”이 기본값, 글기호를 지정하는 태그 (1,A,a,I,i 다섯가지 값이 존재)
• strat=“2”> 시작값 설정(2부터 시작하라)
• resered 역순으로 진행

<ol type="A" start="2" reversed>

<li>a</li>

<li>b</li>

</ol>

위의 역순 예시 그림

<ul><ol> 서로 안에 중첩 여러개 가능함!

 

• nav 태그

다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 navigation(네비게이션) 링크들을 하나로 묶을 때 사용한다.

 

• a태그로 응용 가능하다.

<li><a href="#">home</a></li>

=> li 태그로 a 태그 감쌈 / home이 다른 화면으로 이동 가능해짐