본격적으로 HTML 공부를 시작해보자.
브라우저는 .html 의 확장자를 가진 문서를 보기 위한 도구이다.
그렇다면 html 문서를 작성하거나 편집하는 것은 어떻게 할까?
html 문서는 도구의 제약이 없다.
메모장, 비쥬얼 스튜디오 코드, 인텔리 J 등 어떤 도구를 사용해도 작성이 가능하다.
이때 좀 더 가독성을 높이기 위해 마크업 언어를 공부해야 한다.
마크업 언어(markup language) : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어
태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나
용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다.
바로 이 마크업 언어가 HTML(HyperText Markup Language)이다.
따라서 브라우저는 마크업 언어를 읽어주는 툴이다.
html을 공부하는 사람들을 위해 추천하는 사이트가 있다.
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
W3C가 만든 온라인으로 웹 기술을 배우는 교육용 웹 사이트이다.
* W3C(World Wide Web Consortium) : 인터넷을 위한 표준을 개발하고 장려하는 조직
인터넷을 위한 표준은 왜 필요한걸까?
사파리, 파이어폭스, 크롬, 인터넷 익스플로러 등 html을 해석하는
브라우저의 종류가 많기 때문이다.
크롬에서 <h1>제목</h1> 의 크기가 16p 크기로 뜨는데
사파리에서는 10p 크기로 뜬다면 사용자가 이용하는데 혼란이 생긴다.
이를 방지하기 위해 W3C에서 표준을 개발하는 것이다.
방금 <h1>제목</h1>이라는 말을 했는데
html에서 사용하는 여러 가지 태그 중 heading, 제목을 의미하는 태그이다.
<h1> ~ <h6>까지 있고 1에서 6으로 갈수록 글자크기가 줄어든다.
앞으로 하나씩 태그들을 차근차근 알아가 보자.
∨
∨
html 문서를 만들 때는 규칙이 필요하다.
오른쪽 아래 HTML이라고 적혀있는 걸 확인하고
화면에 html이라고 타이핑하면
자동완성이 가능한 3가지가 보인다.
이중에 html:5를 눌러주면 html의 기본 양식이 자동 완성된다.
아직 배우지 않은 부분을 제외하고 나면 이렇게 남는데
이게 html의 기본 양식이다.
탭을 쓰고 들여 쓰기 한 태그들은 html 태그의 자식 태그,
html 태그는 부모 태그라고 한다.
이때 처음 보는 것이 있을 것이다.
<!DOCTYPE html>
지금은 html5를 쓰지만 html4를 쓰던 시절이 있었다.
그땐 브라우저의 종류가 다양하고 해석하는 방법이 조금씩 다 다른 상태에서
W3C가 질서 정리를 하고자 html5 표준을 만들었다.
브라우저에게 이 html 문서가 html5 표준을 지킨
마크업 랭귀지임을 알려주기 위해 반드시 필요한 문구이다.
다음은 배열과 들여 쓰기가 엉망진창인 코드이다.
이걸 자동으로 예쁘게 정렬해주는 설정이 있다.
설정에서 format을 검색하면 상단에 Default Formatter라는 에디터가 있다.
이는 어떤 언어에 근거해서 정렬을 포맷하겠냐는 의미이다.
자신이 쓰는 언어에 맞게 설정하면 된다.
우리는 html을 사용할 것이기 때문에 HTML language features를 선택하면 된다.
그리고 아래 Format On Save에도 체크해준다.
이는 저장하면 자동으로 정렬해주는 아주 좋은 기능이다.
여기 html의 구조를 보면
head 부분과 body 부분이 나누어져 있다.
헤더와 바디라고 하는데,
바디는 우리가 그림을 그리는 영역이고
헤더는 바디를 설명하는 영역이다.
헤더는 왜 바디를 설명해야 할까?
헤더만 보고 문서가 필요한 문서인지 아닌지를 분류하기 때문에 헤더가 필요하다.
이때 바디를 데이터라고 하면
데이터를 설명하는 것을 헤더가 하고,
데이터를 설명한 요약본을 메타데이터라고 한다.
헤더는 나중에 다시 자세히 나올 것이므로 일단 바디 먼저 알아보자.
바디 안에 작성을 할 건데
이렇게 안녕을 줄바꿈을해서 타이핑하면 어떤 결과가 나올까?
줄 바꿈이 일어나지 않는다.
줄 바꿈을 하기 위해 쓸 수 있는 두 가지 태그가 있다.
첫 번째 <div></div> 태그이다.
브라우저에서 우클릭하고 검사를 클릭하면 html 창이 나오는데
<div>안녕</div> 코드 위에 커서를 올리면
해당 범위가 박스 모양으로 색칠된다.
div 태그의 범위는 행 전체를 차지하는 빈 박스 임을 알 수 있고,
행 전체를 차지하기 때문에 안녕이 다음 줄로 내려가서 찍힌 것을 확인할 수 있다.
이 차지하는 범위를 block 이라고 한다.
태그로 감싸져있지 않고 그냥 타이핑한 안녕의 범위는
자신의 크기만큼 차지하는 빈 박스 임을 알 수 있고, 이것을 inline 이라고 한다.
그렇기 때문에 아무런 태그 없이 안녕 2개를 타이핑했을 때
2개가 같은 줄에 나란히 나오게 됐던 것이다.
자신의 크기만큼 차지하는 빈 박스의 범위를 가지는 하나의 태그가 더 있다.
<span></span> 태그이다.
그냥 타이핑할 때와 똑같이 자신 크기만큼만 범위를 가지기 때문에
줄 바꿈이 일어나지 않는다.
줄 바꿈을 하는 두번째 태그는 <br/> 태그이다.
줄바꿈 전용 태그이고 어떤 값을 감쌀 필요 없이 혼자 쓰이는 태그이기 때문에
한 번에 열고 닫는다.
이렇게 혼자 쓰이는 태그가 또 하나 있다.
바로 구분선태그 <hr /> 이다.
다음으로 알아볼 태그는 목차를 그리는 태그 3가지이다.
첫째, 순서가 없는 목차 unordered list라 해서 <ul></ul> 태그이다.
둘째, 순서가 있는 목차 ordered list라 해서 <ol></ol> 태그이다.
<ul></ul>, <ol></ol> 태그 사이에 리스트들은 <li></li> 태그로 나열한다.
하이퍼링크를 나타내는 태그도 있다.
<a></a> 태그이다.
a 태그에 href라는 속성을 추가해 링크를 연결시켜준다.
href는 hypertext reference라는 의미로 자원의 위치를 의미한다.
다음은 문맥 사이의 공간, 단락을 나누는 태그 <p></p> 태그이다.
그냥 길게만 글을 쓰면 가독성이 떨어지게 된다.
이때 p태그를 사용해주면
줄 바꿈 뿐만 아니라 안녕과 하세요 사이의 공백이 생긴 것을 볼 수 있다.
이 공백을 margin이라고 한다.
margin이 뭘까?
아까 div 태그의 범위는 행 전체를 차지하는 빈 박스라고 했다.
이 박스와 글자 사이의 내부 여백을 padding이라고 하고,
박스와 박스 사이의 외부 여백을 padding 이라고 한다.
일단 이 정도만 알고 다음에 더 자세히 볼 것이다.
오늘 마지막으로 알아볼 태그는 <img/> 태그이다.
말 그대로 이미지를 불러오는 태그이고 감싸는 태그가 아니므로 한 번에 열고 닫는다.
img 태그는 src 속성을 통해 사진의 경로를 불러온다.
src는 source의 약자로 출처를 뜻한다.
여기서 이 속성들의 종류는 아주 많기도 하고 외울 필요가 없다.
Ctrl + Space Bar를 누르면 모든 속성 키들을 확인할 수가 있다.
이 키를 매직키라고 한다.
[출처]
https://cafe.naver.com/metacoding
메타코딩 : 네이버 카페
코린이들의 궁금증
cafe.naver.com
메타 코딩 유튜브
https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9
메타코딩
문의사항 : getinthere@naver.com 인스타그램 : https://www.instagram.com/meta4pm 깃헙 : https://github.com/codingspecialist 유료강좌 : https://www.easyupclass.com
www.youtube.com
