웹 페이지는 어떻게 구조를 설계할 수 있을까? 시맨틱 태그 (Semantic Tag) --시맨틱(Semantic)은 사전적으로 "의미론적"이라는 뜻으로시맨틱 웹은 더 의미 있게 웹페이지를 설계하는 트렌드라고 볼 수 있다. 이러한 트렌드에 맞춰 시맨틱 태그를 사용한다. 시맨틱 태그는HTML5에서 도입된 태그들로, 콘텐츠의 의미와 역할을 명확하게 설명하는 태그로태그의 이름만으로 "태그"와 "용도", "역할"에 대한 의미가 명확한 태그를 의미하고사람뿐만 아니라 검색 엔진과 스크린 리더도 콘텐츠 구조를 쉽게 이해할 수 있어가독성과 접근성이 향상되고, 검색 엔진 최적화에도 유리하다. HTML5 이전에는대표적으로 "table 태그", "form 태그", "a 태그" 등을 시맨틱 태그에 속했고"div 태그"..
미디어에 관련된 태그는 무엇이 있을까? audio 태그 --audio 태그는음성에 대한 미디어를 나타내는 태그로항상 "src 속성"과 함께 사용하여 "src 속성"에 오디오 파일의 경로를 정의한다.그리고 오디오 컨트롤러 패널이 웹 브라우저에 노출될 수 있도록 "controls 속성"을 추가한다. 기본 형식 예시 코드-- video 태그 --video 태그는비디오 요소를 나타낼 때 사용된다.이 또한 "audio 태그"처럼 "src 속성"과 "controls 속성"을 사용할 수 있다. 기본 형식 예시 코드-- source 태그 --source 태그는"audio 태그"와 "video 태그"에서 리소스(파일)의 경로와 미디어 타입을 명시하는 데 사용된다. 기본 형식 --
표에 관련된 태그는 무엇이 있을까? table 태그 & caption 태그 & tr, th, td 태그 --table 태그는표를 생성할 때 사용하며, 표와 관련된 태그는 모두 table 태그 안에서 사용된다. 기본 형식 caption 태그는표를 생성할 때 웹 접근성을 향상시키는 방법 중 하나로, 해당 테이블(표)의 제목을 정의한다.이때 해당 제목은 표를 기준으로 가운데 정렬된다.(caption 태그를 사용할 때는 table 태그 안에서 첫 번째로 작성해야 한다.) 기본 형식 표 제목 tr 태그는표에서 행을 생성하며, 여러 개 생성도 가능하다. 기본 형식 th 태그와 td 태그는표에서 열을 생성할 때 사용하며 "th 태그"는 표에서 제목을, "td 태그"는 표에서 일반적인 데이터를 ..
상호작용하기 위한 태그는 무엇이 있을까? form 태그 --form태그는폼 양식을 의미하는 태그로폼을 구성하는 태그는 모두 from 태그 안에 작성해야 한다. 폼(from)은 HTML에서 사용자와 상호작용을 통해 정보를 입력받고 서버로 전송하기 위한 양식을 의미한다. 기본 형식action 속성폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 적는다.method 속성입력받은 값을 서버에 전송할 때 송신 방식을 작성한다.속성 값으로는 "get" 또는 "post"를 사용할 수 있다. actions 속성과 method 속성을 같이 사용할 수 있으며해당 속성들은 서버에서 처리하므로 서버 영역 개발자가 작성하거나 알려준다.-- input 태그 --input 태그는아이디나 ..
텍스트 관련 태그는 무엇이 있을까? hn 태그 --hn 태그는제목이나 주제를 나타내는 텍스트를 표현할 때 사용된다.n은 숫자를 의미하고 1 ~ 6까지 존재한다. (h1 ~ h6) 기본 형식 제목 예시 코드 해당 내용은 제목1 입니다. 해당 내용은 제목2 입니다. 해당 내용은 제목3 입니다. 해당 내용은 제목4 입니다. 해당 내용은 제목5 입니다. 해당 내용은 제목6 입니다. "hn태그"로 작성된 텍스트는 "검색 엔진"에서 키워드로 인식하므로검색 엔진 최적화를 위해 본문에서 핵심이 되는 내용으로 제목이나 주제를 잘 선택해서 작성해야 한다. 검색 엔진은hn태그를 검색할 때 h1태그부터 단계적으로 검색한다.만약 h4태그를 사용하지 않고 h1, h2, h3, h5, h6 태그를 사용하고 있..
링크 및 이미지는 어떤 태그를 사용할까? a 태그 --a 태그는 HTML에서 내부 또는 외부에서 링크를 생성하여웹 문서에서 다른 페이지, 파일, 이메일, 전화번호 등으로 연결할 때 사용하는 태그로대상 경로를 의미하는 "href 속성"은 필수로 사용하고, 그 외에 "target 속성", "title 속성"을 선택해서 사용할 수 있다. href 속성은a 태그로 생성하는 링크의 대상 경로를 입력할 때 사용한다.href 속성 값은 대상 경로의 주소(URL)이거나 내부 문서의 id 속성 값일 수 있다.만약 대상 경로가 명확하지 않아 잠시 보류할 때에는 대상 경로 대신 "#"를 넣으면 연결되지 않는다. 링크 target 속성은a 태그로 링크를 생성할 때 대상이 연결되는 방식을 지정할 때 사용한다.속성 값 ..
목록에 관련된 태그들은 무엇이 있을까? ul 태그 (+ li 태그) --ul 태그는 순서가 없는 비순서형 목록을 생성하는 태그이며,해당 목록의 내용은 li 태그를 사용한다. 기본 형식 목록 내용 1 목록 내용 2 목록 내용 n 예시 코드공부 중인 언어 자바 자바스크립트 코틀린-- ol 태그 (+ li 태그) --ol 태그는 순서가 있는 순서형 목록을 생성할 때 사용하며해당 태그의 목록의 내용은 li 태그를 사용한다. 기본 형식 목록 내용 1 목록 내용 2 목록 내용 n 예시 코드오늘 할일 아침 스트레칭 점심 공부 저녁 헬스-- dl 태그 (+ dt태그, dd 태그) --dl 태그는 정의형 목록을 만들 때 사용하며목록의 내용에는 dt 태그와 d..
그룹 관련된 태그는 무엇이 있을까? 그룹 짓기 --HTML 코드를 작성하다 보면 관련 있는 요소들을 그룹으로 묶어야 하는 경우가 많이 존재한다. 위 그림(네이버)처럼 "검색 영역", "로그인 영역", "사이드 배너 영역", "신문 기사 영역" 등관련 있는 요소끼리 그룹이 지어져 있다. 웹 페이지를 만들 때 관련 있는 요소끼리 그룹으로 묶으면 레이아웃을 구성하기 쉬워지며,HTML 페이지의 구조를 더욱 깔끔하게 구성할 수 있다. 그룹 짓기 작업은 일반적으로 "div 태그"와 "span 태그"로 수행하며,이러한 태그를 "공간 분할 태그"라고 부른다.-- div 태그 --div 태그는블록 요소와 인라인 요소를 그룹으로 묶을 때 사용된다. 기본 형식 예시 코드ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁAAAAA..
