●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. Validator: https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org 처..
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. 안에서 간판과 같은 대제목을 이것은 제목이다.라는 것을 정확히 명시하기 위한 태그이다. 주로 Sementic HTML에 사용된다. 참고 자료 2020/10/28 - [Programing/HTML] - Semantic HTML Semantic HTML ●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이 할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용 daldalhanst..
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. embed요소는 브라우저에 설치되어 있는 플러그인이 필요한 외부 어플리케이션을 동작시킵니다. src : 내장할 자원의 주소를 나타냅니다. width : 요소의 너비를 지정합니다. height : 요소의 높이를 지정합니다. 짤, 비디오, 이미지 등등
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. audio요소는 오디오 파일을 재생합니다. src : 재생할 오디오의 주소를 지정합니다. preload : 다운로드 상태를 나타냅니다. none metadata auto autoplay : 자동 재생을 지정합니다. loop : 반복 재생을 지정합니다. controls : 브라우저의 기본 컨트롤러를 사용하도록 지정합니다. 브라우저가 audio요소에서 제공하고 있는 오디오를 재생하지 못하는 경우 audio요소 내부에 있는 내용을 출력합니다. source src : 대체..
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. figure요소는 일러스트, 다이어그램, 사진, 코드등에 주석을 다는 용도로 사용됩니다. 이 요소가 제거 되더라도 문서의 주된 흐름에는 큰 영향을 미치지 않습니다. figure요소는 figcaption 요소를 포함할 수 있으며 figure요소안에서 맨앞이나 맨 마지막에만 올 수 있습니다. 단, figcaption요소가 필수는 아닙니다. 이미지와 텍스트 등의 콘텐츠를 함께 묶어서 하나의 독립된 단위로 취급하고 싶을때 사용한다. figcaption element 는 부..
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. section요소는 문서나 응용프로그램의 일반적인 섹션을 표현합니다. 제목으로 시작하는 컨텐츠를 의미적으로 그룹핑하기 위해 사용됩니다. section요소를 사용할 수 있는 예로는 챕터나 탭으로 구분된 대화상자에서 탭된 페이지, 또는 논문의 번호가 매겨진 색션이 될 수 있습니다. 홈페이지에서는 소개, 뉴스 아이템, 연락처등이 섹션으로 분리될 수 있습니다. 요소의 컨텐츠를 배포해도 이치에 맞다면 section요소대신 article요소를 사용할것을 권장합니다. secti..
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. 1. 양식이라는 뜻이다. 웹 페이지가 상호작용할 수 있게 하기 위한 양식의 최상위 요소로 그 범위를 정의한다. input요소와 함께 쓰인다. 2. id Idenrification의 약자로 어떤 요소를 유일하게 해주는 고유하게 만들어주는 요소이다. *class와 다른점 class 어떤 집단을 명시 할 때 사용한다. 한 마디로 id를 사용했으면, 다른 곳에 중복으로 사용하면 안된다. 3. action URI이다. form의 필수속성으로 필드의 내용을 처리하는 처리하는 ..
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. 1. 표를 만들 수 있다. 2. 테이블 안에 행을 넣을 수 있다. 2-1. 테이블 안에 데이터를 넣을 수 있다. 2-1-1. colspan 열을 늘릴 수 있다. ex) Out of Town 열을 두 칸 늘렸다는 뜻이다. 2-1-2. rowspan 행을 늘릴 수 있다. Out of Town 2는 행을 두 칸 늘릴 수 있다는 뜻이다. 2-2. 테이블 안에 header이다. 표제목을 넣을 수 있다. 2-2-1. scope 행과 열에 대한 정의를 내릴 수 있다. 한 마디로..
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. 머리말이다. 태그 상위에 위치하며, 태그에서 쓰이는 코드들이 따로있다. ex) 웹브라우저의 제목을 넣을 때 필요한 태그이다. 태그 사이에 넣는 태그이다. 앵커 태그라고 불리며, 외부나 내부 페이지, 또는 동일한 페이지의 콘텐츠에 연결(책갈피 역할)하는 데 사용한다. 링크를 설정할 수 있는 태그이다. 혼자서 기능을 수행하지 못하며, 태그와 태그와 함께 사용한다. href : ex) hypertext reference(참조)의 줄임말이다. 링크 주소를 지정하는 하나의 ..
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. HTML로 코딩을 시작할 때 먼저 입력하는 코드로 해당 페이지는 HTML 5.0으로 작성하겠다는 의미로 앞에 명시한다. *HTML 버전별로 사용하는 태그가 다르다. *버전을 명시해서 브라우저가 페이지를 올바르게 표시하기 위해 사용한다. (브라우저에게 버전을 알려주기 위해) 맞지않는 코드를 사용했을 때 브라우저가 알아 먹지 못할 수도 있기 때문이다. 을 작성하고 바로 아래에 쓰이는 코드로 문서 전체를 로 덮어야 한다. 이 역시 브라우저가 이 전체 코드가 HTML 코드..
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. 동영상 태그이다. width height controls Video not supported 등의 속성이 있는데, 하나하나 보면, width는 가로 길이를 의미하고, height는 세로길이를 의미한다. controls는 일시중지와 재생 및 건너뛰기 기능을 추가할 수 있는 속성이다. 비디오나 동영상이 만약 오류가 있어, 비디오 로드를 할 수 없는 경우에 이 문구가 뜨게 만드는 것이다. 아래 식 처럼 와 사이에 입력한다. 예를 들어, Video not supported..
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이 할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. 굵은 글씨체로 중요한 표현을 할 때 사용. 와 나타나는 표현은 같지만, strong은 예를 들어 시각 장애인을 위한 소리 내 읽어주는 프로그램을 만들 때 기능을 추가해 사용하는 등의 응용이 가능하다. 이 차이점이 중요하다. 는 단순한 굵은 글씨체 은 중요한 굵은 글씨체 글자를 기울게 해준다. 줄을 바꿔준다. 예를 들어, 를 사용하면 줄도 두번 내려간다. List Item 이나 사용시 리스트를 만들 때 사용한다. Unordered Lists 순서가 필요하지 않는 리..
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이 할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. 이미지 삽입 시 사용 source를 넣어 사용한다. 예를 들어, 슬래시를 넣든 안넣든 상관은 없다.(스스로 닫는 태그이다) -관련 속성- src Source 이미지의 속성이다. 출처라는 의미이다. 이미지나 링크 삽입시 사용한다. alt 이미지의 속성이다. 이미지의 마우스 커서를 가져다 대었을 때 이미지에 대한 설명이 나오게 하기 위함이다. 적지 않아도 되지만, 1. 웹 접근성 2. 검색 엔진 최적화 3. 오류 발생 시 정보 확인 을 위해서 적는게 좋을 수도 있다...
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이 할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. Bold 굵은 글씨를 적용할 때 사용한다. 과 나타나는 표현은 같지만, strong은 예를 들어 시각 장애인을 위한 소리 내 읽어주는 프로그램을 만들 때 기능을 추가해 사용하는 등의 응용이 가능하다. 이 차이점이 중요하다. 는 단순한 굵은 글씨체 은 중요한 굵은 글씨체
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이 할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. 의미가 잘 드러나는 웹이라는 뜻이다. 시맨틱 HTML은 태그 사이에있는 내용에 대한 컨텍스트를 제공하는 특정 요소를 통해 페이지에 의미를 도입합니다. 시맨틱 HTML은 최신 표준이며 화면 판독기를 사용하여 웹 페이지를 번역하고 웹 사이트의 SEO를 향상시키는 사람들이 웹 사이트에 액세스 할 수 있도록합니다. , , 및 웹 페이지의 기본 구조를 만들 수 있습니다. 장, 제목 또는 테마가 같은 문서의 다른 영역과 같은 문서의 요소를 정의합니다. 기사, 블로그, 댓글 ..
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이 할 수 있으며,제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. Navigational Links Home Posts Contact 위에 디브로 써놓은 태그들을 헤더와 나브로 표현할 수 있다.헤드와 나브로 표시하면 더 쉽게 읽을 수 있다. Navigational Links Home Posts Contact 이런식으로 디브를 헤더와 나브, 메인이나 푸터등 굳이 디브를 사용하지 않아도간소화할수 있다.
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이 할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. World Wide Web Consortium 웹 표준을 개발하는 커뮤니티이다. 웹 표준을 정의했다. 어떤 태그는 필요하지 않고, 어떤 태그는 시대의 요구에 의해서 필요하다 판단하는 국제기구이다. 이 국제기구의 의장은 HTML의 창시자이기도 한 팀 버너스리이다.
●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이 할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다. 코딩을 새로 시작하기 앞서, HTML의 뜻과 여러가지 의미를 알아보기 위해 작성했습니다. HTML의 의미 HYPER TEXT MARK UP LANGUAGE의 약자이다. 웹 문서를 연결해주는 언어 하이퍼텍스트는 링크와 링크가 연결되어 잇는 문서를 의미하며, 이 수많은 문서를 연결하는 것을 링크라고 하고, 이렇게 무수한 링크들이 여러다발로 연결되어 있는 것을 웹이라고 말한다. 곧, 링크는 HTML의 본질이자, HTML의 본질은 웹의 본질이다. HTML을 추상적으로 보..