안녕하세요~
이번에도 어김없이 부족하지만 돌아왔습니다
오늘은 HTML의 핵심이라고 볼 수 있는 태그에 대해서 알아보겠습니다
그럼 출발~
HTML 그 잡채 🍜, Tag
⚠️ 해쉬태그 겁나많은 나는 관종이지 아님 주의
HTML 태그는 요소이며, HTML를 구성하는 가장 기본 단위
엄청나게 많은 태그들이 있지만,
백엔드를 위한 기본적인 HTML 공부 목적이므로 제가 보았을 때 중요하다고 생각되는 몇가지의 태그만 정리해볼게요~
백엔드라고 View를 아예 안보는건 아니니까요!
div
<div>는 콘텐츠 분할 요소입니다
앞서 배운 Block/Inline 요소중 Block에 해당되고
여러 태그들을 그룹핑 해주는 목적을 가지고 있습니다.
프론트엔드 개발단에서 스타일 적용을 위해 많이 활용한다고 하네요
<div>
<label for="userPassword">비밀번호</label>
<input id="userPassword" type="password" name="userPassword">
</div>이런식으로 <label>과 <input>태그를 묶어서 스타일 적용을 할 수 있겠죠?
span
<span>는 <div>와 다르게 display 속성이 block이 아닌 Inline 요소입니다. CSS와 함께 활용되는데요~
<div>는 줄 바꿈이 된다는 것과는 다르게 <span>은 줄바꿈이 되지 않아요
h1 ~ h6
<h1><h2><h3><h4><h5><h6> 이 태그들은 제목을 나타내는 태그입니다.
h1~h6 순으로 작성한다는 암묵적 룰이 있다고 하네요
숫자가 낮을 수록 글자가 더 크게 나와 강조됩니다
a
<a> 태그는
- 같은 페이지 내 위치 이동
- 다른 페이지로 이동
- 파일, 이메일 주소 혹은 또 다른 URL(하이퍼링크)로 이동
에 활용합니다
<href> 속성으로 참조되는 위치를 연결하고 (ex. <a href="www.naver.com">)
tel이나 mailto를 이용해 전화번호 및 이메일 주소 연결도 가능합니다.
target 속성은 새 탭으로 열기, 새 창으로 열기, 현재 페이지에서 열기 등 설정 가능해요!
p
<p> 태그는 paragraph로 한 문단을 뜻합니다
블록 요소이면서, 정말 자주 쓰이는 태그입니다
문서를 읽다보면 문단문단 잘 정리되어 있는 걸 볼 수 있죠?
그렇게 나누기 위해 사용하는 태그가 <p>라고 생각하시면 되겠네요!
strong
<strong> 태그는 강조할 부분에 사용됩니다.
Bold가 적용된다고 보면 돼요!
다만 추가로 스크린 리더를 통해 들을 때 해당 태그가 사용된 문자는 억양을 좀 더 강하게 낸다고 하네요
신기하다~~
img
<img> 태그는 문서에 이미지를 넣어줍니다
인라인 요소이고 <src> 속성으로 경로를 연결 시켜주면 돼요!
ex)
<img src="./mukkusi/cute.jpg">오늘은 HTML 태그에 대해 몇가지 알아보았는데요.
저는 앱 개발자였어서 자세히는 모르겠지만, 제 경험상 웹 프로젝트를 가끔 참여할 때 HTML, CSS는 퍼블리셔님이 다 작업을 해주셔서 깊게 알 필요는 없었네요.
But 그러나!
바쁘다보면 기획자의 요구사항이나 잘못된 부분을 빠르게 수정해야할 때가 있는데, 그럴 때를 위해서 기본적인 태그는 알아둬야 도움이 크게 된답니다
오늘은 여기까지, 다들 안녕~
