HTML 핵심 요소
<div>
<h1>오늘의 날씨</h1>
<p>중부 집중호우, 남부는 열대야, 12호 태풍 북상 중...</p>
<img src="#" alt="12호 태풍" />
</div>DIV(Division)
block- 특별한 의미가 없는 구분을 위한 요소
- 굉장히 자주 사용, 어떻게 구분하지 고민될때 사용해도 될정도
H1(Heading)
block- 제목을 의미하는 요소
- 제목은 그 제목이 포함된 어떠한 범위의 전반적인 내용의 제목
- 컨텐츠의 제목을 의미 한다.
h1~h6까지 구성되어 있고 숫자가 작을수록 더 중요한 제목을 정의
p(paragraph)
block- 문장을 의미하는 요소, 글자를 다루고 있지만 글자의 모음을 다루고 있기 때문에
block요소이다.
img(image)
inline- 이미지를 삽입하는 태그,
src(source)라는 이미지의 경로를 명시해야 한다. - 이미지가 출력되지 못할 상황은 많기 때문에 이미지 대신 출력될
alt(alternate)를 필수로 입력해야한다.
<ul>
<li>사과</li>
<li>딸기</li>
<li>수박</li>
<li>오렌지</li>
</ul>ul(Unordered List)
block- 순서가 필요없는 목록의 집합을 의미
li(List Item)
block- 목록 내 각 항목(List Item)
ul과 li 는 서로 SET 이다.
<a href="#">NAVER</a>
<a href="#" target="_blank">Google</a>inline- 다른/같은 페이지를 이동하는 하이퍼링크를 지정하는 요소.
href라는 속성을 통해서 경로를 명확히 명시해야함
<head>
<style>
span { color: red;}
</style>
</head>
<body>
<span>동해물</span>과 백두산이</br> 마르고 닳도록
</body>span
inline- 특별한 의미가 없는 구분을 위한 요소
- 위의 코드의 경우 동해물 이라는 부분에 어떤 처리를 하고 싶을때 사용
span이라는 tag의 색을 빨간색을 원한다고 지정함
br(break)
inline- 줄바꿈 처리를 원할 때 사용
<input type="text" placeholder="이름을 입력하세요!" />input
inline-block- 기본적은 inline 요소이지만 block요소의 특징도 사용 가능
block 요소는 가로 세로 값 지정, margin, pading 도 사용
- 사용자의 데이터를 입력받는 요소
type이라는 속성에 사용자가 입력할 타입을 명시- 사용자가 데이터를 입력하기 전에 데이터를 명시해주는
value라는 속성도 있다. placeholder사용자가 입력하기전에 입력할 값이 무엇인지 알려주는 힌트
<input type="text" disabled />disabled입력 요소 비활성화, input 창이 화면에 보이지만 입력은 할 수 없다.
input type=checkbox
<label>
<input type="checkbox"/> Apple
</label>
<label>
<input type="checkbox"checked/> Banana
</label>checkbox사용자가 체크를 했는지 안했는지의 상태를 입력받을 수 있는 데이터checked로 명시하면 미리 체크되는 값을 설정할 수 있다.
label
inline- 라벨링이 가능한 요소에 제목을 명시할때
label을 사용 한다. - input 요소 같이 라벨링이 가능한 요소를
label로 묶어서 제목을 포함할 때 사용할수 있다.
input type=radio
<label>
<input type="radio" name="fruits"/> Apple
</label>
<label>
<input type="radio" name="fruits"/> Banana
</label>- 1개만 선택 가능하다.
name이라는 속성으로 그룹을 만들면 그 그룹중 1개만 선택 가능
table
<table>
<tr>
<td>A</td><td>B</td>
</tr>
<tr>
<td>C</td><td>D</td>
</tr>테이블 요소- 행(Row)과 열(Column)의 집합
전역 속성
- 전역 속성이란 전체 영역에서 사용 가능한 속성
<태그 title="설명"></태그>title
- 요소의 정보나 설명을 지정
hover상태일때 화면에 출력
style
<태그 style="스타일"></태그>- 요소에 적용할 스타일(CSS)을 지정
class
<태그 class="이름"></태그>- 요소를 지칭하는 중복 가능한 이름
id
<태그 id="이름"></태그>- 요소를 지칭하는 고유한 이름
- 자주 사용하지 않지만 중요한 위치에 부여할때 사용
data
<태그 data-이름="데이터"></태그>- 요소에 데이터를 지정(기본적으로 문자 데이터)
- 어떠한 특정한 데이터를 잠시 저장하는 용도
- js나 css에서 사용가능한 값이 된다.
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>const els = document.querySelectorAll('div')
els.forEach(el => {
console.log(el.dataset.fruitName)
});
개발 공부를 해보자.. 취업은.. 어렵겠지만 그래도 공부는 해보자