[HTML]HTML 강의 1

Posted by 나눔인생 내브티
2018.07.19 05:53 웹 프로그래밍/HTML
티스토리 블로그를 운영하려다 보니 블로그의 스킨이 맘에 안들고 
스킨을 보자니 흰색은 화면이요 검은색은 글씨인지라

HTML을 공부하기로 시작 했습니다.
위 페이지는 학습&노트 이니 얻어가실 부분만 얻어 가시면 되겠사옵니다.

시작해보겠습니다.

HTML을 배우기 위해 태그(tag)라는 개념을 알아야 하며
쉽게 생각해서 옷을 뒤집어보면 나오는게 태그이다

태그에는 여러가지 특성 정보를 알아 보기위함인데
아래는 HTML 태그의 기본 형태이다

<태그 이름>

기본 사항이니 큰글씨로 표시해두겠다.

HTML문서는 큰 틀로 구성이 되어있다
<html></html>
<head></head>
<body></body>


빠른 이해를 위해 캡쳐했다
구글 홈페이지의 html값을 확인 해보면(F12를 눌러보자)

다른설정값과 같이 나온것도 있지만 
큰 틀은 눈에 보인다.

<html></html> : HTML문서 시작과 끝을 알리는 태그
<head></head> : html문서의 정보를 담는 곳
<body></body> : HTML의 기능을 수행하며 복잡할수록 양이 많아짐

내용은 저러하다

html의 태그는 상당히 많다
블로그에서는 어느정도 담겠지만 
HTML이 업무에 필요하다면 책한권 사는걸 추천드린다

1. 글자 관련 태그

<b> 내용</b>: 글자를 두껍게 표현
<i>내용 </i> : 글자를 기울여서 표현
<u>내용</u> : 글자 아래 밑줄 표현
<del> 내용 </del> : 글자 취소선 표현

<mark>내용</mark> : 형광표시 (아래 그림처럼)





2. 단락, 줄바꿈

<p> </p>: 한줄 빈줄 추가
<br> : 엔터로 한번 쳤을때 줄바꿈




3. 정렬 관련 태그

<align = "속성값"> : 위 태그를 통해 왼쪽, 오른쪽, 중앙, 양쪽 맞춤으로 정렬
속성값에 left, right, center, justify를 사용 할 수 있다




4. 이미지 태그

<img src = "파일 위치"> : 파일위치 명을 적으면 해당 이미지가 첨부된다
<img src = "파일 위치" width ="300" height = "300"> : 첨부된 파일의 크기를 제어
<img src = "파일 위치" border = "10"> : 첨부된 파일의 테두리를 지정


5. 테이블 태그



위 같이 테이블을 만들기 위한 태그들이다

<table>을 반드시 명시해야 테이블이 가능하다
<tr> : 행
<td> : 열





위 코드를 실행하면 아래와 같이 실행 결과가 나옵니다.
쉽게 생각해서 <tr></tr>로 묶여 있으면 같은 행입니다.



5. 링크 태그

<a href = "주소"> 블로그 </a> : 블로그를 클릭 하였을 때 "주소"로 이동한다.

<a href = "주소" target="_blank"> 네이버 접속 </a> : 네이버 접속을 클릭하면 새로운 탭에 주소가 열린다

<a href = "주소" title="해당 주소로 이동"> 네이버 접속 </a> : 
네이버 접속이라는 글자에 마우스를 올리면 문구가 표시


예시)




위 같이 네이버 접속이라는 글자에 링크가 걸린걸 볼 수 있다.

'웹 프로그래밍 > HTML' 카테고리의 다른 글

[HTML]HTML 강의 1  (0) 2018.07.19
이 댓글을 비밀 댓글로

티스토리 툴바