HTML&CSS 16

HTML(6) 표(table)

table 테이블을 생성할 때 사용 은 테이블 데이터의 컨테이너 요소 tr / th / td tr : table row. 테이블의 행 th : table header. 테이블의 행, 열의 제목을 나타내는 셀 td : table data. 셀 내용 caption 테이블의 제목이나 설명 table의 첫번째 자식으로 사용 필수 요소는 X 표의 목적에 대한 명확하고 상세한 설명 포함 CSS의 caption-side 속성으로 top, bottom 위치를 설정 가능 thead / tbody / tfoot 테이블의 머리글, 본문, 바닥글을 의미 구역을 나누는 요소로 사용 필수 요소는 X 코드의 가독성을 위해 명시적으로 사용 : 테이블 행 블록 내에 제목 열 그룹으로 구성할 경우 사용 : 행 블록 내에 테이블 데이터로..

HTML&CSS/HTML 2023.08.19

HTML(5) form

form 사용자에게 입력받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획. 꼭 form 태그로 묶어 줘야되나? 별도로 제출할 필요가 없다면 사용하지 않아도 됨. method 양식을 제출할 때 사용할 HTTP 메소드 Post : 양식 데이터를 요청 본문으로 전송. 브라우저에 캐시되지않고 히스토리에도 남지 않음. Post 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송. 데이터의 길이제한이 없고, GET 방식보다 보안성이 높음. enctype 속성. method의 속성이 post인 경우, enctype은 양식 제출시 데이터의 MIME유형을 나타낸다. Get : 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송. Get 방식의 HTTP 요청은 브라우저에 의해 ..

HTML&CSS/HTML 2023.08.19

HTML(4) 태그 종류

1. div & span div 콘텐츠 분할 요소. 여러 태그들을 그룹핑 하기 위한 태그. 블록 요소. CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지 않음. span 인라인 요소. div와 마찬가지로 CSS로 스타일 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지 않음. 2. Sections header 소개 및 탐색에 도움을 줌. 회사명, 제목, 로고, 검색 폼 등 요소 포함. head 태그와 혼동 주의. 헤더를 중첩 사용하거나 헤더 안에 푸터 사용 X nav navigation bar. 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크. 메뉴, 목차, 브레드크럼 등으로 사용. 페이지의 주요 탐색 링크를 위한 태그. 하나의 웹페이지에 여러 개의 nav 태그를 가질 ..

HTML&CSS/HTML 2023.08.19

HTML(3) 블록 레벨 요소와 인라인 레벨 요소

block 부모 요소의 전체 공간을 차지해서 블록을 만든다. 언제나 새로운 줄에서 시작, 좌우 양측으로 최대한 늘어나 가능한 모든 너비 차지. 이전 이후 요소 사이에서 줄 바꿈 일어남. 페이지의 구조적 요소를 나타낼 때 사용. width, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있음. ex) div, p, form 등 블록 요소는 인라인 요소 안에 중첩 X, 인라인 요소는 블록 요소 안에 중첩 O 예외) 인라인 a태그의 경우 중첩 가능 블록요소 안 인라인요소 중첩 가능 인라인요소 안 블록요소 중첩 불가능 inline 항상 블록 레벨 요소 내에 포함. 컨텐츠에 따라 할당된 공간만 차지. 문장, 단어 같은 작은 부분에 대해서 적용. 새로운 줄을 만들..

HTML&CSS/HTML 2023.08.19

HTML(2) 문서해부

VSC 에서 ! + tab 을 누르면 기본적인 html구조가 나옴. 이 문서는 html Living Standard 문서 라는 의미. html태그는 HTML문서의 루트, 최상단 요소. lang 속성을 통해 페이지의 주 언어가 무엇인지 설정 ex) lang="ko", lang="ko-KR" 기계가 식별할 수 있는 문서 정보 담는곳. 검색엔진을 위한 다양한 정보들이 담기는 곳. meta 어떤 목적을 위해 만들어진 데이터 검색엔진은 메타정보를 살펴보고 다양한 정보를 가져감. charset 문자 코드의 종류를 설정. utf-8은 국제적인 코드 규약. 전세계적인 언어를 지원 viewport width : 뷰포트의 너비를 제어. width=600 처럼 픽셀값으로 지정 가능. initial-scale : 페이지가 처..

HTML&CSS/HTML 2023.08.19

HTML(1) 기본

HTML은 요소(Elements)로 구성되어있다. 태그 (Tag) 어떤 표시를 하기 위해 붙인 꼬리표 기본적으로 시작 태그 종료 태그 의 쌍으로 구성되어있다. 웹의 대표적인 기술 HTML/CSS/JS 요소의 포함 HTML은 요소 안에 다른 요소가 들어갈 수 있다. HTML은 요소 안에 다른 요소 가 들어갈 수 있다. 주의) HTML의 경우, 오류를 알려주지 않고 웹브라우저가 임의로 결과를 보여줌. -> '웬만한 오류는 알아서 처리해준다.' 의도치 않은 화면이 나올 수도있으니, 마크업 검사 필수. https://validator.w3.org < 마크업 검사 사이트. 빈요소 / 셀프 클로징 닫는 태그가 없는 태그 존재. 주석 프로그램 동작에 영향을 미치지 않음. 설명하는 글을 적어두는곳. 매우 중요한 기밀 ..

HTML&CSS/HTML 2023.08.19