<body>태그 안에는
문서의 구조를 나타내는 범위
사용자 화면을 통해 보여지는
로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지 같은
웹페이지의 보여지는 구조를 작성하는 범위
body태그 안에 들어가는 요소들
1.div, hn
<div>
# 제목을 의미, h1은 제목의 사이즈, h1부터 h6까지 있다.
<h1>오늘의 날씨</h1>
<p>중부 집중호우, 남부는 열대야, 12호 태풍 북상 중..</p>
# 이미지가 정상적으로 출력될때는 img src 경로에 설정된 이미지가 표출되고
# 이미지가 정상적으로 출력되지 않을때에는 alt에 설정된 글씨가 출력된다. (대체 텍스트)
<img src=‘img/weather.jpg’ alt=‘12호 태풍’ />
</div>
2.ul, li
# ul은 순서가 필요없는 목록의 집합을 의미한다 (unordered list)
<ul>
# 목록 내 각 항목(list item)
<li>사과</li>
<li>딸기</li>
<li>수박</li>
<li>오렌지</li>
</ul>
3.a
# 쉽게 이건 하이퍼링크다.
# NAVER라는 글씨를 클릭하면 href에 설정된 url로 이동된다.
# 기본적으로 target설정을 안했기에, 현재 페이지에서 url로 이동된다.
<a href=‘url’>NAVER</a>
# target설정을 했기 때문에 url로 새탭이 열리면서 이동이 된다.
<a href=‘url’ target=‘_blank’>Google</a>
4.span
-block에 들어가는 것 중 유일하게 inline 요소인것같다.
<p>
<span>동해물</span>과 백두산
</p>
이라고 했을때, head에서 span에 style이 입혀져 있다면 span 태그 안에 있는 동해물 만 style처리된다.
5.p
<p>
동해물과 백두산이<br/>마루고 닳도록
</p>
이것은
동해물과 백두산이
마르고 닳도록
이렇게 출력이 된다.
6.input
# 사용자가 입력하는 데이터를 입력하는 요소
# 데이터는 단순히 글자만 있는 것은 아니다. 동영상, 사진등이 될 수도 있다.
# 다만 여기서는 text처리를 해주었을 뿐이다.
<input type=‘text’ />
이러면 사용자가 text를 입력할 수 있는 창이 생긴다.
<input type=‘text’ value=‘HEROPY’ />
라고 했을때는 text창에 미리 HEROPY라는 글씨가 기입되어있다.
사용자가 무언가 값을 입력하고자 한다면 해당 글씨를 지우고 해야한다고 하는데
분명 텍스트 창을 클릭하기 전에만 표출되고, 사용자가 텍스트 창을 클릭하면 사라지는
글씨도 있을것이다.
그것은 value가 아니라 placeholder 라고 해주면 된다.
입력창을 비활성화 하고자 한다면
<input type=‘text’ disabled />
'Web > Html' 카테고리의 다른 글
| html 기본이자 기초 태그 2 div, span, img, a (0) | 2022.09.27 |
|---|---|
| html 기본이자 기초 태그 1 list (ol, ul, li) (0) | 2022.09.27 |
| html 기초2 head태그 안에 들어가는 "정보 태그" (0) | 2022.09.05 |
| html 기초1 글자와 상자 inline, block요소 (0) | 2022.09.05 |
| html, beautifulsoup, selenium 웹스크래핑(크롤링)시에 유용한 태그 가져오기 원리 (0) | 2022.06.24 |