표(table)는 2차원 격자형태로 이루어진 데이터를 의미한다. 1. table 태그 HTML에서 표를 생성할 때 table 태그를 사용한다. form태그와 마찬가지로 표 관련 태그는 모두 table 태그 안에서 사용한다. 💡 2.caption 태그 💡 표를 생성할 때 웹 접근성을 향상하는 방법 중 하나가 표 제목을 설정하는 것이다. 반드시 표 제목을 만드는 caption 태그를 사용해야 한다. caption 태그는 table 태그 안에서 가장 첫 번째로 사용해야 한다. 3. tr 태그 tr(table row)태그는 표에서 행을 생성할 때 사용한다. tr태그 하나당 행 하나를 생성, 여러 개의 행을 만들고 싶다면 tr 태그를 여러 번 사용하면 된다. 4. th, td 태그 th(table header) ..
👨💻 Programming/HTML
폼(form)은 HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식을 의미한다. 웹페이지에서 폼은 매우 흔하게 찾아 볼 수 있다. ex) 네이버 로그인 화면 로그인 상태 유지 체크박스 아이디 비번 입력창 로그인, 회원가입, 아이디, 비번 찾기 등등 1. form 태그 form 태그는 폼 양식을 의미하는 태그이다. HTML의 폼을 구성하는 태그는 모두 form 태그 안에 작성한다. 양식 💡 상호작용 요소 명시적인 방법 label 태그의 for 속성과 상호작용 요소의 id 속성을 같은 값으로 설정하는 방법 비밀번호 암묵적인 방법 + 명시적인 방법 비밀번호 4. fieldset와 legend 태그 form태그 안에 사용된 상호작용 요소를 fieldset 태그를 통해 그룹지을 수 있다...
텍스트를 강조할때 사용하는 태그에 대해 정리하겠다. 1. strong 태그 텍스트 강조시 사용한다. 텍스트를 굵게하는 것 뿐 아니라 웹브라우저에 중요한 부분임을 알려준다. 중첩 사용이 가능하다! 형식 💡 강조하고 싶은 텍스트 시설사용자는 아래 안내 되어있는 수칙을 반드시 지켜야합니다 시설사용자는 아래 안내 되어있는 수칙을 반드시 지켜야합니다 2. em태그 em(emphasis)태그 역시 텍스트의 의미를 강조하고 싶을때 사용한다. 기울임 효과를 준다. 마찬가지로 중첩이 가능하다. 중첩될수록 더욱 강조된다. 형식 💡 강조하고 싶은 텍스트 시설사용자는 아래 안내 되어있는 수칙을 반드시 지켜야합니다 과거 텍스트 강조시 b와 i 태그를 주로 사용했다고 한다. 표시되는 스타일은 거의 동일하지만 HTML이 발전하면서..
링크는 문서와 문서간 연결을 의미하며, 기본적으로 a 태그를 사용한다. 사진과 같은 이미지 객체를 삽입할때는 img 태그를 사용한다. 1. a 태그 a태그는 HTML에서 내부나 외부 링크를 생성합니다. 대상 경로를 의미하는 href 속성을 필수로 사용해야하고, 그 외에 target, title 속성을 선택 사용할 수 있다. 💡 href 속성 href 속성은 a태그로 생성하는 링크의 대상 경로를 입력할 때 사용한다. a태그 사용시 필수로 있어야한다. 속성값은 대부분 url이거나 내부 문서의 id 속성값이다. 개발 초기에 연결할 대상경로가 불분명할 경우 속성값에 ‘#’을 주로 넣는다. target 속성 a 태그로 링크가 생성될때 대상이 연결되는 방식을 지정한다. 속성값으로 _blank, _parent, _s..
목록(list)은 목차와 메뉴를 구성할때 주로 사용하지만 웹페이지의 다양한 곳에서 사용가능하다. 1. ul 태그 , li 태그 ul(unordered list) 태그는 말 그대로 순서가 없는 비 순서형 목록을 생성할때 사용된다. 이때 묵록은 li(list item) 태그로 구성된다. 판매과일 목록 사과 복숭아 딸기 출력시 li(목록 내용)마다글머리 기호가 붙는다. 2. ol 태그, li 태그 ol (oredred list)태그는 순서형 목록을 생성할때 사용합니다. ul 태그와 마찬가지로 li 태그로 목록 내용을 구성한다. 오늘 할일 아침 먹기 점심 먹기 저녁 먹기 목록 내용마다 번호가 붙는다. 3. dl 태그, dt 태그, dd 태그 dl(description list) 태그는 정의형 목록을 만들때 사용..
웹 페이지를 제작하다보면 관련 있는 요소로 그룹을 묶어야 하는 경우가 많습니다. 예를 들어, 네이버 메인 페이지는 검색 영역, 로그인 영역, 본문 배너 영역, 사이드 배너 영역 등등 나누어져있다. 이때 div, span 태그를 사용하고 이런 태그를 공간 분할 태그라고 한다. div 태그 div 태그는 블록요소와 인라인요소를 그룹으로 묶을 때 사용한다. 형식 💡 책 소개 책을 소개하는 페이지 입니다. tv 메뉴 소개 tv 메뉴를 소개하는 페이지 입니다. div 태그를 활용해 관련 요소를 그룹으로 묶는다. HTML 문서 구조가 이해하기 쉽고 깔끔해진다. 참고로 class 속성은 CSS를 적용하기 위한 식별자로 해당 클래스 부분만 디자인을 적용 할 수 있다. span 태그 형식 span 태그는 인라인요소를 그..
