2일차 (2) HTML의 태그와 CSS.
*지금부터는 비주얼 스튜디오에서 코딩을 계속할 것이다.
이제 우리의 오랜 친구인 Hello World!와는 작별을 하고 배운 내용을 토대로 새로운 코드를 작성해보고 거기에 살을 계속 붙여나가는 식으로 여러 가지 HTML의 태그와 CSS사용법을 공부할 것이다.
우리의 마음의 고향인 헬로 월드를 조용히 보내준 뒤 빈 여백에서부터 새롭게 코딩을 시작해보자.
우선 저번 시간에 배웠던 제목을 뜻하는 태그인 <h1>을 입력해주자
<h1></h1>훌륭한 비주얼 스튜디오는 이렇게 코딩하기 좋게 세팅을 해놓았다.
다시 설명하자면 양 옆의 <h1></h1>는 HTML의 태그라고 불리는것으로 꺾쇠 안에 들어가는 문자에 따라 그 역할이 변하는데 h1은 메인 제목을 나타낸다.
영어에 익숙한 사람은 HeadLine을 극한으로 줄인 h로 생각하면 외우기 쉬울 것이다.
또, 자세히 보면 오른쪽 끝에는 </h1> 이렇게 슬레쉬가 있는 것을 알 수 있는데, 이 이유는 시작과 끝이 둘 다 같다면 컴퓨터는 이 태그가 시작을 뜻하는지 끝을 뜻하는지 알 수가 없다.
그렇기에 끝나는 테그에는 앞에 슬레쉬를 붙여 줌으로써 시작과 끝을 구분한다.
그러면 태그 사이에 제목을 입력해보자
<h1>Sia Challenge for Saturday, November 12th</h1>필자는 11월 12일 토요일에 이 글을 작성하기 때문에 나의 도전!이라는 의미로 위와 같은 제목을 넣었다.
방금 우리가 제목으로 입력했던 문장은 『콘텐츠』라는 이름을 가지고 있다.
간단히 요약 하자면 HTML은 (태그 시작) 콘텐츠 (태그 끝)의 기본 형태를 가지고 있다고 생각하면 편하겠다.
지난 시간에 배웠던 내용을 새롭게 활용하는 건 여기까지고 지금부터는 새로운 내용들을 배워 볼 것이다.
HTML은 브라우저와의 호환성이 매우 좋아서 HTML 파일에 어떤 콘텐츠를 기입하든 브라우저에서 나타내 보여준다.
이 말이 어렵게 느껴질 수 있다.
예시를 통해 보여주자면,
<h1>Sia Challenge for Sateurday, November 12th</h1>
Learn about the basics of web development - specifically dive into HTML & CSS.위 코드의 2번째 줄을 보면 태그가 없는 걸 볼 수 있다.
하지만 이를 실행시켜 보면
태그가 없어도 글이 나타나는 것을 알 수 있다.
Q : "엥 그러면 태그 없이 막 글을 써도 괜찮지 않나요?"
라고 만약 질문을 한다면
A : "NOOOOOOOOOOOOOOOOOO"
라고 대답할 것이다!
왜냐하면 태그 없이 있는 컨텐츠는 시스템적으로 어떤 것을 의미하는지 모르기 때문에 크롬 같은 곳에서 검색을 할 때 서칭이 안된다거나 의미 없는 값으로 판단될 가능성이 있기에 태그를 무시하지 않는 것이 매우 좋다.
틀리진 않았으나 훌륭한 코드가 아닌 위 코드를 고쳐보자.
단락을 뜻하는 태그인 <p></p>를 추가해줄것이다.
<h1>Sia Challenge for Sateurday, November 12th</h1>
<p>Learn about the basics of web development - specifically dive into HTML & CSS.</p>이렇게 고쳐주면 비록 시각적으로 보이는 건 같으나 두 번째 줄의 콘텐츠가 단락을 의미한다는 내용까지 담고 있어서 훨씬 훌륭해진 코드가 된 걸 알 수 있다!
태그의 중요성을 알았다면 지금부터는 CSS를 배워볼 것이다.
CSS는 간단히 HTML의 모든 것들을 꾸며주는 코드를 말한다.
그러면 CSS를 사용해서 제목의 글꼴을 바꾸는 작업을 보여주겠다.
<h1 style="front-family: sans-serif">Sia Challenge for Sateurday, November 12th</h1>
<p>Learn about the basics of web development - specifically dive into HTML & CSS.</p>위 코드를 보고 따라서 비주얼 스튜디오 코드에 타이핑을 해보면 style=""의 형태가 기본적으로 나오는 것을 알 수가 있다.
여기서 눈치 빠른 사용자들은 "앗! 스타일 이퀄 위에 있는 따옴표 안에 내가 원하는 꾸밈 형태를 넣는구나!"를 직감적으로 알아차릴 것이다.
위 코드에서 필자가 입력한 것은 제목의 글꼴을 바꾼 것이다.
추가적으로 자주 사용되는 CSS를 몇 개 더 써보겠다.
<h1 style="font-family: sans-serif; text-align: center; color:red">Sia Challenge for Saturday, November 12th</h1>
<p>Learn about the basics of web development - specifically dive into HTML & CSS.</p>
위 코드를 보면 text-alig: center와 color:red가 추가된 것을 볼 수가 있다.
추가적으로 새로운 스타일 코드가 추가될 때마다 서로 세미콜론(;)으로 나눠져 있는 것을 볼 수 있는데 이는 필수적으로 해야 하는 작업이다.
저 코드조차 똑같이 타이핑해본 성실한 사람들은 각 스타일 값을 입력하는 곳에서 비주얼 스튜디오가 여러 가지 옵션을 보여주는 것을 확인했을 것이다. 이제 여러분들은 글꼴, 글 위치, 글 색 등등을 자유롭게 바꿀 수 있는 능력을 얻은 것이다!!
오늘도 수고한 나 자신과 혹시라도 이 글을 읽었을 독자에게 박수를 치며 막을 내리겠다!!
👏