본문 바로가기

HTML37

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.
HTML - required 필수 항목 값을 확인해주는 속성 html5 입력 유효성 확인 안녕하세요. 고코더 입니다. ● 1. HTML5에 새로운 기능들은 개발자에 피로를 많이 덜어줍니다. 그 중에 하나가 바로 required 속성입니다. input이 비어있으면 자동으로 필수값으로 값을 넣으라고 해주는 유효성 체크 항목 입니다. ● 2. 가끔 브라우저에서 이런 메세지 창을 보신적이 있죠? required 속성을 입력한 input은 자동으로 이렇게 메세지 창을 띄워서 입력을 받도록 강제해줍니다. ● 3. 사용법은 간단합니다. 그저 input 태그안에 required만 붙혀주면 됩니다. 그리고 해당 속성은 해당 input은 필수 값이라는걸 알려주는 태그임을 강조하는 역할도 합니다. 마무리 물런 최신 브라우저를 써야 작동하는 기능이라 결국은 일부 유저를 위해 스크립트 .. 2019. 8. 1.
알PDF - PDF 파일 무료 변환 / HWP, WORD, EXCEL, PPT, JPG, EPUB, HTML, RTF PDF 파일, 워드, 한글, 엑셀, 파워포인트, 이미지, 전자책파일, HTML, RTF로 변환하는 프로그램 안녕하세요. 고코더 입니다. ● 1.이전 시간에 알PDF뷰어를 다운로드 하여 설치 하였습니다.->알PDF 뷰어 - 설치방법 및 다운로드 / 첨부파일 이 프로그램에 장점은 많은 기능을 제공하고 있습니다. 특히 PDF 파일을 다양한 형식으로 변환이 가능합니다. ● 2. PDF를 실행시키면 상단 부분에 파일을 변환 가능한 형식들이 보입니다. ● 3. 엄청 많은 방식으로 변환이 가능 합니다. 필요한 모든 변환이 다 있습니다. ● 4. 샘플 PDF를 모든 방식으로 변환해보았습니다. ● 5. 첨부파일에 내용입니다. 결과물은 생각보다. 훌륭합니다. 확인해보세요. 마무리 PDF를 다른 파일로 변환이 필요할때는 무.. 2019. 7. 19.

티스토리툴바