본문 바로가기

IT_Developers/HTML25

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.
HTML5 - input 태그의 formaction 속성 formaction 예제 안녕하세요. 고코더 입니다. ● 1. form을 전송하는 방법은 웹프로그래밍 언어에 기본 입니다. 필요한 데이터를 로직을 처리하는 소스르 넘기는 과정입니다. 그런데 html5부터는 formaction 속성을 이용해 폼 주소를 input 박스에서 수정이 가능합니다. ● 2. 소스를 함께 살펴보겠습니다. 1234567891011121314151617181920 폼 전송 폼 전송2 목록 Colored by Color Scriptercs ● 3. formaction 속성이 없다면 post를 가로채서 스크립트를 작성하여 조건절을 걸었지만 html5에 편리한 기능 때문에 각각 다른 폼으로 전송이 가능합니다. ● 4. "폼 전송" 은 기존에 action 주소로 이동하고 ● 5. "폼 전송2".. 2019. 8. 5.
HTML - required 필수 항목 값을 확인해주는 속성 html5 입력 유효성 확인 안녕하세요. 고코더 입니다. ● 1. HTML5에 새로운 기능들은 개발자에 피로를 많이 덜어줍니다. 그 중에 하나가 바로 required 속성입니다. input이 비어있으면 자동으로 필수값으로 값을 넣으라고 해주는 유효성 체크 항목 입니다. ● 2. 가끔 브라우저에서 이런 메세지 창을 보신적이 있죠? required 속성을 입력한 input은 자동으로 이렇게 메세지 창을 띄워서 입력을 받도록 강제해줍니다. ● 3. 사용법은 간단합니다. 그저 input 태그안에 required만 붙혀주면 됩니다. 그리고 해당 속성은 해당 input은 필수 값이라는걸 알려주는 태그임을 강조하는 역할도 합니다. 마무리 물런 최신 브라우저를 써야 작동하는 기능이라 결국은 일부 유저를 위해 스크립트 .. 2019. 8. 1.