03.HTML 완전기초 태그
안녕하세요 리듬입니다.
이번글에서는 저번글에 이어서 태그들 배워볼거에요.
일단 배웠던게 얼마 안되니까 배웠던거부터 다시 봅시다!
기본적인 태그 다시 알아보기!
빨간색 박스 <title>은 페이지 제목이 되구요!
<h1>~<h6>는 헤딩부분 본문 제목을 쓸때 사용합니다.
점점 작아지는데 6번째로 크다는 좀 아닌거같네요.. 밑에 글씨보다 작은데...
그리고 <p>태그는 문단을 구분해서 적을때 사용합니다. 자동 줄바꿈이 돼요!
그리고 <br>태그는 엔터같은거죠!
다음은 글씨형태를 바꿔주는 태그네요.
<hr>태그는 밑에 선 보이시죠? 선을 나타냅니다. <br>태그처럼 끝태그는 필요없습니다!
근데 <b>와 <strong> 그리고 <em>과 <i>는 똑같아보이죠?
겉으론 같아보이는데 의미가 있다고 합니다.
<i>태그와 <b>태그를 사용하면 겉으로 보았을때 굵은 글씨와 이탤릭체로 보이기만 하구요.
<em>태그와 <strong>태그를 사용하면 겉으로 보았을때 굵은 글씨와 이탤릭체로 보이고
또 음성으로 읽어주는 도구들이 있잖아요? 거기서도 강조를 해서 읽어준다고 합니다.
같은 줄로만 알고 있었네요..!
<mark>태그는 텍스트에 마킹효과가 돼구요.
<del>태그는 삭제된 태그 표기시 사용하구요. 썼던 글을 다른 내용으로 바꿀때 사용하죠. 이렇게..
<ins>태그는 삽입된 텍스트에 사용되구요.
<address>태그는 작성자의 주소나 연락처를 나타낼때 사용합니다. 보통 맨밑에 쓰죠!
다음은 주석인데요.
주석은 <!-- 주석내용 --> 이렇게 사용합니다.
주석은 웹페이지에 영향을 주지않습니다! 주석에 설명이 되어있죠?
저런식으로 주석에 설명을 해놓는거에요. 다른사람이 봤을 때 알 수 있겠죠?
작성자 본인이 나중에 못알아볼 수도 있기 때문에 적어놓는게 좋습니다!
나중에 CSS도 배울텐데 <style>안에서는 /* */주석을 사용합니다.
나중에 CSS 배우면서 자연스럽게 쓰게 될거구요!
그리고 태그안에 태그를 사용할 수 있어요.
위에 보시면 <p>태그안에 <b>태그와 <font>태그가 사용된걸 볼 수 있어요.
그런데 <p><b></p></b> 이런식으론 사용할 수 없습니다.
나중에 사용된 태그를 먼저 닫아줘야해요(?)
위에처럼도 가능하구요!
아! 그리고 <font>태그는 글씨의 크기,색,글씨체를 변경할 수 있어요.
<font> 태그 안에 size,color,face 이렇게 있잖아요? 얘네들을 속성이라고 합니다.
그 옆에 15나 "blue"같이 값을 주는데 그 값들을 속성값이라고 하구요!
태그마다 속성이 있는게 있고 없는게 있어요.
하나의 태그가 여러개의 속성을 가질 수도 있습니다. 위처럼요!
<body>태그에서 사용할 수 있는 속성이에요.
bgcolor 속성은 배경색을 넣어줍니다. 저 잘라놓은 부분만 오렌지색이 된게 아니구요! 다 바뀐거에요.
그리고 위아래 다른건 속성값인데 저렇게 blue나 red black white 이런식으로 써도 되고
밑에처럼 색상코드로 속성값을 줄 수도 있습니다.
위에는 <body>태그의 background 속성인데요. 배경에 사진을 넣을 수 있습니다.
보시면 속성값에 "image/imagesample.jpg" 이렇게 되어있는데요. 이건 이미지가 있는 경로에요.
상대경로라고 하는데요!
위에 보시면 html폴더안에 image폴더와 작성한 test.html파일이 있습니다.
그리고 image폴더안에 imagesample.jpg가 있구요.
"image/imagesample.jpg"라는건 작성한 html파일 기준에서 이미지가 어디있는지
경로를 나타내는거에요. 만약 test.html이 html폴더밖에 있으면
경로는 "html/image/imagesample.jpg"가 됩니다.
반대로 이미지가 밖에 있으면 어떻게 할까요?
html파일이 test폴더안에 있고 이미지가 폴더 밖에 있죠?
html파일 기준에서 보면 이미지는 상위폴더에 있는거에요.
그래서 경로를 "../imagesample.jpg" 라고 해줍니다. ..이 상위폴더를 뜻해요.
폴더에 빨간박스처럼 화살표가 위를 가리키는게 있잖아요! 저걸 누르면 상위폴더로 가듯이
.. 표시가 상위폴더를 말합니다. ..이 있으면 저걸 누른거라고 생각하시면 됩니다.
상위폴더로 갔는데 또 상위폴더가 있으면 "../../image.gif" 이렇게 사용합니다.
절대경로는 "file:///C:\/Users/pc1/Desktop/html/images/bgimg/imagesample.jpg"
처럼 최상위부터 경로를 설정해주거나
"http://도메인/image/imgsample.jpg"> 이런식으로 그 사이트에 있는 폴더의
이미지 경로를 설정할때 사용하는데요.
보통 상대경로를 많이 사용합니다.
그리고 align 속성이 있는데요.
[출처] 상대경로와 절대경로란? (디자인 플러스) |작성자 아이팡
이 속성은 정렬할 수 있게 해주는데요. 위처럼 꼭 <p>태그나 <h1>태그에서만 쓸 수 있는게 아니에요.
나중에 더 배우게 되면 아마 자연스레 생각이 날거에요.
이번 글은 여기서 마치구요!
작성을 하다보니 뭐부터 어디부터 어떤것부터 작성을 해야하는지.. :(
너무 조잡하게 쓰고있는 느낌..? 정리가 잘 안되는 느낌이 많네요..
글 하나 작성할때 2~3가지씩만 정해놓고 해야할 거 같습니다!
다음글에서 뵙겠습니다~
:)
'HTML&CSS' 카테고리의 다른 글
| 02.HTML 에디터 설치와 완전기초 feat.서브라임텍스트3 (0) | 2017.07.27 |
|---|---|
| 01.HTML 초보 완전기초 (0) | 2017.07.26 |
02.HTML 에디터 설치와 완전기초 feat.서브라임텍스트3
안녕하세요! 리듬입니다.
이번 글은요. 저번글에 이어서 HTML 완전기초입니다.
일단 먼저 에디터를 설치해볼건데요.
HTML 에디터는 여러가지가 있어요.
에디터가 뭐냐하면 저번글에서 아무것도 없는 상태에서는 메모장으로 했고
저 같은 경우에는 서브라임텍스트3 라는 에디터로 문서작성을 했지요!
다른거는 드림위버나 notepad++,에디트 플러스 등등 많습니다!
저는 개인적으로 서브라임텍스트가 깔끔해보이고 좋더라구요.
그래서 설치하는 방법 알려드릴게요!
서브라임텍스트 3 설치하기!
일단 링크로 들어갑니다. 링크!
운영체제에 맞는걸로 다운로드 받아주세요~
다운로드가 다 되었으면 설치파일 실행해줍니다.
Next - Next - Next - Install - Finish
끝입니다.
바탕화면에 아이콘이 없으면 시작에 있으니 찾아서 실행시켜주세요.
그러면 위같은 창이 뜨구요! 바로 위에 Preference - Setting 눌러줍니다.
위 빨간 부분에 밑 첨부해놓은 텍스트파일 받아서 복붙해주세요!
이거슨세팅.txt시작하기전 간단한 세팅입니다.
복붙하시고 Ctrl + S 로 저장해주세요. 그러면 세팅까지 끝입니다.
그리고 위처럼 따라가시면 태그에 따라 글씨색이 바뀌는데요! 테마라고 하면 될거같네요.
밑에처럼 배경색과 글씨색이 바뀝니다.
한번씩 다 써보시고 맘에 드시는걸로 하시면 될거 같습니다.
설치와 실행은 다 끝났구요.
이제 완전기초 조금씩 배워보겠습니다.
저번글에서는 기본구조와 태그 몇가지 배웠습니다.
기본적인 태그들 먼저 알아야할거 같네요.
기본적인 태그들 알아보기!
위에 <meta charset="UTF-8"> 이라는 태그가 있습니다.
HTML태그들을 사용해서 HTML문서를 작성을 하면
저희가 익숙하게 사용하고 있는 웹브라우저에서 표시가 되어야하죠?
그때 인코딩작업을 하게되는데 그 HTML문서가 어떠한 언어로 되어있는지 알 수 있어야해요.
문자코드셋이라고 합니다!
저 위 태그 없이 코딩을 하면 한글이 깨져보일 수가 있습니다.
아마 UTF-8이 모든언어 표기가 될거에요....
메모장으로 저장할때도 볼 수가 있어요.
메모장으로 코딩할땐 저장시 인코딩을 UTF-8로 저장해주는게 좋습니다.
그리고 휴먼랭귀지라는게 있는데요.
lang은 language, ko는 korean 이에요.
이게 뭐냐하면 '이 문서 콘텐츠는 한국어로 되어 있다' 라는 뜻이 돼요.
외국사이트나 네이버같은데 들어가셔서 Ctrl + U눌러보시면 익스플로러는 아래에,
크롬은 새창으로 뭐가 길게 뜰거에요.
그게 코드인데요. 다른거말고 <html>부분을 찾아보시면 대부분 휴먼랭귀지가 있을거에요.
bbc홈페이지랑 네이버 홈페이지 소스 첫부분이에요. 저런식으로 되어있지요~
en이니까 영어겠죠? 독일은 de로 되어있네요.
확인해보고싶으시면 해외 사이트 들어가셔서 확인해보세요!
마땅히 없다면 해외 축구클럽 홈페이지가 있습니다...
에디터 설치글을 쓰다보니 길어졌네요..
다음글에서 이어가야할것 같습니다..
다음글부터는 제대로 태그부터 차근차근 조심조심 사뿐사뿐 배워보도록 합시다!
다음글에서 뵈요~
:)
'HTML&CSS' 카테고리의 다른 글
| 03.HTML 완전기초 태그 (0) | 2017.07.28 |
|---|---|
| 01.HTML 초보 완전기초 (0) | 2017.07.26 |
01.HTML 초보 완전기초
안녕하세요! 리듬입니다.
글을 정말 오랜만에 쓰는것 같네요.
이번에 쓸 글은요! 웹프로그래밍의 기초단계인
HTML에 대해 알아보려고 합니다.
HTML을 배우면서 CSS도 배울거구요! 그러면서 자연스럽게
자바스크립트도 갈 수 있지 않을까 생각해보고 있습니다.
가장 먼저 HTML이 뭔지 알아보고 갑시다.
HTML은 그냥 쉽게 말해서 웹페이지를 만들 수 있는 언어에요.
굳이 영어를 보면 Hyper Text Markup Language의 약자에요.
Hyper Text는 단순한 문자가 아닌 다양한 표현이 가능한 문서구요.
Markup Language는 표시하는 언어라고 할 수 있겠습니다!
네이버 같은것들이 웹페이지로 이루어진 사이트구요!
HTML문서는 약속된 HTML태그로 이루어져 있습니다.
태그가 뭐냐하면요! <h1> Heading </h1>
위에 <h1>과 </h1> 처럼 꺾쇠기호로 이루어진 애들을 태그라고 합니다.
시작태그는 <h1>이구요~ 끝태그는 </h1>이구요!
HTML의 기본 구조를 보면
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> <h1>Heading</h1> <p>paragraph</p> </body> </html> | cs |
위처럼 쓸 수 있는데요!
머리와 몸통이 있죠? 머리와 몸통이 html 안에 있구요. 기본 구조입니다.
먼저 맨위에 <!DOCTYPE html> 는요. 독타입 선언이라고 합니다.
HTML문서의 종류가 여러가지가 있는데요!
HTML 2.0 , HTML 4.01 , XHTML 1.1 , HTML5 대충보면
이런식으로 종류가 있습니다.
HTML5가 가장 최신 버전이구요.
HTML5의 경우가 위처럼 <!DOCTYPE html> 이런식으로 작성합니다.
다음으로 와서 <html>은 html문서의 시작이죠!
그 다음은 <head>입니다. 말 그대로 html문서의 머리부분이에요.
<title>부분은
위 부분이 됩니다.
그리고 <body>는 html문서의 몸체부분이 되겠죠?
위처럼 되구요!
<h1>은 보통 제목에 쓰입니다. 신문같은걸 보면 가장 크게 적혀있는 제목이 있죠?
그런거라고 생각하시면 됩니다. <h1>부터 <h6>까지 있는데요.
뒤로 갈 수록 글자크기는 작아집니다.
그리고 <p>태그는 단락을 적을때 사용합니다.
자동으로 줄바꿈이 돼요. <p>태그를 안쓰고 줄바꿈을 하려면 <br>태그를 사용하면 돼요!
그리고 중요한거는! 시작태그가 있으면 끝태그가 꼭 있어야한다는거에요.
<html>로 시작해서 </html>로 끝내야하구요!
물논 맨위 독타입선언처럼 안쓰는것도 있습니다..
몇개 없어서 나올때 보시면 잘 기억하실 수 있을겁니당!
아! 그리고 처음하시는분들은 메모장에 쓰시면 됩니다.
다음글에서 HTML 에디터 알려드리겠습니다.
메모장에 위처럼 쓰시고 저장하실때 파일명.html 혹은 파일명.htm 이렇게 저장해주시면 됩니다!
보통 .html 이런식으로 많이 쓰는것 같더라구요!
일단 완전 기초글은 여기서 끝내도록 하겠습니다.
다음글도 아마 완전 기초글이 될 것 같네요.
계속 완전 기초글일지도..?
네?
다음글에서 뵙겠습니다!
:)
'HTML&CSS' 카테고리의 다른 글
| 03.HTML 완전기초 태그 (0) | 2017.07.28 |
|---|---|
| 02.HTML 에디터 설치와 완전기초 feat.서브라임텍스트3 (0) | 2017.07.27 |
