[생활코딩] HTML 2일차 - 다양한 태그들
*생활코딩의 HTML 강좌를 따라가는 중입니다.
https://opentutorials.org/course/3084/18407
1. HTML 문법과 속성, img 태그
img 태그는 말 그대로 그림을 넣는 태그로 image의 줄임말.
하지만 단순히 <img> </img>한다고 동작하지는 않는다. 어떤 이미지를 불러올지에 대한 추가 정보가 필요하기 때문. 태그를 만들던 사람들은 "아니! 태그만으로는 정보를 다 넣을 수가 없잖아!"라고 생각하게 되어 "속성(attribute)"이라는 문법을 추가하게 되었다.
2. 이미지의 출처(source)를 넣어보아요
이제 아까 실패한 img 태그에 출처(소스)의 줄임말인 src를 붙여서 어떤 이미지를 불러올지를 지정해보자. scr 뒤에 괜찮은 이미지가 있는 "주소"를 넣어보자.
<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png">
요 주소에 있는 png 이미지 파일을 불러온다는 뜻이다.
위와 같이 인터넷에 있는 이미지를 불러올 수도 있고, 내 컴퓨터에 있는 이미지를 표시할 수도 있다.
다른 이미지 저장으로 내 컴퓨터에 저장된 이미지를 프로젝트 폴더에 넣는다. (coding.jpg라는 이름으로 이미지를 저장했다.) 그리고 지금 내가 작성하고 있는 웹페이지 파일과 같은 위치에 있기 때문에 src 값에 이미지 이름만 적어주면 된다.
<img src="coding.jpg">
짠- 이미지가 첨가되었다!3. 부모와 자식 태그 - 목차를 만들어 보자
태그에도 부모와 자식이 있다. 내용은 간단하다. 이렇게 부모 아래 들어가 있는 것이 바로 자식 태그다.
<부모>
<자식>
</자식>
</부모>
어떤 부모/자식 태그는 사이가 좋아서 항상 붙어 다닌다. 그중에서 가장 대표적인 것이 바로 목록 태그이다.
목차 목록은 영어로 list!
그러므로 목록의 자식 태그는 <li>이다. 간단하죠?
하지만 <li>만으로는 목록을 표현하기 부족하다.
4. 부모 태그 <ul>을 사용한 목차 <li>의 구분 : Unordered list
<li> 태그로 두 개의 목록을 만들어보았다. 하나는 영어로, 또 하나는 한글로 하지만 코드에서 아무리 띄어쓰기를 해봤자 웹페이지에서 목록은 하나로 보인다. 이것을 나누기 위해서는 <ul>이라는 부모 태그로 나눠줘야 한다.
부모를 나눈 두 개의 리스트자 이것이 다른 부모를 가진 목차의 모습이다. 영어로 된 목록과 한글로 된 목록이 다른 부모를 가지게 되면서 둘 사이에 차이가 생겼다.
5. 자동으로 번호가 붙는 리스트 <ol> : ordered list
업무 중 위에서 기획안이 자꾸 엎어져서 목차가 자꾸 수정된다면 스트레스가 이만저만이 아니다. 그때마다 커서를 옮겨서 목차 앞에 붙어있는 숫자들을 바꿔줘야 한다. 하지만 그런 수고를 덜어주기 위하여 코드가 있는 것이 아니겠는가?
우리는 부모 이름을 단 하나만 바꿈으로써 이런 불쾌한 경험을 삭제할 수 있다. 바로 <ul>을 <ol>로 바꾼다
이름하여 순차 태그(ordered list tag)
짜잔- 자동으로 중간에 붙은 목차와 마지막에 붙은 목차에 넘버링이 붙었다.
6. 웹페이지의 타이틀을 바꿔보자 : <title>
웹페이지 타이틀이 현재는 파일 제목으로 뜬다. 예쁘지도 않을뿐더러 무슨 내용이 들어있는지 알기 힘들다.
이럴 때 쓰는 것이 <title> 태그. 타이틀을 적용하면!
바로 이렇게 예쁘게 바뀐다.
8. 한글을 넣었더니 깨져요! - <meta>
컴퓨터는 한글이든 영어든 0과 1로 만들었다가 다시 만들기 때문에 간혹 웹페이지에서 꿻뛟껙 같은 것을 볼 수 있다 그럴 때는 살포시 아래 메타 태그를 추가하면 된다.
<meta charset="utf-8">
utf-8이라는 언어로 html 파일이 작성되면 한글이 깨지지 않기 때문이다.
9. 머리 <head> 아니면 몸 <body>으로 하자고 약속해요
사람 사이의 약속은 지키는 것이 인지상정. 웹도 마찬가지다.
잘 보면 웹페이지에 직접적으로 노출되는 부분과 그렇지 않고 이 문서가 어떤 것인지 정의해주는 부분이 따로 있다.
웹페이지의 기본 사항을 정의해주는 부분에는 위에서 보았던 utf-8과 같은 언어나, 어떤 라이브러리를 쓰는지, 혹은 어떤 타이틀인지 등의 내용이 들어가며 이 부분을 <head>로 묶어주는 것이 관례이다.
반대로 직접적으로 웹페이지에 나오는 부분들, 실제 콘텐츠들은 <body> 아래에 둔다. 따라서 모든 태그는 <head> 아니면 <body> 아래에 있게 된다.
하지만 <head>나 <body>를 추가한다고 해서 따로 바뀌는 것은 없다.이 둘은 모든 태그 상위에 있는 매우 고위층 태그라고 볼 수 있다.
10. 최고위층 태그는 바로 <html>
<head>와 <body>보다 더 고위층 태그가 있었으니 바로 그것은 <html> 태그이다. 우리는 html문서를 작성하고 있으니까. 하지만 그 위에 관용적으로 한 줄을 추가해준다.
<!doctype html>
=> 이것은 html 용어로 쓰인 문서입니다.라는 뜻이다.
자, 여기까지가 나에게는 2일 차였다!
계속 힘내서 다음 강의로 넘어가 보자.
https://opentutorials.org/course/3084/18392
