[생활코딩][WEB1] HTML & Internet

군대를 전역하고 진로에 대해 갈팡질팡 하던때에, 개발자가 되고싶다는 생각을 하게 만든것은

다양한 컴퓨터 사이언스 과목에 대한 흥미도 있었지만, 역시 생활코딩 강의를 빼놓을 수 없다.

교과 과정에서 주어진 문제를 해결하는 정도로만 코딩을 해보았던 나에게,

생활코딩 강의는 개발이라는 분야에 눈을 뜨게 해주었다.

지금도 많은 사람들이 생활코딩을 통해 개발에 입문을 하고 있다.

백엔드 공부를 하느라 웹의 기본 문법들을 많이 까먹은것 같아서 다시한번 생활코딩을 정주행 하여

기본을 다지기 위해 정리를 시작하였다. (스프링 부트를 통해 html을 작성하고 확인하는 방향으로 했다.)
(소스코드)

1. 기본문법 - 태그

진하게 표시하기 : <strong> 태그

밑줄 치기 : <u>태그

위와 같이 태그는 중첩해서 사용할 수 있다. 위의 코드로 아래의 결과를 볼 수 있음!

 

 

강의 중 이러한 그래프를 제시해 주셨다. 쉽고 기초적인 것일 수록 그 중요성이 크다는 의미이다. 기초를 탄탄히 하고자 하는 현재 나의 공부 방향성이 틀리지 않았다는 것처럼 들려서 많은 응원이 되었다.

또한 페이지 소스 코드 보기를 통해 html코드를 구경할 수 있는 팁을 준 것도 입문자들에게 아주 유용한 것 같다.

2. h태그

h태그 뒤에는 1부터 6까지의 숫자가 올 수 있다.

h태그로 감싸진 텍스트는 일반적인 텍스트보다 조금 더 굵으며, 줄 바꿈이 이루어지고, 글자의 크기가 조절된다.

주로 제목을 나타나는데에 사용된다.

위의 결과만 보아도 h태그가 어떠한 역할을 하는지 쉽게 알 수 있다.

3. 개행

개행을 하는 태그에는 두 가지가 있다.

<br>과 <p>이다.

<br>의 경우 단지 한줄을 개행하는 역할을 하며, 닫히는 태그를 따로 두지 않아도 된다. 또한, 여러번 개행하고 싶다면 여러번 사용하여 원하는 줄만큼의 개행을 할 수 있다.

<p>의 경우 감싸고 있는 텍스트가 한 문단이 되도록 해주기 때문에

로 닫아주어야 한다. p태그의 경우 정해진 여백만큼만 개행하므로 br태그와는 차이가 있다.

+) css문법에 대해 살짝 설명해 주셨다. 태그에 css문법을 넣어 시각적인 효과를 주는 것이었다.

위의 경우 margin-top 값을 주어 윗 문단과의 여백을 늘리는 효과를 볼 수 있었다. (

태그의 여백 한정 한계를 극복시켜줌.)

따라서, 시각적인 문제는 css를 통해 해결할 수 있기 때문에, 태그를 사용할때는 그 용도와 의미를 더 잘 나타낼수 있는 태그를 사용하는 것이 올바르겠다.

4. 태그의 심화된 문법 : 속성

이미지를 넣고 싶을때 사용하는 태그 : <img>

이 태그만으로 img를 띄울 수가 없다. 어떠한 이미지를 띄울 것인지 지정해주지 않았기 때문이다. 이처럼 태그만으로는 정보가 부족한 경우가 있는데, 그것을 채워주는 것이 속성이다.

img에서는 src속성을 통해 어느 위치에 있는 이미지를 넣어 줄 것인지 지정할 수 있다.

스프링 부트에서 thymeleaf를 사용하는 경우 main/resources/static이 절대경로가 되므로 이를 활용하여 이미지 위치경로를 정해주면 된다.

이처럼 속성은 태그만으로 정보를 표현하기 부족할때 부가적인 정보를 제공한다고 이해하면 되겠다.

여러 속성을 적용시킬땐, 순서와 관계없이 태그안에 적용해 주면 된다. ( 구분하는 것은 띄어쓰기이다. 쉼표로 구분하지않음!)

5. 부모 자식과 목록

<parent>
    <child></child>
</parent>

위와 같이 태그들이 이루어져 있을때, 일반적으로 감싸고 있는 태그를 안에 있는 태그의 부모태그라고 하고 , 안에있는 태그를 감싸고 있는 태그의 자식태그라고 한다. 이러한 관계는 서로 바뀔수도 있고, 서로를 필요로 하지 않을 때도 있다. 하지만, 반드시 이 관계를 고정적으로 사용하는 태그들이 있다. 바로, 목차를 나타낼때 사용되는 태그들이다.

태그와- 태그는 함께 사용되는데, li태그를 리스트화 시킬 요소들에 붙이고, 같은 묶음에 해당하는 li들을 ul로 감싸는 것이다.

 

위의 결과를 통해 쉽게 이해할 수 있을 것이다.

하지만 어딘가 모르게 불만이 생긴다. 생활코딩 강의에서도 말했듯이 코딩은 극단적인 상황을 염두에 두고 하는 것이 바람직하다. 만약 위처럼 코드가 구성되었다면, 강아지 종류가 1억종류일때 하나하나 넘버링을 해주어야 한다. 또한, 항목이 삭제된다면 넘버링을 새로 해야한다는 최악의 경우가 생긴다.

역시나 세상은 이미 이 문제를 해결했다. 바로 ul태그를 ol태그로만 바꾸어주면 자동으로 넘버링을 해준다.

(ul은 unordered list , ol은 ordered list를 의미한다.)

 

6. <a>태그

<a> 태그는 단연코 가장 중요한 태그로 꼽힐만 하다. 우리가 수많은 웹사이트를 항해할 수 있는 이유는 바로 이 <a>태그 덕분이다. a는 실제로 anchor 즉, 닻을 의미한다. a태그의 href 속성에 원하는 웹사이트의 주소를 적어넣어 주면 해당 사이트로 링크가 걸리게 된다. 웹사이트는 이러한 <a>태그들의 상호관계에 의해 이루어진다고 볼 수 있겠다.

나는 스프링부트로 실습을 하고 있어서, href로 이루어지는 요청에 html파일을 맵핑하여 실습해 보았다. 

 

7. 동영상 삽입태그

<iframe>이라는 태그를 통해 html페이지에 동여상을 삽입할 수 있다. youtube를 예로 들면

위와 같이 영상의 공유 카테고리에 퍼가기를 누르면 iframe태그를 복사할 수 있다. 이것을 html파일에 넣어주면 해당 영상이 페이지에 들어가게 된다.