본문 바로가기

HTML39

HTML5 - <title> 타이틀 태그 사용법 제목 title 태그란? 안녕하세요. 고코더 입니다. ● 1. 타이틀 태그는 웹페이지의 제목을 나타내는 용도로 사용합니다. 이 태그는 웹페이지 본문에는 보이지 않지만 브라우저 탭에서 노출되는 문서를 대표하는 한 줄입니다. 그래서 이 태그 안에 있는 페이지는 검색엔진이 가장 중요하게 보는 텍스트입니다. ● 2. title 태그 사용법 사용 방법은 매우 단순합니다. 다만 지켜야 할 조건이 있습니다. - head 태그 안에서 단 하나만 선언이 가능합니다. - 문서 내에 한 번만 사용 가능 - title 태그를 없다면, HTML 문서로 인정받을 수 없다. 마무리 이 태그가 빠지면 완성도가 떨어져 보입니다. 2021. 4. 1.
HTML5 - <a> 태그 사용법 a 태그 실습하기 안녕하세요. 고코더 입니다. ● 1. 오늘은 html의 꽃 a 태그를 다루겠습니다. 이 태그의 쉬운 설명과 재밌는 내용은 제 브런치 "(https://brunch.co.kr/@gocoder/135)" 에서 확인 가능합니다. ● 2. a 태그는 인터넷을 움직이는 가장 작은 단위이자 가장 큰 파워가 있는 태그 입니다. 이 태그 덕분에 인터넷을 사용한다고 해도 무리가 아닙니다. 이번 시간에는 HTML 5버전 기준으로 A태그 사용법을 알아보겠습니다. 기본 사용법 ● 3. 가장 많이 사용하는 기본 사용법입니다. 가장 기본이 되는 속성 href는 a태그의 원초적인 기능입니다. 고코더넷 새창 열림 사용법입니다. ● 4. 다른 도메인을 사용하거나 새창을 열때 사용합니다. 고코더넷 a태그 속성 ● 5... 2021. 4. 1.
HTML - parent, child Element 란? / 부모, 자식 엘리먼트란? parent Element, child Element 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 엘리멘트의 관계를 나타내는 표현을 알아봅니다. 특정 엘리먼트는 부모(parent)와 자식(child)이라는 요소를 사용해야 합니다. ● 2. 리스트를 표현하는 엘리먼트 ● 3. 테이블(table)의 부모, 자식, 자손 엘리먼트 ● 4. 부모와 자식이 같이 사용해야 하는 엘리먼트들은 함께 사용해야 작동합니다. 즉 상위에 쓰이는 것이 부모(parent)고 그 아래가 자식(children), 자손(descendants) 엘리먼트입니다. 마무리 직속 관계가 있는 엘리먼트가 있습니다. 2021. 1. 21.
HTML - attribute(속성) 이란? attribute(속성)을 나타내는 태그 안녕하세요. 고코더 입니다. ● 1. 오늘은 HTML에서 attribute 이라는 것을 배워 보려고 합니다. 영어 사전의 이 뜻을 살펴면 아래와 같습니다. attribute 자질,속성 - 영어사전 ● 2. 예를 들면 아래와 같은 폰트 태그가 있습니다. 태그 안에 들어가는 요소들의 대한 성격 및 스타일을 나타내는 상태 구분을 말합니다. 즉 size 라는 크기와 color 라는 색깔을 지정하여 속성을 나타내었습니다. ● 3. 다시 말하면 html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소입니다. 속성은 항상 "이름='값'" 이런식의 쌍으로 된 정보가 옵니다. 만약에 아래와 같은 div요소가 있습니다. 그럼 여기서 div는 element라는 요.. 2021. 1. 20.
HTML - <h1>,<h2>,<h3>,<h4>,<h5>,<h6> 제목요소 제목 태그 사용법 안녕하세요. 고코더 입니다. ● 1. 책을 읽다 보면 언제나 제목이 중요합니다. 표지에 적혀 책의 이름을 나타내는 제목 그리고 각 챕터마다의 제목까지 나타냅니다. HTML에서도 이런 제목을 나타내는 태그가 있습니다. 바로 ,,,,, 가 그 주인공입니다. 예제 사용법 ● 2. 사용법은 아주 단순합니다. 제목 태그 안에 텍스트를 넣으면 완성입니다. 1부터 6까지 크기가 비례합니다. 1이 가장 크고 6이 가장 작습니다. 제목 레벨 1 제목 레벨 2 제목 레벨 3 제목 레벨 4 제목 레벨 5 제목 레벨 6 ● 3. 결과 화면은 아래와 같습니다. ● 4. 문서 구조의 대한 정합성을 위해서 해당 태그는 순서에 맞게 사용하는 게 좋습니다. 제목 레벨 1 제목 레벨 6 제목 레벨 1 제목 레벨 2 마.. 2021. 1. 19.
editplus - 에디터플러스에서 HTML 바로 확인하기 에디터플러스에서 HTML 바로 보기 안녕하세요. 고코더 입니다. HTML을 간단하게 연습하고 싶을때 에디터플러스를 사용하면 편리하게 연습이 가능합니다. 이 프로그램을 사용하면 가장 빠르고 쉽게 테스트 할 수 있습니다. ● 1. 에디터플러스를 실행 후에 단축키 Ctrl + Shift + B를 클릭합니다. ● 2. 그럼 자동으로 가장 필요한 HTML 태그가 자동으로 완성 됩니다. HTML부터 메타 태그 그리고 타이틀, 헤드, 바디까지 기본적인 틀이 제공 되었습니다. 여기서 Ctrl + B를 클릭합니다. 저장하지 않아도 됩니다. ● 3. 에디터플러스에서 HTML을 확인 가능합니다. 바로 HTML을 확인 가능하기에 간단한 연습에서는 최적인듯 합니다. 마무리 HTML 연습은 에디터플러스로 2020. 4. 9.
Sketch2Code - 그림을 HTML로 변환 시켜주는 사이트 손으로 그린 스케치를 HTML 템플릿으로 변경하는 온라인 사이트 안녕하세요. 고코더 입니다. ● 1. 현업에서는 HTML 모양을 손으로 그리는 경우가 많습니다. 원하는 모습에 템플릿을 코딩 전에 손으로 직접 그려보면서 컨펌하는 경우인데요. 이런 손그림을 도형으로 변경하는 사이트를 소개합니다. MS에서 운영하는 사이트 입니다. https://sketch2code.azurewebsites.net ● 2. 접속시에 샘플 파일을 제공해주는데요. 그림판으로 제가 직접 그린 이미지를 업로드해서 사용해보겠습니다. ● 3. 제가 그린 이미지는 이런 모양입니다. 인식을 좀 더 쉽게 해주기 위해 그림판으로 그렸습니다. 인풋 박스 3개에 버튼 한개 입니다. ● 4. 제가 만든 이미지가 HTML로 변경 되었습니다. 텍스트 입.. 2020. 1. 1.
에디터플러스 - HTML 태그 자동으로 닫게 하는 옵션 editplus HTML 태그 꺽쇠를 자동으로 완성 에디터 플러스는 태그를 자동으로 닫아주지 않습니다. 개발 툴 로써의 기능도 좋지만 메모장으로도 쓰는 분이 많기에해당 옵션을 사용하지 않는거 같습니다. ● 1. 예를 들면 을 써야 한다면 이처럼 닫는 태그까지 직접 써야 합니다.그런데 이런 옵션을 좋아하는 개발자가도 많습니다. ● 2. 도구에서 기본설정을 클릭합니다. 이 기본설정이 가장 많은 옵션을 변경 할 수 있습니다. ● 3. 그리고 일반에서 HTML 태그 자동으로 닫기를 체크 합니다. 닫기 태그 도움을 줄 옵션입니다. ● 4. 이제 꺽쇠를 < 시작하면 자동으로 을 완성하고 ● 5. 꺽쇠 중간에서 코드를 작성하게 해줍니다. 마무리 해당 옵션을 사용하면 쉬프트를 자주 누르지 않아서 새끼 손가락이 안아퍼서.. 2019. 10. 8.
MHT - 오프라인에서 볼 수 있는 MHTML 이란? 웹페이지를 하나의 파일로 저장된 MHTML 안녕하세요.고코더 입니다. ● 1. 오늘 우리가 알아볼 형식은MHTML (Mine HTML) 이라고 합니다.이 방식은 마이크로 소프트가 익스플로러 5을 도입했던 방법입니다. 예로 크롬에서 웹페이지를 저장하면 바로 mhtml 형식으로 하나에 페이지로 저장이 됩니다.이미지가 모두 하나에 파이로 저장 되는 형식입니다.-> 브라우저 - 현재 페이지 저장 / 크롬 / IE ● 2. 다음번에 다시 웹페이지를 보고 싶으면 해당 파일만 열면 인터넷 없이도 보기가 가능합니다. ● 3. 그래서 mhtml 코드를 확인하면 텍스트화된 이미지 정보까지 확인이 가능합니다. 파일 용량도 큰편입니다. 관리하기 쉽고 열어보기 편하지만 가끔 브라우저마다 결과 값이 달라보이는 경우도 있습니다. .. 2019. 9. 26.

티스토리툴바