본문 바로가기

전체 글2572

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.
티스토리 - Tistory 코드펜 소스 첨부하기 Tistory Codepen 글쓰기에 사용하기 안녕하세요. 고코더 입니다. ● 1. 코드펜의 에디터를 티스토리에 붙여 넣어서 보여주는 방법을 알아보겠습니다. 특히 코딩을 강의하는 블로거들에게는 아주 좋은 방법이 될 거라 생각합니다. ● 2. 코드펜에서 퍼오고 싶은 소스에 들어가서 "Embed"를 클릭합니다. ● 3. "Copy & Paste Code"에서 iframe를 선택하고 소스를 복사합니다. ● 4. 그다음 티스토리 새로운 글쓰기 에디터에서 HTML 모드를 선택합니다. ● 5. 그리고 코드펜에서 복사해온 소스를 그대로 붙여 넣습니다. 그럼 이런 형태로 iframe으로 시작하고 끝나는 코드가 입력됩니다. ● 6. 다음 다시 기본 모드를 클릭하게 되면 ● 7. 이렇게 아주 깔끔하고 보기 좋은 코드펜 소.. 2021. 1. 19.
React.js - 코드펜(CodePen)으로 리액트 실행하기 CodePen으로 리액트 실행 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 코드펜을 사용하여 리액트를 실행하는 방법을 알아보겠습니다. 코드펜은 제 블로그에서 다루었던 프런트엔드 개발을 연습할 수 있는 온라인 IDE 사이트입니다. 해당 사이트의 사용법은 해당 "코드펜 사용법" 태그를 통해서 학습해주시기 바랍니다. 하지만 보통의 개발자라면 바로 사용법을 익힐 수 있기 때문에 그대로 따라오 오셔도 될 거 같습니다. ● 2. 코드펜을 로그인하고 Pen을 생성합니다. 무료 사용자도 사용이 가능합니다. ● 3. 펜이 생성되었다면 Settings를 클릭합니다. ● 4. 왼쪽 탭에 JS를 클릭합니다. 자바스크립트 설정을 할 수 있는 화면이 오른쪽에 나타납니다. 그리고 "Add External Scripts/Pe.. 2021. 1. 18.
CDN - JSDelivr js,css 버전 변경하기 / 구버전 사용하기 JSDelivr 구버전 소스 사용하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSDelivr에서 구버전 소스를 참조하는 방법을 알아보겠습니다. JSDelivr는 강력한 js, css CDN 서버입니다. 게다가 무료입니다. 각종 필요한 라이브러리를 타 서버를 이용해 빠르게 사용할 수 있다는 건 분명 큰 장점입니다. 그리고 무엇보다 최신 버전의 라이브러리를 제공받아서 사용이 가능하다는 장점이 있습니다. 그런데 가끔 구버전의 라이브러리가 필요합니다. ● 2. 우선은 URL에 버전이 생성된 경우가 있습니다. 아래와 같은 경우는 URI 중간에 4.7.0이 있습니다. 이 부분은 버전입니다. 중간에 숫자를 변경하는 것만으로 버전을 변경 가능합니다. 이렇게 접속하면 4.7.0 버전의 CDN 소스를 사용 가.. 2021. 1. 18.
JavaScript - let 은 IE11 버전부터 제공합니다. let는 ie10에서 사용이 불가 안녕하세요. 고코더 입니다. ● 1. 프런트엔드를 개발하다 보면 항상 익스플로러가 문제입니다. 유난히 혼자 튀는 거 같습니다. IE11 이 es6을 지원한다고 하지만 다른 브라우저들 모두가 사용하는 기능을 혼자 사용하지 않는 경우가 있습니다. //let let letGoCoder= 123; ● 2 대표적인 게 아마 이것이 아닌가 싶습니다. 바로 let입니다. 물론 ie11부터는 정확히 말하며 부분 지원입니다. 오류가 있기 때문입니다. for문에서 개별적으로 바인딩되지 않는 문제입니다. ● 3. 뭐 그렇다면 방법 없죠. var를 사용하시면 됩니다. // var var varGoCoder= 123; 마무리 익스 그만 운영해도 좋을 거 같은 2021. 1. 18.
크롬 - 새 탭 빈페이지로 보이게 하기 new tab 빈 페이지로 뜨게 하기 안녕하세요. 고코더 입니다. ● 1. 크롬을 실행하고 탭을 열면 기본 페이지가 항상 같이 보이게 됩니다. 아무런 설정을 하지 않았다면 아마 이런 구글 메인 페이지와 즐겨 접속했던 사이트들이 아이콘으로 보이실 거라 생각됩니다. ● 2. 은근히 첫 페이지는 집중을 방해합니다. 그래서 저는 첫 페이지를 '빈 페이지'로 변경합니다. 이 방법을 아 알아보겠습니다. ● 3. 구글 환경 설정에서 "시작 그룹"이라고 검색을 합니다. 그럼 시작 그룹이 나옵니다. 여기서 "특정 페이지 또는 페이지 모음 열기"를 클릭하고 페이지 추가를 클릭합니다. chrome://settings/?search=%EC%8B%9C%EC%9E%91+%EA%B7%B8%EB%A3%B9 ● 4. 그다음 사이트 U.. 2021. 1. 18.
예스24 - 중고매장 리스트 및 위치 확인하기 / yes24 예스24 중고서점 확인 안녕하세요. 고코더 입니다. ● 1. 예스24는 오프라인 매장을 중고서점으로 운영하고 있습니다. 홍대와 강남점이 없어져서 찾아보기 조금 어렵지만 여전히 많은 매장들이 있습니다. 예스24가 제공하는 홈페이지에 중고매장의 정보를 확인할 수 있는 주소를 공유합니다. ● 2. 해당 URL로 접속하면 전국 중고매장의 정보가 소개됩니다. http://www.yes24.com/Mall/UsedStore/Main ● 3. 7개의 매장 중에 원하는 서점을 클릭하면 자세한 정보를 확인할 수 있습니다. ● 4. 내용에는 찾아오는 길과 기본적인 정보를 확인할 수 있으며 ● 5. 미니 매장 안내도까지 확인이 가능합니다. ● 6. 그리고 중고 매장 내에 재고가 있는지 검색이 가능합니다. 미리 찾아보시고 방.. 2021. 1. 18.
알리딘 - 서점 위치 및 정보, 중고책 재고 알아보기 / aladin 알라딘 매장 정보 확인 안녕하세요. 고코더 입니다. ● 1. 알라딘은 중고서적을 파고 사는 서점입니다. 매장의 수가 어느새 꽤 많아진 거 같습니다. 저는 주로 책을 파는 목적으로 방문했었는데요. 전국에 매장 리스트를 확인해보려고 합니다. ● 2. 해당 사이트에 접속하면 알라딘에서 제공하는 지점을 찾아볼 수 있습니다. 약 46개의 지점이 있습니다. 해당 서점을 클릭합니다. https://www.aladin.co.kr/usedstore/wgate.aspx ● 3. 해당 지점에 대한 정보가 나타납니다. 영업시간 및 휴일 주소까지 필요한 정보가 상단에 노출됩니다. ● 4. 그리고 방금 입고된 책들까지 확인이 가능합니다. 각 지점별로 중고책 재고가 중요합니다. ● 5. 매장 안내도가 간단하게 나와있습니다. ● 6.. 2021. 1. 18.
북스리브로 - 전국 매장 리스트 영업시간 및 위치, 매장 안내도 / bookslibro bookslibro 전국 서점 영업시간 및 정보 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 북스리브로 전국 매장 내역을 확인하는 방법을 알아보겠습니다. 북스리브로는 따로 안내 페이지 없이 상단 메뉴에서 매장 안내를 클릭하면 리스트가 뜹니다. 여기서 원하는 지점을 클릭하면 해당 서점에 대한 자세한 정보를 확인할 수 있습니다. https://www.bookslibro.com/ ● 2. 내역에는 역시 매장 안내도와 정보를 확인할 수 있습니다. ● 3. 특이한 점은 지점이 아닌 가맹점은 따로 내역을 모아두었습니다. https://www.bookslibro.com/franchise 마무리 자주 갔던 홍대에 있던 북스리브로가 없어졌네요. 2021. 1. 18.

티스토리툴바