html5 [HTML5] 시맨틱 태그(Semantic Tag)에 대하여 시맨틱 태그(Semantic Tag)라는건데요. 🤔 왜 시맨틱 태그를 사용을 해야하는지 그 이유에 대해서 찾아봤는데 생각보다 간단 했습니다! 두 코드는 똑같이 브라우저에서는 잘 출력이 되는 것을 확인 할 수 있습니다! 두 번째 코드를 볼 경우 <ul>(Unordered List) 태그 안에 <li>(List)태그를 사용함 으로써 과일이 하나하나씩 나열 되어 있는 것을 알 수 있겠죠? <div... html5html5 [HTML5]01.기본 구조 수업에서 자바를 상속, 인터페이스 예외처리 등 얼추 다 나가고 이제 html을 배우기 시작했습니다. html은 해본적이 거의 없기에 열심히 배우고 매일 수업 때 배운걸 적어둘려고 합니다. HTML5 문서의 기본 구조 !DOCTYPE html은 현재 문서의 html 버전을 알려주는 html 문법의 시작입니다. html, /html를 통해 html 문서의 시작과 끝을 알려주고 head는 문서의 ... 국비html5html5 시멘틱 Semantic 태그를 써야되는 이유 nav-bar를 찾기 위해 div태그들 사이를 파헤쳐야지만 찾을 수 있다. 내가 쓴 코드라면 기억을 되살려서 알 수 있겠지만 팀원들이 봤을 때는 인상이 찌푸려질 수 있는 상황이다. 만약에 div태그가 아닌 같은 기능을 가진 태그지만 의미를 부여하면? 이처럼 태그들만 봐도 Viewpoint를 봤을 때 어떤 레이아웃 구조를 가졌는지 알 수 있고 또 어떤 스타일을 가졌는지 한눈에 예측이 가능해 타... html5html5 목록과 표 형식 표현을 위한 태그 목록 태그는 네비게이션 메뉴(반응형 메뉴)를 만들 때 자주 사용한다. 0. li 태그 List Item의 약자로 ul 태그와 ol 태그의 내부에서 사용되는 태그이다. 목록의 내용이 되는 실질적인 태그로, 들여쓰기 및 줄바꿈 기능이 있으며 type 속성으로 다양한 기호를 사용할 수 있다. 1. ul 태그 unordered List의 약자로 순서가 없는 목록을 의미한다. ul 태그 및 li 태그... html5html5 HTML5_02_글자관련태그 줄 바꿈 태그 : <br> 줄 바꾸면서 수평선 넣는 태그 : <hr> 문단 영역을 나누는 태그로는 p태그와 pre태그가 있다. <p> 단락을 구분하는 태그 p 태그는 문단 영역을 나누는 태그지만 한 개의 공백만 표시하며 ✨줄바꿈 입력을 br태그로 지정해 주어야 한다. ✨✨여러 개의 공백 : <pre> 여러 칸 띄우기 혹은 줄바꿈 등을 포함하여 ✨✨입력한 내용 그대로 표현하는 태그... html5html5 웹페이지를 구성하는 기본 태그 html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. (단, <!DOCTYPE html>은 예외) head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다. (메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터이다. <title> <style> <meta> <link> <script> <base> ... html5html5 웹표준에 대해서 웹표준통합에 대하여 웹표준은 WHATWG와 W3C가 발표하는 HTML의 최신버전을 말했다. 2019년 까지는 각자 표준을 발표했었는데 결국 두 단체중에 WHATWG사가 경쟁에서 이기게 되면서 양해각서를 체결했다. 현재 w3c에서 개발하던 HTML5.3은 개발이 중단됐고, WHATWG의 Living Standard가 표준이 되었다. w3c의 마지막 표준은 2017년에 발표한 html5.2버전이... 웹표준htmlhtml living srandardhtml5html html5 시맨틱 태그 기초다지기 🌱 따라서, 하나의 문서 안에 여러 개 <header>태그가 올 수 있다. 🌱 <header> 내부에는 또다른 <header>나 <footer>,<address>등을 담을 수 없다. 🌱 위치는 자유롭게 정할 수 있다. 🌱 <header>,<nav>,<aside>,<footer> 등 문서에 반복되는 콘텐츠를 포함시키면 안된다. 🌱 문서의 바닥글을 나타낼 수 있고 섹션의 꼬릿말을 나타낼 수 있다... html5시맨틱 태그html5 html5 _ <table> 태그 정리 웹페이지가 화면이 아닌 음성으로만 지원되는 환경(스크린 리더)에서는 테이블에 대한 정보를 마크업한 순서대로 접근하여 읽어 주기 때문에 <thead>다음 <tfoot>에 대한 정보를 먼저 제공하여 전체적인 내용을 파악할 수 있게 하고 그다음 본문으로 내려가도록 하는 것이 효율적인 방법이다. "구분" → "상반기 판매수" → "태블릿 PC 2만 대" → "스마트폰 5만 대" 첫 번째 테이블 마크... xhtml웹표준html5html5 list tag list를 작성할 때 있어서 필요한 요소인 것들을 학습하기 위해서 찾아봤다. 보통 리스트를 작성할 때 몇 개는 작성하고 수정하기 쉽지만 그 수가 많아질수록 수정하기 힘들어진다. 그렇기에 리스트를 작성하는 코드는 효율적인 코딩을 위해서 매우 중요한 부분이라고 생각한다. 목록(list) 순서가 없는 목록 순서가 있는 목록 type attribute 로마자나 숫자 등이 표기되고, value에 숫자... html5html5 XHTML 정리 _기초 이론 만약 잘못된 구조로 마크업을 한다면 CSS(디자인)와 Javascript(동작)를 적용 할 때 어려움이 있을 뿐 아니라, 잘 적용한다 하여도 제 기능과 역할을 수행하지 못하는 부실한 웹페이지가 나올 수 밖에 없다. <p>, <span>, <a> 등과 같이 명령어의 형태가 '<>(각 괄호)'로 되어있는 것을 태그(tag) 라 하며, <p> ~ </p> 와 같이 태그의 (<>)과 끝(</>)을 ... xhtml웹표준html5html5
[HTML5] 시맨틱 태그(Semantic Tag)에 대하여 시맨틱 태그(Semantic Tag)라는건데요. 🤔 왜 시맨틱 태그를 사용을 해야하는지 그 이유에 대해서 찾아봤는데 생각보다 간단 했습니다! 두 코드는 똑같이 브라우저에서는 잘 출력이 되는 것을 확인 할 수 있습니다! 두 번째 코드를 볼 경우 <ul>(Unordered List) 태그 안에 <li>(List)태그를 사용함 으로써 과일이 하나하나씩 나열 되어 있는 것을 알 수 있겠죠? <div... html5html5 [HTML5]01.기본 구조 수업에서 자바를 상속, 인터페이스 예외처리 등 얼추 다 나가고 이제 html을 배우기 시작했습니다. html은 해본적이 거의 없기에 열심히 배우고 매일 수업 때 배운걸 적어둘려고 합니다. HTML5 문서의 기본 구조 !DOCTYPE html은 현재 문서의 html 버전을 알려주는 html 문법의 시작입니다. html, /html를 통해 html 문서의 시작과 끝을 알려주고 head는 문서의 ... 국비html5html5 시멘틱 Semantic 태그를 써야되는 이유 nav-bar를 찾기 위해 div태그들 사이를 파헤쳐야지만 찾을 수 있다. 내가 쓴 코드라면 기억을 되살려서 알 수 있겠지만 팀원들이 봤을 때는 인상이 찌푸려질 수 있는 상황이다. 만약에 div태그가 아닌 같은 기능을 가진 태그지만 의미를 부여하면? 이처럼 태그들만 봐도 Viewpoint를 봤을 때 어떤 레이아웃 구조를 가졌는지 알 수 있고 또 어떤 스타일을 가졌는지 한눈에 예측이 가능해 타... html5html5 목록과 표 형식 표현을 위한 태그 목록 태그는 네비게이션 메뉴(반응형 메뉴)를 만들 때 자주 사용한다. 0. li 태그 List Item의 약자로 ul 태그와 ol 태그의 내부에서 사용되는 태그이다. 목록의 내용이 되는 실질적인 태그로, 들여쓰기 및 줄바꿈 기능이 있으며 type 속성으로 다양한 기호를 사용할 수 있다. 1. ul 태그 unordered List의 약자로 순서가 없는 목록을 의미한다. ul 태그 및 li 태그... html5html5 HTML5_02_글자관련태그 줄 바꿈 태그 : <br> 줄 바꾸면서 수평선 넣는 태그 : <hr> 문단 영역을 나누는 태그로는 p태그와 pre태그가 있다. <p> 단락을 구분하는 태그 p 태그는 문단 영역을 나누는 태그지만 한 개의 공백만 표시하며 ✨줄바꿈 입력을 br태그로 지정해 주어야 한다. ✨✨여러 개의 공백 : <pre> 여러 칸 띄우기 혹은 줄바꿈 등을 포함하여 ✨✨입력한 내용 그대로 표현하는 태그... html5html5 웹페이지를 구성하는 기본 태그 html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. (단, <!DOCTYPE html>은 예외) head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다. (메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터이다. <title> <style> <meta> <link> <script> <base> ... html5html5 웹표준에 대해서 웹표준통합에 대하여 웹표준은 WHATWG와 W3C가 발표하는 HTML의 최신버전을 말했다. 2019년 까지는 각자 표준을 발표했었는데 결국 두 단체중에 WHATWG사가 경쟁에서 이기게 되면서 양해각서를 체결했다. 현재 w3c에서 개발하던 HTML5.3은 개발이 중단됐고, WHATWG의 Living Standard가 표준이 되었다. w3c의 마지막 표준은 2017년에 발표한 html5.2버전이... 웹표준htmlhtml living srandardhtml5html html5 시맨틱 태그 기초다지기 🌱 따라서, 하나의 문서 안에 여러 개 <header>태그가 올 수 있다. 🌱 <header> 내부에는 또다른 <header>나 <footer>,<address>등을 담을 수 없다. 🌱 위치는 자유롭게 정할 수 있다. 🌱 <header>,<nav>,<aside>,<footer> 등 문서에 반복되는 콘텐츠를 포함시키면 안된다. 🌱 문서의 바닥글을 나타낼 수 있고 섹션의 꼬릿말을 나타낼 수 있다... html5시맨틱 태그html5 html5 _ <table> 태그 정리 웹페이지가 화면이 아닌 음성으로만 지원되는 환경(스크린 리더)에서는 테이블에 대한 정보를 마크업한 순서대로 접근하여 읽어 주기 때문에 <thead>다음 <tfoot>에 대한 정보를 먼저 제공하여 전체적인 내용을 파악할 수 있게 하고 그다음 본문으로 내려가도록 하는 것이 효율적인 방법이다. "구분" → "상반기 판매수" → "태블릿 PC 2만 대" → "스마트폰 5만 대" 첫 번째 테이블 마크... xhtml웹표준html5html5 list tag list를 작성할 때 있어서 필요한 요소인 것들을 학습하기 위해서 찾아봤다. 보통 리스트를 작성할 때 몇 개는 작성하고 수정하기 쉽지만 그 수가 많아질수록 수정하기 힘들어진다. 그렇기에 리스트를 작성하는 코드는 효율적인 코딩을 위해서 매우 중요한 부분이라고 생각한다. 목록(list) 순서가 없는 목록 순서가 있는 목록 type attribute 로마자나 숫자 등이 표기되고, value에 숫자... html5html5 XHTML 정리 _기초 이론 만약 잘못된 구조로 마크업을 한다면 CSS(디자인)와 Javascript(동작)를 적용 할 때 어려움이 있을 뿐 아니라, 잘 적용한다 하여도 제 기능과 역할을 수행하지 못하는 부실한 웹페이지가 나올 수 밖에 없다. <p>, <span>, <a> 등과 같이 명령어의 형태가 '<>(각 괄호)'로 되어있는 것을 태그(tag) 라 하며, <p> ~ </p> 와 같이 태그의 (<>)과 끝(</>)을 ... xhtml웹표준html5html5