[Web/HTML] 1. 태그와 속성

!!! NOTICE !!!
이 글은 Web의 이론을 다루고 있습니다!
학습한 정보를 제가 기억하고 추후에도 사용해두기 위해 기록해둔 내용입니다!

---

전부터 웹프로그래밍이 정말 인기가 많은 부류로
여러가지 강좌가 많이 올라왔었다.

최근들어 친구까지 회사에 입사하고나서 웹을 공부하고 있다고
소식을 전해왔다.

때문에 자기개발을 위해서
웹 프로그래밍을 기초부터 익혀보기로 했다.

추가로 항상 뜨문한 블로그에도
하루 기본 2시간씩 공부한 분량을 업로드 해보기로 했다.

 

*공부하면서 참고한 사이트
https://opentutorials.org/course/2039/10931

---

웹 프로그래밍의 공부 순서를 알아보자

웹프로그래밍이 무엇인지, 어떤 종류가 있는지 알아보고
순서를 정해서 공부해보기로 했다.

https://zooo.kr/fxbbs/f_view.php?i_code=smart&i_id=28

웹프로그래밍 효과적인 공부 순서-Zooo.kr

많이 들어봤지만 한번도 시도해본적이 없는 것,
처음 들어본 것,
공부했지만 까먹은 것, 기타 등등.

여러가지 부류를 알 수 있었고,
그 중에서도 기본중의 기본이 되는
HTML, CSS, 자바스크립트를 공부하기로 했다.

 

위에서 언급한 3가지는 웹디자인과 관련이 있는 부분이지만
프로그래머에게도 이 언어의 이해도가 필요하기 때문이라고 한다.

웹퍼블리셔가 디자인을 마치면 파일을 HTML, CSS로 쪼개서 프로그래머에게 넘겨주는데

이때, 넘겨받는 프로그래머 입장에서도 해당 코드를 이해해야 하기 때문이다.

*웹퍼블리셔 : 웹 디자이너가 디자인시안을 완성해서 psd파일로 넘겨준 것을 HTML로 코딩하고
프론트 엔드로 넘겨주는 직군.
현재는 웹 표준 양식, 접근성, 크로스 브라우징, 반응형 웹처럼 해야할 일이 많아졌다고 한다.
참고 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=dwitt&logNo=221637228557

추가로, 서버없이 PC에서 바로 결과물을 확인할 수 있으니
처음 배우는 종목으로 접근이 편하다고 한다.

---

HTML의 문법, 태그(Tag)

html의 모든 문법은 태그로 구성되어 있다.

어떤 기능이든 태그라는 형식으로 작성되서
태그로 끝나는 문법이다.

간단한 파일을 만들어서 시도해보자.

vscode(편집기)에서 .html 확장자로 끝나는 파일을 만들고
다음과 같은 문구를 써 넣었다.

우리 모두는 자신의 힘으로 발견한 내용을 가장 쉽게 익힌다.(도널드 커누스)

html 확장자로 만들어진 파일을 웹브라우저(뷰어)로 실행하면
다음과 같은 결과물을 볼 수 있다.

작성된 내용이 브라우저에서 출력되는 모습을 볼 수 있다.

당연하다. 단순 텍스트를 웹브라우저가 읽은 후에 실행시켰으니 말이다.
어떤 문법도 없이.

 

여기에 태그를 사용해서 위 텍스트에서 "자신의 힘"이라는 부분을 강조해보자.

<strong>태그는
문자를 강조해서 진하게 표시해주는 녀석이다.

우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.(도널드 커누스)

태그의 사용법은
시작태그(<strong>)와 닫히는태그(</strong>) 사이에
적용하고자 하는 데이터를 끼워주면 된다.

 

이번엔 위 텍스트 앞에 "오늘의 명언"을 추가해서 두줄로 출력할 것이다.

html은 단순히 데이터가 "오늘의 명언", "우리 모두는 블라블라"로 나눠있다고 해서
줄바꿈이 되지 않는다.

이런 줄바꿈도 태그를 이용해서 정의해주어야 한다.

데이터를 제목으로 처리하는 <h1> 태그를 사용해보자.
head의 약자이다.

<h1>오늘의 명언</h1>
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.(도널드 커누스)

데이터를 제목으로 지정해서
웹브라우저로 출력해보니 위와 같은 결과를 볼 수 있었다.

만약 제목을 더 작게 하려면 <h2>태그로 변경하면 된다.

 

위처럼 태그는 <>로 시작해서 </>로 끝나는 형식을 말하며
태그를 사용해야지만 웹브라우저에서 출력할 형식을 지정할 수 있다.

---

태그의 속성

단순히 태그를 사용하는 것만이 아니라 속성을 추가함으로써
태그를 조금 더 자세하게 활용할 수 있다.

 

위에서 작성한 코드에서 "도널드 커누스"에 링크를 달아주고
클릭하면 도널드 커누스의 위키피디아로 연결시켜주려고 한다.

<a> 태그는 해당 데이터에 링크를 걸어주는 녀석이다.

<h1>오늘의 명언</h1>
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.
<a>(도널드 커누스)</a>

참고로 편집기에서 줄바꿈을 한다고 해서
웹브라우저에도 줄바꿈이 되진 않는다.

해당 코드를 실행시켜 도널드 커누스를 클릭하면
아무런 반응이 없을 것이다.
어디로 연결해주어야 하는지 정보를 주지 않았으니 당연하다.

 

여기서 <a> 시작태그를 다음처럼 수정해주자.
a는 anchor의 약자이다. 직역하면 닻, 어딘가에 정박해있다던가 연결되어 있다는 뜻이다.

<h1>오늘의 명언</h1>
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.
<a href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4">(도널드 커누스)</a>

<a> 태그에 href 속성을 추가함으로써
도널드 커누스가 어떤 링크로 연결되는지 정보를 추가했다.

또, target 속성을 추가해서
새 탭에서 열리도록 정보를 주자.

<h1>오늘의 명언</h1>
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.
<a href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" target="_blank">(도널드 커누스)</a>

아까와는 다르게 새로운 탭에서 링크가 열리는 것을 알 수 있다.

 

이처럼 태그마다 정해진 속성을 추가하면
작동방식을 자세하게 지정할 수 있다.

또, 속성은 순서가 뒤바뀐다 해서 작동이 달라지진 않는다.
href 속성과 target 속성을 뒤바꾼다고 해서 결과가 달라지지 않는다.

 

html의 문법은
지금까지 정리한 "태그"와 "속성"이 베이스가 된다.

여기에 어떤 태그, 어떤 속성을 사용하는가,
어떤 식으로 사용하는가에 따라서 달라질 뿐이다.