3일차 : 줄바꿈, HTML이 중요한 이유, 속성과 img
안녕하세요, 오늘 맨 처음 배울 내용은 줄바꿈입니다.
1. 줄바꿈 <br>과 <p> (<p>가 더 좋은 선택인 이유)
지난번에 제가 엔터가 시급해서.. 검색으로 알아낸 줄바꿈이 바로 3일차에 등장하다니..
조금만 더 참고 기다려 볼 걸 그랬습니다.
제가 알아낸 줄바꿈 태그는 <br> 이었는데요.
<br>은 열고 닫는 부분 없이, <br>을 입력하자마자 줄을 바꿀 수 있었습니다.
지난 시간에 배운 <u>나 <strong>을 쓸 때는 </u>와 </strong>을 통해서 강조할 부분을 감싸줬죠.
이것과 마찬가지로 단락과 단락을 감싸주는 태그가 존재합니다.
바로 <p>이죠!
마찬가지로 <p>와 </p>를 통해서 단락의 시작과 끝을 표시해 주어야 합니다.
생활코딩에서는 <br>보다 <p>를 사용하는 것이 더 좋은 선택이라고 합니다.
이렇게 해야 웹페이지를 정보로서 보다 가치있게 해주기 때문이라고 하는데요.
저는 아직까지 이게 무슨 뜻인지 잘 와닿지 않습니다.
<br>의 경우, 엔터와 같아서 여러개를 입력하면 여러 줄을 띄울 수 있습니다.
반면 <p>의 경우에는 줄 간격이 정해져 있습니다.
<p>를 사용하되, 줄을 더 많이 띄우고 싶으면 CSS를 이용하면 된다고 합니다.
CSS는 HTML과는 다른 문법의 언어로, 정보를 꾸며주는 언어입니다.
HTML은 정보를 표현, CSS는 정보를 꾸미는 역할이죠.
<p> 태그 안에 style="margin-top:45px"를 추가하여 여백을 넣을 수 있다고 하네요.
<p style="margin-top:45px;">와 같이 쓸 수 있다고 합니다.
단락도 구분하여 감싸면서 여백까지 원하는 정도로 추가할 수 있다니 훨씬 정교하고 나타내는 정보도 많죠?
2. HTML이 중요한 이유 (경제성, 접근성)
HTML을 이용하면 우리는 간단하고 접근성이 높은 코딩을 할 수 있습니다.
티스토리의 경우, 글쓰기에 들어오면 글씨 크기를 숫자로 선택하는 것이 아니라, 정해진 포맷 중 고를 수 있죠.
제목 1~3, 본문1~3 중에 본인이 원하는 사이즈/여백의 포맷을 고르면 됩니다.
지난 시간에 태그 통계표에서 2위와 3위를 차지했던 태그가 <head>와 <body>였습니다.
티스토리에 글을 쓰다 말고 HTML 모드로 들어가 봅시다.
무조건 기본 모드만 보던 저도 웹에 대해 배우면서, HTML모드를 읽을 수 있는 눈이 생겼어요!
방금 적은 문장 보면, <p>로 문단을 나누고 있고, p 옆에 사이즈 16을 보면, 글씨 크기가 16인 걸 알 수 있죠.
2번 제목으로 넣은 HTML이 중요한 이유를 보시면 아래와 같이 나타납니다.
만약 제가 티스토리가 아니라 다른 편집기를 사용중이었고, 글씨 크기를 조금 키우고 진하게 설정을 한다면 이게 소제목인 것을 누가 알아챌 수 있을까요?
<h>를 사용하게 되면, 아 이건 제목이구나! 한 번에 알아차릴 수 있죠.
h를 사용한게 아니라면, 사이즈가 조금 더 큰 일반 글이라고 생각할 겁니다.
이처럼 head와 body를 이용하면, 실제 눈으로 보지 않고도 글의 내용이 제목인지, 본문인지 알 수 있죠.
컴퓨터가 이해하기에도 훨씬 간단할 겁니다.
바로 이러한 경제성이 HTML이 중요한 이유 중 하나입니다.
또다른 HTML의 중요한 점은 바로 누구나 차별없이 정보에 접근할 수 있는 접근성입니다.
방금 확인한 것 처럼, 눈으로 그 이미지를 확인하지 않아도, HTML 모드로 보면 이 정보가 어떤 형태인지, 어떤 것을 전달하는 지도 알 수 있죠.
생활코딩님이 예시로 든 시각 장애인 분들도, 이미지들로 보여지는 컴퓨터 화면도 이렇게 HTML을 통해 독해 가능한 하나의 언어로 표현된다면, 제한없이 정보를 얻을 수 있는거죠.
비즈니스적 측면의 경제성, 휴머니즘적 측면의 접근성 이 두 가지를 모두 갖고 있는 것이 HTML 입니다!
3. 최후의 문법인 속성과 img
속성(attribute)은 태그의 심화된 문법입니다.
속성을 배우면 HTML의 기본 문법을 완전히 마스터한 것이라고 하네요!
속성이 필요한 이유는 아주 인기있는 태그인 img와 밀접한 관련이 있습니다.
img는 말 그대로 이미지를 넣는 태그입니다.
하지만 <img>라고만 입력하면 이미지가 생성될까요?
당연히 아무 것도 표시되지 않습니다.
어떤 이미지를 불러올 지에 대한 정보가 부족하기 때문이죠.
바로 이럴 때 속성을 적용하면 됩니다.
img 태그에 source의 줄임말인 src를 붙여서 <img src="이미지의 주소"> 이렇게 나타내면 됩니다.
그럼 주소에 있는 이미지를 불러오게 되는거죠.
위의 이미지 주소는 인터넷에 있는 이미지의 주소입니다.
내 컴퓨터에 있는 이미지는 어떻게 표시할까요?
일단 이미지를 프로젝트 폴더에 위치시켜야 합니다.
지난 시간에 web이라는 폴더를 만들고, 1.html 을 생성했죠?
거기에 이미지 파일을 추가해 줍니다.
이렇게 같은 위치에 이미지 파일을 넣어준다면, 이미지 파일의 이름만 적어주면 됩니다.
이미지의 크기는 width의 값으로 숫자나 %를 사용해서 조정할 수 있습니다.
<img src="주소/파일명" width="100%"> 와 같이 나타낼 수 있습니다.
이처럼 속성을 사용하면 태그보다 훨씬 풍부한 표현을 할 수 있습니다.
여기까지 배우니까 태그의 문법을 완벽히 마스터했다고 하네요ㅎㅎ
더 복잡한 문법은 없대요!
필요한 태그/문법은 검색해서 알아내면 되니까 정말 기본에 대해서는 다 배운거네요.
뭔가 이렇게 '마스터했다', '복잡한건 없다' 라고 표현해주니까 의욕도 생기고 성취감도 느낄 수 있는 것 같습니다.
다음시간에 배울 내용은 부모 자식과 목록이던데.. 무슨 내용일지 기대가 되네요!
'WEB > HTML&INTERNET' 카테고리의 다른 글
| 6일차 : 원시웹, 인터넷과 웹, 서버와 클라이언트 (0) | 2021.12.06 |
|---|---|
| 5일차 : 웹사이트 완성 (0) | 2021.12.02 |
| 4일차 : 부모/자식 태그, 문서의 구조, 태그의 제왕 (0) | 2021.12.01 |
| 2일차 : 기본 문법 태그/W3C/통계에 기반한 학습 (0) | 2021.11.24 |
| 1일차 : 수업소개부터 실습환경 준비까지 (0) | 2021.11.24 |
