html 문법 정리 (강의)

240624~240701

html 문법정리 (kdt 강의 내용)

html 문법

html : hyper text markup language의 줄임말

html ver.5 (가장 최신 버전 2024기준)

!DOCTYPE html => html언어를 쓰겠다
html lang="ko" => 모국어가 무엇인가?

공간분할태그

1) block요소 태그

• 한줄(한 행)을 모두 가져가는 속성
• div/header/h($)/p
• width & height & margin & padding 모두 다 적용 가능

2) inline요소 태그

• 본인의 너비 및 높이값만큼만 공간을 차지하는 속성
• span / label / input
• width & height 적용 불가
• margin & padding 좌,우 가능 / 상,하 적용 불가

3) inline-block 요소 속성

4) 만약 부모요소 disply : flex => 자식요소는 block으로 바뀜

5) block vs inline-block

html은 head / body로 이루어진다.

head (웹브라우즈 화면에 출력되지 않는다.)

charset = "UTF-8" => 웹을 사용하는 국가들의 언어가 출력되도록 협약해놓은 코드
viewport => 사용자가 보는 디바이스 화면
width=divice-width => 디바이스의 화면으로 화면을 조정
initial-scale=1.0 => 1:1의 비율로 줄여라 (화질저하x), 없으면 반응형이 먹지않는다.

title => 상단탭 이름

body (실제 출력 공간)

자세한 속성값 참고 => MDN

속성과 속성값
주석 : ctrl + /

single tag(호태그) VS multi tag : 열고닫는 형식
-싱글태그 : a/img/br/hr 등

속성과 속성값이 같은 경우 생략가능 (ex. controls="controls")

1. h$태그

• heading의 줄임말, 제목을 뜻함 (h1~h6)
• h1>h6 (h1:32px)
• 기본 속성이 없는 태그
• 어떤 단락에서 타이틀을 정의
  
  

2. p 태그

• paragrph 태그
• 문장을 입력하고자 할 때
• dummy 문장을 활용해서 임시로 문자열 입력
• lorem을 활용하여 dummy text 작성 가능
  
  

3. br 태그

• break 태그 <.br />
• 줄바꿈 태그
  
  

4. hr 태그

• horizonatal Ruler 태그 <.hr />
• 수평으로 선을 만드는 태그
• 선호되지는 않음. (너비를 전체너비를 가져감)
  
  

5. a 태그

• anchor 태그
• 특정 요소를 어딘가로 이동시켜주는 태그 (ex. 링크)
• 반드시 href와 같은 속성(속성값)이 필요한 태그
• 고유한 스타일 존재 => 초기 reset을 활용해서 제거하고 사용하는게 일반적
  text-decoration: none;
  color: inherit;
• 문서상에서 내부이동 가능
  href에 id, class값 기입하면 웹 내 section으로 이동가능
• 1개의 요소 안에서 복수의 링크를 설정
  (map, area 활용, 이미지 좌표 확인 => image-map )
• 함께 사용가능한 속성
  href : 링크 주소
  target = "_blank" : 현재 보고있는 탭은 그대로, 새로운 페이지 연결
  
  
  

6. audio/video 태그

• audio>source src="" 를 쓰는게 일반적
• autoplay 지양, 광고문제로 차단될 수가 있음
• 실무에서는 그렇게까지 많이 사용할 상황이 안따르는 편
  
  

7. 목록태그

• ul / ol 태그
  unorder list (카운팅을 하지 않기 위한 목록)
  order list (순차적으로 카운팅을 하기 위한 목록)의 약자
• li 태그가 함께해야지만 목록 기능을 적용
• *중첩목록 : li 안에 ul/ol 만들 수 있음
  
  

8. table 태그

• table > tr(행) / td(table data = 열)
• 열 가운데서 대표격인 열 : th(table header, text가 두꺼워진다.)
• html5 문법 > semantic 태그를 쓰자! (*의미없이 사용하는 div 태그 지양)
• 만약 table > thead / tbody / tfoot 인지 선언해라 _권장되고 있음
  없이 코드를 작성했더라도 thead / tbody / tfoot이 들어갈 수 있음을 인지
• 함께 사용 가능한 태그
  colsapn : 열을 병합하는 기능, 본인을 포함해서 병합(카운트시 확인)
  rowspan : 행을 병합하는 기능, 본인을 포함해서 병합
• 프로그래밍 언어 영역 => 짝수(even), 홀수(odd)
• row(행)을 그룹하는 것은 어렵지 않음 => tr / thead / tfoot etc...
• column(열)을 그룹하는 것은 1가지 방법!
  colgroup > col : 몇개의 열을 선택? => span 태그 사용
• thead&tfoot은 colgroup보다 스타일 우선 적용
  
  

9. mark 태그

• text 뒷 배경컬러(형광)
  
  

10. b 태그

• bold의 약자
• text를 두껍게 해주는 태그
  
  

11. figure & figcaption 태그

• 항상 함께 써야하는 태그
• 보통 일반적으로 테이블 태그 등을 사용할 때, 해당 요소의 타이틀을 정의하고자 할 때 사용
  
  

12. form 태그

• 입력양식 태그 같이 사용해야만 form태그는 제 기능을 할 수 있음 (단독사용x)
• action, method 속성을 갖고 있음
  - action : client(웹브라우저)로부터 특정 값을 받아서 server로 해당 값을 전송을 해야할 시, 전송할 위치 경로를 정의하는 속성
  - method : 사용자에게 값을 받아서 처리하는 방식을 어떻게 할 것인지 구분하기 위한 속성
  1) get : 사용자가 이벽한 값을 서버에게 전달을 한 경우, 해당 값에 매칭되어지는 페이지를 서버가 반환하도록 하는 method 방식
  2) post : 단순히 특정 페이지를 가져와라가 아니라, 사용자가 입력한 값을 반영한 업데이트되어진 페이지를 가져오고 싶을때 사용하는 방식 (ex. 유튜브 댓글)
  
  
• label : for 속성값 = input id 속성값 일치하는 경우, label 태그로 input 태그를 선택할 수 있도록 할 수 있음
• input type = "text" 아이디 및 텍스트 값을 받고자 할 때 사용
• input type = "password" : 패스워드 같은 비밀스러운 값을 받고자 할 때
• input type = "radio" : 여러개 후보들 중에 1개를 선택하고자 할 때
• input type = "checkbox" : 여러개 후보들을 동시에 선택하고자 할 때
• input type = "file" : 서버에 어떤 데이터를 업로드 하고자 할 때
  
  
• select :여러개의 옵션들 중에서 하나를 선택할 수 있도록 해주는 form 입력양식 태그
• select태그의 경우, 내부적으로 option 태그와 함께 사용해야만 정상적인 기능을 구현할 수 있음
  (tip; option 태그 중에서 메뉴명으로는 출력이 되나, 실제 사용자가 선택하지 못하도록 설정 => selected disabled 속성)
• option 요소들을 그룹화 할 수 있음 => optgroup이라는 태그 사용
• form 태그 내부 요소들을 하나로 그룹핑하고, 해당 요소들의 대표타이틀을 생성!
  1) fieldset : 해당 form요소가 어떤 성격인지를 구분시키기 위한 목적 사용
  2) legend : fieldset의 타이틀을 생성해주는 역할
  
  

13. Semantic (시멘틱) 태그

• 의미를 갖고 있는 / 의미론적인
  
  
• header : 문서상에 헤더의 역할 => 머릿글 || 인트로 역할
• nav : GNB || LNB 와 같은 네비게이션 목록 역할
• aside : 사이드 측면 영역이 배너 혹은 지면 역할
• section : 실제 문서상의 본문 역할
• article : section 태그 안에 소단락(세부영역) 나누는 역할
• footer : 문서상에 푸터의 역할 => 꼬릿말 || 에필로그