지지나

HTML - 기본태그/ 이미지 태그/ 목록 태그/ a 태그 본문

기획자의 프로그래밍 걸음마/HTML, CSS

HTML - 기본태그/ 이미지 태그/ 목록 태그/ a 태그

Gygyna 2020. 7. 6. 12:25

내일배움카드로 신청한 HTML/CSS 수업 복습한 것을 적어보려고 합니다. 

국비지원으로 운영하는 강의 질이 그렇게 좋지는 않다는 소리도 많이 들었으나, 수강만족도 위주로 강의를 선택하니 강사님도 괜찮고 수업의 질도 훌륭하다고 생각한다. 

 

주말에 점심시간을 제외하고 6시간짜리 강의라 복습이 꼭 꼭 필요함! 

 

우선 HTML 제일 기본 탬플릿부터 만들었다. 

 

<!DOCTYPE HTML>  → 해당 문서가 HTML5 로 작성되었다고 선언하는 태그
<html>  → HTML 문서의 시작과 끝을 알리는 태그
 <!-- 문서의 정보 -->  
   <head>  → HTML 문서 서문의 시작과 끝을 알리는 태그
   <title>문서의 제목</title>
   <meta charset="UTF-8"/> 
   </head>
   <body>  → HTML 문서 본문의 시작과 끝을 알리는 태그
     <!-- 문서의 정보 -->
   </body>
</html>

 

<!-- 내용내용내용 --> 은 HTML에서의 주석 처리 이다. 

<meta> 태그는 HTML 문서의 한 줄 요약, 키워드, 저작권 등 문서의 특징을 작성하며, 닫힌 태그가 없다. 

 

HTML 기본 태그와 이미지 태그

<p></p> 문단태그로 텍스트와 이미지가 들어갈 수 있다.  

 

우리가 일반적으로 엔터를 쳐서 만드는 것은 <br/> 태그인데 꼭 필요할때 쓰는 것은 좋지만 많이 사용하면 중요한 내용이 연결되어야 하는데 자꾸 끊기므로 장차법(장애인차별금지법)상 좋지 않다고 한다. 

&nbsp; 띄어쓰기

html에서 띄어쓰기는 한번만 인식하는데, 여러 번 띄어쓰기 하고 싶을때 사용한다.

 

 

이미지를 쓰려면 연결하는 경로가 필요하다. 절대경로와 상대경로 두 가지가 있는데, 우리가 쓸 것은 상대경로이다! 
1, 절대경로: ex)웹주소 네이버처럼 고정된 주소이며, 기준이 변하지 않는다.   
2. 상대경로: html/css 문서를 기본으로 했을때 이미지가 어디에 있는지 찾는 것이다. 

 

html 문서와 이미지 파일의 위치에 따라 이렇게 달라진다.

./ 현재 문서와 이미지 파일이 같은 폴더 안에 있다
../ 상위 폴더
/ 하위 폴더

 

이미지 파일이 저장이 되어야 html 문서와 연결이 되어서 속성으로 가지고 올 수 있다. 나는 이미지랑 html 문서를 같은 폴더에 저장했으므로 src="./이미지 파일명" 으로 가지고 올 수 있었다. 

 

유저도 그림을 읽으려면 title 속성값 사용할 수 있다. 그럼 이미지에 마우스를 가져다 대면 이미지 설명이 보인다.

 

 

alt 는 컴퓨터는 읽지만 유저는 읽지 못하며, 그림을 인식할 수 없는 경우 설명을 해주는 것이다. 2000년대 초중반에 간혹 이미지 엑박 떳을때 글씨보였던 경우가 이것이다. 

 

한번쯤 봤을법한 이미지

 

목록태그와 <a> 태그로  하이퍼링크 연결

리스트 태그에는 순서가 있는 Ordered List, <ol> 태그와 순서가 없는 Unordered List, <ul>태그, 사전형 Description Lists <dl> 태그 3 가지가 있다. 

<ol>과 <ul> 태그의 경우 그 안에 내용 목록을 <li>로 표기한다. 

 

 

사전형(정의형) 리스트는 아래에서 해 보았다. 대상을 주고 거기에 해당하는 상세 설명을 기재한 것 이라고 보면 된다. 

 

 

Anchor의 약자인 <a> 태그를 이용해 특정 페이지로 이동할 수 있는데 다음과 같이 쓴다. 

 

 

title은 위에서 설명했고, target="-blank" 를 사용해 클릭 시 새 탭에서 페이지를 연결할 수 있도록 하는 속성이다. 

 

복습은 계속된드아..!

'기획자의 프로그래밍 걸음마 > HTML, CSS' 카테고리의 다른 글

CSS - 부모자식 관계, 형제 선택자, 이미지 스타일링  (0) 2020.07.08
CSS - Type / Id / Class 선택자  (0) 2020.07.07
HTML - 표 만들기, 행/열 병합하기  (0) 2020.07.06
HTML - <input> 태그와 레이블 요소  (0) 2020.07.06
비전공자의 HTML 독학하기 feat. 생활코딩 - 기본문법 태그  (0) 2020.06.30
공유하기 링크
'기획자의 프로그래밍 걸음마/HTML, CSS' Related Articles more
Comments