본문 바로가기

IT_Developers/HTML27

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.
HTML - 테두리 없는 iframe 만들기 아이프레임 라인 없애기 안녕하세요. 고코더 입니다. iframe은 나눠져 있는 페이지를 하나로 모으기 좋은 태그 입니다. 하지만 기본 아이프레임은 테두리 경계선과 스크롤이 기본으로 포함되어 있습니다. ● 1. 홈페이지에 출간 페이지를 만들어 입력했지만 프레임 흔적이 나타납니다. 이 테두리와 스크롤등 자연스럽게 아이프레임이 페이지에 녹아들도록 변경해보겠습니다. ● 2. 사용할 프레임 태그는 이렇습니다. 2019. 10. 28.
JSON 정렬 - 제이슨 정리 사이트 2곳 / 가독성 있게 정렬, 데이터 보기 쉽게 정렬 사이트에서 JSON을 보기 편하게 안녕하세요.고코더 입니다. JSON 데이터를 개발하다보면 띄워쓰기 없이 일그러져 있는 데이터를 보느라 눈이 아픕니다.각 IDE마다. 브라우저에 JSON 뷰어 기능도 많지만 순수 데이터를 정렬할 수 있게 도와주는사이트를 소개하려고 합니다. ● 1. Json Parser Online 처음 소개할 사이트는 JSON을 입력하면 인식하여 바로 보기 좋게 정렬해주는 사이트 입니다..fr 을 보니 프랑스 사이트네요. 그래서 정렬이 가장 이쁘나 싶습니다.사이트로 접속해보면 왼쪽에는 json 데이터 입력창이 오른쪽은 정렬된 데이터를 확인 가능합니다.http://json.parser.online.fr/ JSON을 입력하면 즉시 오른쪽에 정렬 됩니다. 화면에 보여질 내용을 변경하는 옵션도 .. 2019. 10. 14.
MHT - 오프라인에서 볼 수 있는 MHTML 이란? 웹페이지를 하나의 파일로 저장된 MHTML 안녕하세요.고코더 입니다. ● 1. 오늘 우리가 알아볼 형식은MHTML (Mine HTML) 이라고 합니다.이 방식은 마이크로 소프트가 익스플로러 5을 도입했던 방법입니다. 예로 크롬에서 웹페이지를 저장하면 바로 mhtml 형식으로 하나에 페이지로 저장이 됩니다.이미지가 모두 하나에 파이로 저장 되는 형식입니다.-> 브라우저 - 현재 페이지 저장 / 크롬 / IE ● 2. 다음번에 다시 웹페이지를 보고 싶으면 해당 파일만 열면 인터넷 없이도 보기가 가능합니다. ● 3. 그래서 mhtml 코드를 확인하면 텍스트화된 이미지 정보까지 확인이 가능합니다. 파일 용량도 큰편입니다. 관리하기 쉽고 열어보기 편하지만 가끔 브라우저마다 결과 값이 달라보이는 경우도 있습니다. .. 2019. 9. 26.
WebSocket - 웹소켓 이란? 면접에서 웹소켓을 물어보면? 간단하게 알아보기 안녕하세요. 고코더 입니다. ● 1. 웹소켓이란 단어를 많이 들어봤지만 설명하라고 하면 입이 떨어지지 않는 주제입니다. 우선 소켓은 네트워크에 가장 기초적인 개념입니다. 통신을 위해 두 지점을 말합니다. 통신의 통로입니다. 여기서 Web이란 단어를 합성해서 "웹소켓"으로 불립니다. 기본 적으로 웹소켓은 Stateful Protocol 방식입니다. 한번 연결된 네트워크 라인 통신을 통해 데이터를 양측에 주고 받을 수 있습니다. 즉 기본 request, response 방법이 아닌 연결을 유지한채 정보를 주고 받는 방법입니다. HTML5에서는 이런 웹소켓 방식을 2009년 부터 공식 지원하고 있습니다. 1websocket = new WebSocket(URL);c.. 2019. 9. 17.