태그특징
- 가로영역을 전부 차지하는 block요소의 태그
- 자신의 영역만을 차지하는 inline요소의 태그
종속태그
- 태그 혼자 사용불가.
- 상호작용필요
- 선택박스테그(<select>), 목록태그(<ol>,<ul>),표테그(<table>)select태그
<select> <optgroup label="1"> <option>1번</option> <option>2번</option> <option>3번</option> </optgroup> <optgroup label="2"> <option>1번</option> <option>2번</option> <option>3번</option> </optgroup> </select>
위코드는 저런 식으로 나오게된다(모양은 좀 다르겠지만..)
이 태그들은 단독으로 사용할 경우 작동이 제대로 되지 않는다.
반드시 서로 부모 자식의 관계를 가지고 있어야한다.
목록태그
ul 또는 ol으로 감싸주고 자식으로 li태그를 넣어주면 됨.
종속태그는 서로 상호작용을 해야 제대로 작동이 된다!!!
문서 구조를 통해 복잡한 문서를 최소화하고 체계화 한다..
정해진 규칙이나 규격에 따라 체계화.
head태그와 body태그로 나누어진다.
head태그는 검색엔진을 위한 영역,
body태그는 브라우저에서 보여지는 영역을 의미한다.
head에는 title태그와 meta태그가 들어간다.
사이트의 탭의 이름부분이 title태그에서 나온 것이다.
검색해서 들어갔을때나 sns로 사이트를 공유할때 사이트 이름과 설명이 적혀있는것은 meta태그에서 행해지게된다.
이렇게 propety="og:description" 라고 적어주면 content="~~" 부분이 바로 그 보여주고 싶은 내용 부분이 된다.
- 태그는 약속된 명령어로 고유의 기능을 가짐
- 속성과 값으로 부가적인 기능을 구현할 수 있으며 이것은 중첩해 사용이 가능하다.
radio버튼에는 name속성에 같은 값을 주어 둘중 하나만 선택될 수 있게 그룹핑 해주자.
select는 option태그와 함께 쓰이는데 여기서 첫 페이지 렌더링할때 딱 보이는 기본값을 설정을 하려면 해당 option태그를 첫번째로뺀 뒤에 disabled="true"로 선택을 못하게 막고, 이미 처음 선택되어있게 selected="true"로 해주면 기본값으로 설정이 된다.
<option disabled="true" selected="true">지역을 선택하세요</option>input type="button" 과 button태그.
둘의 차이는 input태그로 만드는 버튼은 css나 태그를 이용해 가공하기에 조금 곤란하기 때문이다. 그리고 안에 들어가는 텍스트도 value라고 해서 주어야한다.
따라서 요즈음에는 button태그를 주로 사용.
