구역 내 콘텐츠 태그들
문단태그인 <h1~6>, hr, span, a, img, input, button, textarea 등의 태그들을 연습하였다.
이들은 모두 <body></body> 사이에 쓰는 콘텐츠 태그들이다.
어제 공부한 것에 이어 오늘 다시금 느낀 건데, 자꾸 html은 햄버거 같은 구조라고 느껴진다.
<body></body>가 위아래 패티라면, hr, a, img 등의 콘텐츠 태그들은 패티 사이에 들어 있는 각종 재료(구성요소) 같은 느낌??
근데 html이 햄버거와 다른 점은 <head></head>태그가 <body></body> 안의 재료들의 속성을 마음대로 정할 수 있다는 것이다.
즉, 특정 재료를 저격하여 <head>태그에 꾸미기(css)나 움직이기(자바) 등의 속성을 부여한다면 기본적으론 군침도는 갈색을 띠는 불고기 패티를 파란색으로 바꿔버리거나, 해*포터에 나오는 마법음식(책)마냥 패티를 좌우로 왔다리갔다리 움직이게 할 수 있다!
그런 점에서 코딩은 일상 속 마법이랑 맥락을 같이하는 듯(?)
아래부터는 그냥 내가 스스로 실습한 결과를 스샷찍어서 복붙한 것들이다.
문단태그 <h1~h6>
솔직히 노션을 자주 쓰다 보니 뭔가 어디서 본 것 같은 익숙함을 느꼈닼ㅋㅋㅋㅋㅋ 저 제목태그 H1, H2, H3 진짜진짜 많이써.....ㅎㅎㅎㅋㅋㅋㅋㅋ
제목과 본문 태그 구별을 위해서 일부러 h1~h3은 대문자로, h4~h6은 소문자로 썼지만 사실 H는 대문자로 쓰든 소문자로 쓰든 상관없다! (다른 태그들도 모두 마찬가지) 코딩을 대문자로 쓰든 소문자로 쓰든 알파벳만 알아먹게 쓰면 된다^.^
h태그는 h1~h6까지 총 6단계가 있고 이들을 모두 통틀어 "문단태그"라고 하지만,
h1~h3은 제목태그로서 주로 제목에 활용하고 h4~h6은 본문태그로서 주로 본문글에 이용한다.
그러나 특이한 것은 h태그 속성값을 부여하지 않은 일반 텍스트(기본 디폴트 본문 글꼴속성)는 h1~h6 중 어느 것과도 일치하지 않는다.
즉 기본 디폴트 본문 글꼴은 h태그를 부여한 글꼴과는 다른 것이니 둘을 서로 구분해야 한다고 본다.
그러니까 html 본문 글꼴속성은
- h태그인 h1~h6로 특별하게 부여하는 글꼴
- 그런 거 없는 기본 디폴트 본문 글꼴
이렇게 구분하기로 한다.
티스토리에서 제공하는 h1~h6으로 같은 문장을 써 보았다.
h1 제목태그. 헤어날 수 없는 꿈에서 발버둥쳐본 적이 있나요?
h2 제목태그. 헤어날 수 없는 꿈에서 발버둥쳐본 적이 있나요?
h3 제목태그. 헤어날 수 없는 꿈에서 발버둥쳐본 적이 있나요?
h4 본문태그. 헤어날 수 없는 꿈에서 발버둥쳐본 적이 있나요?
h5 본문태그. 헤어날 수 없는 꿈에서 발버둥쳐본 적이 있나요?
h6 본문태그. 헤어날 수 없는 꿈에서 발버둥쳐본 적이 있나요?
기본 속성. 헤어날 수 없는 꿈에서 발버둥쳐본 적이 있나요?
수평선의 <hr> 태그
hr은 horizontal line, 즉 수평선의 hr이다. 문학에서는 드라마틱하게 paragraph를 나누거나 스토리 전개를 확 바꿀 때 쓰는 긴 줄로 사용된다.
아래와 같은 수평선은 <hr> 태그를 이용해 만들 수 있다. 짝이 없는 솔로태그이다.
파이챰 코딩에서 <hr> 태그 위아래로 엔터키를 쳐서 여백을 아무리 많이 두어 봤자 의미없다.
코딩에서 엔터키를 이용한 태그 위아래 여백은 실제 html 출력결과에서 모두 무시된다. (다른 태그도 모두 마찬가지)
특정 부분만 꾸며주는 <span> 태그
span태그는 특정 글자를 꾸밀 때 씁니다.
span이 div와 다른 것은 div태그는 블록(block)단위로 적용되는 것에 반해, span태그는 인라인(inline) 요소로만 적용되기 떄문에 span이 div보다 적용범위가 더 한정적이라는 것이다.
솔직히 설명만 보면 지금은 잘 와닿지 않기 떄문에 좀 더 html 실습을 많이 해봐야 할 것 같다.
하이퍼링크를 걸어주는 a 태그
a 태그는 하이퍼링크를 걸어주는 태그이다.
a 태그에 a href="" 로 URL을 부여하면, <a href=""></a> 사이에 있는 글씨를 실제 html에서 클릭했을 때 해당 URL로 이동하게 된다.
보통 <a href=""> 가 풀네임처럼 쓰인다.
그냥 a만 쓰거나 a href 말고 다른 방법으로 쓰는 게 있는지는 모르겠다. (더 배워야 알 듯)
이미지를 출력하는 <img> 태그
img 태그는 이미지를 출력하는 태그이다.
img 태그에 img src="" 로 이미지의 URL을 부여하면, <img src="">가 써진 자리에 그 URL로부터 이미지가 불러와진다.
소환진
보통 <img src=""> 가 풀네임처럼 쓰인다.
이미지 하나만 불러오면 그걸로 끝이라서 <img> 태그는 짝이 없는 솔로태그이다.
사용자의 정보를 받는 네모박스 input 태그
<input>태그는 사용자가 직접 정보를 입력할 수 있는 네모박스를 생성하는 태그로,
아이디 [ ]
비밀번호 [ ]
를 입력할 때 쓰는 네모박스 입력창이 <input> 태그로 만들어진 것이라고 추측된다.
<input>태그로 만들어진 네모박스에 입력한 정보는 서버 등 다른 요소와 상호작용하기 때문에 interactive한 인싸태그라고도 할 수 있겠다.
말 그대로 "정보를 상자 안(in)에 넣으세요(put)" 여서 <input>이 아닐까...??? 진짜 직관적....
<input> 태그도 사용자의 정보를 받는 네모박스 하나만 불러오면 끝이기 때문에 짝이 없는 솔로태그이다.
(뭔가 오브젝트를 소환하고 끝나는 태그들은 전부 솔로태그인 듯^.^)
버튼을 만드는 button 태그
<button>태그는 말 그대로 버튼을 만드는 태그이다.
<button></button> 사이에 글씨를 쓰면 그 글씨가 버튼에 새겨진다!!
그리고 css등으로 특별한 속성을 지정하지 않은 기본 상태에서, <button></button> 태그로 만들어진 버튼의 길이는 버튼 안 글씨의 문장 길이만큼 무한히 길어진다.
[버ㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓ튼] 같은것도 만들 수 있을듯.
얘는 버튼을 소환하는 태그이긴 하지만, 하이퍼링크 태그(a 태그)처럼 태그 사이에 글씨를 쓸 수 있기 때문인지 <button> 태그는 짝이 있는 커플태그이다.
서술형 글상자를 만드는 <textarea> 태그
<textarea>태그는 서술형 글상자를 만드는 태그로, 사용자는 <textarea> 태그로 만들어진 글상자에 n줄이 넘는 긴 글을 쓸 수 있다.
즉 리뷰나 피드백 등도 기록할 수 있다.
<textarea></textarea> 태그 사이에 글씨를 쓸 수도 있으며, 이렇게 쓴 글씨는 textarea로 만들어진 글상자에 처음부터 적혀 있는 디폴트 문장으로 나타난다. 사용자는 이 문장을 직접 지우고 쓸 수 있다.
(기본 상태에서는 이 문장을 일일이 backspace로 지워야만 지워진다.)
input과 textarea는 사용자가 직접 정보를 입력할 수 있는 네모상자를 만든다는 점에서 은근 비슷한 태그인데,
input보다 textarea가 더 많은 정보(글씨)를 입력할 수 있는 여유공간이 더 많다.
네이버 폼이나 구글 폼에서 등장하는 단답형 응답상자가 input 태그, 서술형 응답상자가 textarea가 아닐까 생각한다🤔
콘텐츠 태그들 연습 결과
확실히 개발일지를 쓰니까 꼼꼼하게 알아가는 것 같긴 한데
실제 실습은 10분~20분이면 끝나는 데 비해 개발일지를 쓰는 시간이 1시간 반 정도로 너무 길다ㅠㅠㅠㅠㅠ
지금은 처음이니까 이것저것 다 쓰지만 좀 더 익숙해지면 내가 꼭 더 연습하고 싶은 부분만 추려서 개발일지를 써 볼까 싶다......
토익도.... 공부해야해😇😇
