HTML

문서 정보 관리하기 - 메타 데이터 HTML 문서에 대한 메타 데이터를 정의 항상 head 태그의 안에 들어가며, 일반적으로 문자 세트, 페이지 설명, 키워드, 문자의 작성자 및 뷰포트 설정을 지정하는데 사용 웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고, 검색결과에 반영할수 있기때문에 사용 meta 태그가 제공하는 메타데이터의 유형과 속성 charset : 문자 세트 http-equiv : 콘텐츠 속성 정보에 대한 http 헤더 name : 문서 정보 content : 메타데이터 내용

의미론적인 코드 - 시맨틱 태그 개발자와 브라우저에게 의미를 제고하는 태그 콘텐츠 태그명은 ‘이 요소가 가진 목적이나 역할은 무엇인가?’를 나타냄 검색엔진에게 좋은 단서가 됨 대부분의 시멘틱 태그는 컨테이너 태그와 같이 특별한 스타일을 제공하지 않지만 이점을 가져다 줌 검색엔진은 시맨틱 태그를 중요한 단서로 봄 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 참조 됨 코드의 가독성이 좋아짐 컨테이너의 남용을 방지할 수 있어 코드 쓰기가 편함 대표적인 시맨틱 태그들 태그명 의미 태그명 의미

입력 양식을 만들어 주는 은 사용자가 입력한 데이터를 서버로 보내는 것을 목적으로 사용하는 태그 로그인 페이지 회원가입 페이지 검색어 입력 페이지 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출할 수 있음 입력 태그들을 포함시키면 해당 입력 요소들은 양식의 개별 항목으로 역할을 수행 서버로 전송하는 역할을 수행 시키기 위해서 사용해야 하는 속성 action : 입력 값을 전송할 서버의 url method : 클라이언트가 입력한 데이터를 어떠한 방식으로 전송할지 설정(GET or POST) 각 입력 항목에 name 속성을 넣어야 각 입력 항목의 역할을 구별해 줄 수 있음 에 속성 submit을 넣어서 제출할수 있게 제출 버튼을 마지막에 넣어야 함

input 태그 단일 태그 데이터 유형 미입력시 Text 데이터 유형 text, email, password, search, date, file 등 목적에 따라 데이터 유형을 다르게 한다. 수치를 입력받는 타입 : color(팔레트), number(스피너), range checkbox placeholder속성으로 입력부 안쪽에 글씨를 표시할 수 있음 Label 태그 입력요소에 라벨을 붙이는 역할을 한다. 이를 이용하면 사용자에게 좀 더 직관적인 입력 요소를 제공할 수 있으며 코드의 가독성 및 명확성이 향상된다. 라벨 안에 input 태그를 위치시켜 붙임 수 있음 input 태그의 아이디 부여수 for속성으로 연결시킬 수 있음 input 외의 다른 입력 태그 다수의 옵션을 포함할 수 있는 선택 메뉴를 만듦..

표 만들기 행과 열로 이루어진 구조로, 행과 열이 만나는 지점인 셀(Cell)이 콘텐츠를 나타내는 최소 단위 목록 만들기와 마찬가지로 여러 개의 태그를 채워 넣음으로 완성한다 표를 만들기 위해서 사용되는 태그 : 하나의 표를 나타내는 태그 : 표 안에서 하나의 행을 나타내는 태그 : 행 안에서 제목에 해당하는 셀을 나타내는 태그 : 행 안에서 콘텐츠에 해당하는 셀을 나태 내는 태그 속성 border : 테두리의 두께를 지정 캐그는 태그 안쪽에서 제목 또는 설명을 나타내는 역할을 수행되며 기본적으로 가운데 정렬 표의 구조 명확하게 표현하기 셀에 표시된 콘텐츠의 성격이나 표의 구조에 따라 여러 개의 셀을 그룹으로 묶어서 관리할 수 있음(컨테이너 역할을 하는 태그들이 있음) : 표의 제목이나 주제를 나타내는 ..

목록 만들기 연관이 있는 항목(item)들을 나열하는 것 순서 있는 목록과 순서 없는 목록으로 구분된다 순서 없는 목록(Unordered List) : 순서 있는 항목(Ordered List) : 리스트에 들어가는 항목 하나하나를 표현할 때는 li태그를 사용 : 항목들을 어떤 태그가 감싸느냐에 따라서 기호가 달라진다(Unordered List 인지 Ordered List인지) 목록을 만드는 데 사용되는 모든 태그는 블록 레벨 요소를 만드는 태그 start 속성으로 순서 있는 목록의 시작 값을 조정 가능 type 속성으로 순서 있는 목록의 앞 모양을 바꿀 수 있음 목록 안에 목록이 들어갈 수 있음

링크표시하기 링크란? 현재 문서에서 다른 문서로 이동할 수 있는 수단 a태그 다양한 유형의 콘텐츠로 연결되는 링크(연결) 역할을 한다. herf 특성 필요 : 해당 속성에 링크를 입력 target속성 지정으로 현재탭에서 열지, 새 탭에서 열지 결정 할 수 있음 target = “_self” : 현재 탭에서 열기(기본값) target = “_blank” : 새탭에서 열기

이미지 표시하기 이미지 태그 이미지를 표시할 때 사용하는 태그 단일태그(닫는 태그는 필요 없음) 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 함 src 속성은 이미지의 위치정보와 파일명(url or 경로) 이미지 태그의 사용법 추가 속성 alt alt는 alternative의 약자로 대체 텍스트 역할을 함 이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신 대체 텍스트가 표시 alt를 사용하면 이미지를 볼 수 없는 시각장애인에게 웹페이지를 서비스해야 하는 상황에 대한 대비가 가능 음성인식기가 이미지 대신 이를 활용 웹 접근성이 좋아짐 width, height 이미지를 표현할 때 이미지 크기를 지정 width, height 각각 너비, 높이를 지정 단위 없이 정수 ..