본문 바로가기

HTML8

html_header_main_footer 이번 포스팅은 html에서 레이아웃을 정할때, 많이 쓰이는 태그들중에서 header, main, footer태그에 대한 내용입니다. 필자만의 생각을 담은 포스팅이니 확인해 보시고, 각자의 맞는 태그를 사용하면 됩니다. html에서 레이아웃을 정의하는 방법은 여러가지가 있습니다. 그중에서 두가지를 언급하겠습니다. 하나는, html5 이전시대에도 많이 쓰였고, 요즘에도 많이 쓰이고 있는 div태그와 id를 사용하는 방법과, 두번째는 html태그의 레이아웃 태그를 사용하는 방법이 있습니다. div를 활용해서 레이아웃을 만들때는, id를 별로도 정의해서, style을 div별로 따로따로 주어서 화면을 꾸며야 합니다. 하지만, header, main, footer로 이루어진 html의 구성에서는, 태그만으로 스타.. 2020. 12. 21.
html_li_ul_ol_태그 이번 포스팅은 html중에서, 리스트를 표현하는 태그인 li, ul, ol에 대한 내용입니다. 웹문서를 보다보면 아래의 화면과 같은, 요소들을 많이 보셨을 것입니다. 필자는 about google의 상단부분을 예로 들겠습니다. 구글 어바웃의 상단 화면의 소스를 보면, 아래의 이미지와 같습니다. ul, li, ol은 html로 웹을 표현할때, 일반적인 리스트를 나타내는것과, 위의 화면과 같이 카테고리 메뉴의 기능을 하는 것에도 많이 쓰입니다. 스크립트의 표현 방법이 세월이 갈수록 발전을 하여, 요즘은 다른 방식으로도 카테고리 메뉴와 리스트를 표현하는 방식도 있다고 합니다. ul, li, ol은 상단과, 본문 내용을 표현하는 것뿐만이 아니라, 하단요소의 다양한 메뉴들을 표현하는데도 쓰입니다. 예를들어서, 이.. 2020. 10. 14.
html_br_img_alt 이번 포스팅은 html의 , , 태그에 대한 포스팅입니다. ● 지난번 포스팅에서, 태그 내에 들어가는 text 콘텐츠들의 문단을 나누기 위해서는, 태그를 사용한다고, 다루었습니다. 문단을 나누는것은 text들 뿐만이 아닌, 여러가지 요소에서 필요로 합니다. 이미지 요소나, 기타 다른 태그들이 뒤섞여 있을때, 구분을 쉽게 하기위해서, 사이를 띄우거나 문단을 나눌 필요성이 있습니다. 구분을 위한 문단 나누기를 하는 방법으로는 여러가지가 있습니다. 그중에서 가장 쉽고, 흔한 방법은 바로 태그 입니다. 은 열고 닫는 형식의 태그와는, 다르게 단독으로 쓰여집니다. 본문태그 내에서 한줄을 띄워주기 위해서 아무리 엔터를 쳐도, 웹브라우저 상에서는 표현이 안됩니다. 반드시 태그로 "이 곳의 다음 요소부터는 아래줄에 표.. 2020. 9. 2.
html_h1_h6_p 이번 포스팅은 html의 , , 태그에 대해 알아보겠습니다. , ● 은 html의 문서 작성시, 제목을 손쉽게 표현해 주는 것과 동시에 크기도 조정되는 태그입니다. h1부터 h6까지 총 6개로 되어있습니다. html이 지금처럼 발전하기 전부터 쓰였던 태그이고, 모바일 사이트가 주를 이루는 요즘에도, 상당히 흔하게 쓰여집니다. 문서내의 태그 표기법은 아래와 같습니다. h1 글씨 크기 h2 글씨 크기 h3 글씨 크기 h4 글씨 크기 h5 글씨 크기 h6 글씨 크기 ▶링크를 클릭하면, 위에 코딩 결과를 웹사이트로 확인할 수 있습니다. 과 태그의 크기차이가 확실히 보여집니다. 간편하게 태그 하나만으로 글씨크기와 두께가 표현되어져 있어서, 제목용으로 많이 쓰입니다. 만약에 h6태그의 내용을 h1태그 글씨의 크기보.. 2020. 8. 26.
html_meta_charset_name_content 이번 포스팅에서는, html의 태그중에서 태그에 대해서 알아보겠습니다. ● 태그에 대한 설명 태그는, 작성된 html문서의 일종의 정보를 정의하는 것이라고 볼 수 있습니다. 태그는 반드시, 오늘 포스팅 내용은 html_meta_charset_name_content 에 관한 내용입니다. 위에 코딩된 내용 웹사이트로 확인하기 ▶ html에 관한 지금까지의 블로그 포스팅 내용은 아래와 같습니다. 2020/07/29 - [코딩] - html_html에디터 2020/07/23 - [코딩] - html_head, title 2020/07/09 - [코딩] - html_, 2020/07/02 - [코딩] - html_html이란? 2020. 8. 18.
html_head, title 안녕하세요. 행운공장 입니다. 이번 포스팅에서는 html의 태그를 사용합니다. ● 큰글씨 제목 문서 내용들을 표기합니다. HTML은 웹 페이지의 보여주게 해주는, 표준 마크 업 언어입니다. HTML을 사용하면 누구의 웹 사이트도 제작 가능합니다. 코딩을 하는 언어중에서 HTML은 비교적, 배우기 쉽습니다. html을 위에 예시를 보시고, 아래의 네모 공간에 한번 연습삼아, 작성해 보세요. 이곳에 html 태그 연습해 보세요. 부담 갖지 마시고, 도전해 보세요. 이 글씨는 지우고 태깅해 보세요. Quiz 1. 검색사이트의 검색결과에 첫번째로 나오는 태그는 무엇인가요? 정답을 확인 하려면, 아래 더보기를 클릭해 보세요. 더보기 2. 태그는 웹페이지의 어느 부분에 보여지나요? 정답을 확인 하려면, 아래 더보기.. 2020. 7. 23.
html_<!DOCTYPE html>,<html lang="ko"> 안녕하세요. 행운공장 입니다. 이번 포스팅에서는 html 태그중에, 과 에 대해서 알아보겠습니다. 2020/07/02 - [코딩] - html_html이란? html_html이란? 안녕하세요. 행운공장 입니다. 이번 포스팅은 html에 대한 첫번째 포스팅입니다. 앞으로, 웹에 대한 기술을 배우는 대표적인 교육용 웹 사이트인 w3schools를 기반으로 포스팅을 이어갈 예정입니다. hhwd.tistory.com ● 은 html의 문서가 웹표준으로, 작성되었음을 선언해 주는 태그 방식입니다. ● pc와 모바일 기기의, 다양한 웹브라우저에서 html문서가, 동일하게 보여지도록 하기위한 선언이라고 볼 수 있습니다. ● 은 html 문서내에서, 다른 태그와는 달리, 문서 최상단에 한번만 작성되면 됩니다. ● 은 .. 2020. 7. 9.
html_html이란? 안녕하세요. 행운공장 입니다. 이번 포스팅은 html에 대한 첫번째 포스팅입니다. 앞으로, 웹에 대한 기술을 배우는 대표적인 교육용 웹 사이트인 w3schools를 기반으로 포스팅을 이어갈 예정입니다. 1. html은 무엇인가요? HTML은 웹 페이지를 표현하기 위한, 기본적이고 표준화된 마크업 언어입니다. HTML은 Hyper Text Markup Language의 약자입니다. 쉽게 말해서, 예를 들면 책을 읽으려면, 책속에 글씨들이 책의 내용을 구성하듯이, 웹페이지도 어떠한 내용을 보여주기 위해선, 글씨같은 요소들이 필요한데, html은 그런 글씨같은 역할을 하는 것들 중에서 가장 기본이 됩니다. 2. html은 무엇으로 이루어져 있나요? html은 태그라는 요소로 이루어져 있습니다. 태그는 여러종류.. 2020. 7. 2.