div / span / semantic tag
# input태그는 단일태그라서 끝태그 없지만,
textarea는 시작태그와 끝태그가 있다.
# method방식은 두가지 방식
get: 노출
method: 암호화
# form태그의 action을 임시태그로 #으로 처리해도되구~
나중에 더 배워서 원하는 타입으로처리!
# 꼭 하나를 선택해야하는 type: radio
radio 타입에서 중요한건 name! 동일한 name을 넣어줘야지
그룹으로 인식함.
# 다중 선택 type: checkbox
이때도 마찬가지로 하나의 그룹으로 알려주려면 name동일하게~
check한값이 전송되려면 text와 관련된 value값 넣어줄것!
여기서 기본적으로 처음에 체크되게하려면 checked.
# 토글버튼 눌러서 선택하게 하려면
input tag가 아니라 select tag!
그 안에option
# 다중선택가능하게 하려면
select multiple~
# label이 가지고있는 for 속성과 input이 가지고있는 id속성값이 같아야한다.
label과 input태그를 형제태그로 놔도도 되고
input태그를 label 안에 부모자식태그로 해도 됨.
단, 부모자식태그안에서 label에 for 굳이 안써도 된다(이미 속해져있는 관계이기 때문이다)
label 태그 굉장히 중요오옹~~~
(텍스트만 클릭해도 클릭이 된답!)
# fieldset(묶어주는거) / legend(주제)
<위에 모두다 암기할것!>
# css들어가면, input태그를
동그라미가 안이쁘니까
동그라미를 안보이게하구.
텍스트만 클릭해서 선택할 수 있게끔
활용할 수 있다(:
이미지나 버튼을 만들어서 동작화하게 할때
radio type을 활용해서 한다.
(중요하니까 기억!)
# div : 블럭요소 (대표적인 블럭요소임)
span: 인라인요소 (대표적인 인라인요소임)
# div태그는 division(나누는 것, 분할, 분배, 부서)의 약자.
뭘 나누냐~?
공간을 나누는 것이다.
명확한 의미가 있는 태그는 아니다.
그냥 나누겠다는 뜻.
얘를 대표적인 블럭요소로 사용하면서
내가 어떤 컨텐츠를 넣었는데
어떤 의미로 넣고 싶은것이 아니라
블럭으로 떨어뜨리고 싶을 때 넣는거라 보면된다!:)
자동으로 줄바꿈 하고싶을때~
# 그리고 예전에는 table태그로 웹페이지를 많이 제작했지만
요즘에는 div로 거의 많이 짠다.
ex. 네이버에들어가서 f12번 창 누르면
소스들을 확인할 수 있는데, index 페이지를 들어갔을때
(단, 어떤페이지는 소스들이 보안이 걸려있어 볼 수 없기도 하다)
요소검사 클릭해서 무슨태그로 짯는지 확인가능.
->div가 엄청 많은 것을 확인 할 수 있다.
li태그도 많이 보이는데 li태그는 네비게이션 짤 때 많이 쓴다.
# 이제는 div로 많이 짠다!! 기억하자~
정말많이 쓰이기 때문에 진짜진짜중요하다.
어떤요소를 블럭처럼 바구니 안에 넣고싶을 때 사용하는 태그다.
# 위치를 옮기고싶을때 하나씩 다 옮기면 노다가니까
그룹으로 묶어서 하나의 박스에 이동하면 된다.
즉, div에 담아놓고
(하나의 박스에 담아놓고)
다른 위치로 한번에 이동가능.
그런 기능을 하는 태그가 div.
# span태그도 div태그처럼 의미가 없는 태그다.
(but, div가 span보다 더 중요!)
그럼 어떻게 쓰냐~?
연습하면서 익혀볼것(:
# $ : 1~6순서대로 뽑아내는 일련번호 표시 (emmet)
-> 태그는 아니고 공백 줄 수 있는것.
# 다시다시언급>>>>>div가 span보다 더 중요!<<<<<
# div의 배경 가로값을 작게 지정하고 싶어서
background에 추가적 속성을 더놓고 싶을때
추가를 하려면 세미콜론(;)을 넣어주고 width속성 넣어준다.
# div에선 변화가 있지만, span에서
마찬가지의 속성을 넣어주면 변화가 없다.
#왜?
-> 원하는 사이즈를 넣어서 정확하게 레이아웃을 짜야하는데
div는 블럭요소라 가로값이 먹지만,
span는 인라인요소라 가로값이 안먹는다.
그래서 거의 div요소를 쓴다.
# 물론 span태그도 블록요소로 바꿀 순 있지만, 굳이 그러지 않고
div요소로 많이 쓴다.
사실, 점점 w3c에선 의미가 없는 div말고
의미론적인 태그를 쓰라고 권유하는 추세(:
하지만, naver에서도 div를 많이 쓰는 것과 같이
바뀌기까지 시간이 꽤 걸릴것..!
# ctrl+shift+c : 서브라임에서 color picker 단축키.
# semantic: 의미있는
목적: 문서의 정보를 보다 잘 표현하기 위해서는
의미에 맞는 태그를 잘 사용해야 한다.
특히 HTML5에서는 웹페이지에서 통상
많이 사용하는 구조에 의미를 분명히 부여하기 위해서
의미론적 태그(semantic element)를
새롭게 정의해서 제공하고 있다.
그 목록은 아래와 같다.
article: 본문
aside: 광고와 같이 페이지의 내용과는 관계가 적은 내용들
details: 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
figure: 삽화나 다이어그램과 같은 부가적인 요소를 정의
footer: 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
header: 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
main: 문서에서 가장 중심이 되는 컨텐츠를 정의
mark: 참조나 하이라이트 표시를 필요로 하는 문자를 정의
nav: 문서의 네비게이션 항목을 정의
section: 문서의 구획들을 정의
time: 시간을 정의
# head와 header는 완전히 다른 태그다.
header라는 태그도 사실 의미는 비슷하지만,
머리를 가진사람..ㅎㅎㅎ
사이트 전체의 머리부분이 된다.
머릿부분을 이정도 쓰고싶다 할때
그 부분을 감싸주는 태그가 header
# <head>태그와의 차이점
1. <head>태그는 문서에서 단 한 번만 사용할 수 있고 <header>태그는 여러 번 사용 가능하다.
2. <head>태그는 <html태그 다음에 입력하나, <header>태그는본문 즉 <body>태그 안에서 사용가능하다.
# nav : navigation의 약자.
li태그를 감쌀 때 많이 쓴다.
li태그가 목록을 만들고 싶을때도 쓰지만,
메뉴를 만들때도 쓰인다.
아무쪼록!
<nav>태그는 네비게이션 표현을 위한 태그다.
<nav>의 위치
<nav>는 본문위치에 영향을 받지 않는다.
<header> <footer> <aside>중 어느 위치도 상관없다.
즉, <body>태그 안에는 어디든 사용할 수 있다.
# <artice>태그는 웹페이지 상에서의 실제 내용을 의미한다.
<article>태그의 특징
1. <article>태그를 사용한 웹텐츠는 다른 곳에 배포하거나 재사용할 수 있다. 검색엔진의 검색로봇에서는 <article> 태그가 사용된 컨텐츠를 배포할 수 있는 컨텐츠로 인식한다.
2. 본문 내용에서 독립적으로 분리 할 수 있는 기사의 덩어리
# div태그는 브라우저가 그 안에 뭐가들어가있는지 모름.
하지만, header, article, nav 태그들은 컨텐츠가 안에 있으면
브라우저가 그 안에 뭐가들어가있는지 인식한다.
그런의미에서 의미가 있는 태그, 의미론적태그다.
sementic태그!
# <section>태그는 웹컨텐츠들을 그룹으로 묶어주는 역할을 담당.
<section>태그의 특징
1. <section>태그로 내용을 묶은 후 그 안에서 <article>태그를 사용할 수 있다.
2. <section>태그로 내용을 묶은 후 그 안에서또 다른 <section>태그를 사용할 수 있다.
3. <section>태그로 묶을시 하나의 제목으로 정의될 수 있는 연관성 있는 것들을 <section>태그로 묶어주는 것이 좋다. 사실, section태그가 조금 어렵다.
# <aside>태그는 웹컨텐츠 제작시 주 내용이 아닌 왼쪽이나 오른쪽에 부수적인 내용이 들어가는 부분 표현.
# <footer>태그는 웹사이트의 저작권 정보나 저작권표기와 같은 내용이 들어가는 부분.
'IT' 카테고리의 다른 글
| CSS / 인라인방식 / 내부선언방식 / 외부선언방식 / 선택자 (0) | 2022.06.24 |
|---|---|
| 코딩연습 / 복습 / 공부 : semantic tag (0) | 2022.06.23 |
| audio / form / input / radio / select / checkbox / label 태그연습 (0) | 2022.06.21 |
| 다양한 태그들 연습 p / ol / ul / li / dd / dt / tr / td / th (0) | 2022.06.20 |
| 서브라임 에밋 Emmet / html attribute, list, table (0) | 2022.06.19 |