[HTML-CSS] Attribute, 인용문/목록/이미지 넣기/표/ 다른 링크 연결 태그

얄코님의

'제대로 파는 HTML & CSS 강좌-웹 개발 퍼블리싱 끝장내기' 강의를 들으며 정리해보고 있습니다.

지난 강의에선 Tag에 대해서 알아보았습니다.

이번 시간엔 태그들과 함께 사용되는 Attribute에 대해 정리해보겠습니다.

 

Attribute란? 

태그의 동작을 설정 및 제어함

 

인용문 관련 태그

<blockquote> 

: 안쪽의 텍스트가 긴 인용문 (들여쓰기한 것으로 보여짐)

cite 속성 : 해당 인용문의 출처 URL

<q>

: 짧은 인라인 인용문(따옴표가 보여짐)

cite 속성 : 해당 인용문의 출처 URL

<mark>

: 강조하는 부분 표시, 검색한 키워드 강조표시(형관펜으로 보여짐)

 

 

 

강의 예제)

 

<abbr>

: 준말/머릿글자 표시

title 속성 : 원래 이름 표시

 

강의 예제)

 

 

 

목록을 표현하는 태그

<ul>

: (unordered list) 

<li>

: ul의 자식 태그

 

<ol>

: (ordered list) 순서가 있을 때 사용.

<li>

: ol의 자식 태그

type 속성 : 

start 속성 : 시작 알파벳이나 숫자 정하기 가능.

 

 

용어와 정의 나열하기 태그

<dl> <dt> <dd>

: 사전처럼 용어와 정의를 나열할 때 사용. (dt와 dd 는 1대1 또는 n대n 대응 )

<dt>, <dd>

: dl의 자식 태그

 

강의 예제) 지금은 못생긴 상태지만 앞서 언급한 것과 마찬가지로 CSS로 처리하면 이뻐짐. 

 

이미지 넣기 태그

<img>

: 이미지 태그

src 속성 : 이미지 파일 경로

alt 속성 : 대체 텍스트

title 속성 : 툴팁 텍스트

툴팁 예시

 

절대 경로인 경우

• URL모두 입력.

상대 경로인 경우

• 해당 파일이 폴더 안에 들어있어야함.

이미지 해당 폴더에 저장.

만약 폴더 안에 있는 html파일에서 다른 폴더에 있는 이미지를 사용하려면?

폴더를 나간 후 해당 이미지 폴더로 이동. (.. 두번으로 나갈 수 있음.)

표 사용하기 태그

<table>

: 표 전체를 감싸는 태그

<caption>

: 테이블 제목 태그

<tr>

: 테이블 행 태그

<td>

: 테이블 데이터 셀

해당 CSS를 적용하여 표의 줄이 그어진 상태

<thead>

: 테이블 헤더

<tbody>

: 테이블 본문

<tfoot>

: 테이블 푸터

<th>

: 열 또는 행의 헤더

 

colspan 속성 : 열 병합

rowspan 속성 : 행 병합

 

다른 곳으로의 링크 태그

<a>

: 링크 연결 태그

href 속성 : 연결할 주소

target 속성 : 링크를 열 곳 옵션 (_self, _blank, _parent, _top)

 

이미지에 링크를 넣는 경우는?

 

<adress>

: 주소 및 연락처 포함 링크

 

연락처 같은 경우 핸드폰에서 클릭시 전화 연결. 이메일 링크 연결 가능.