Web:시맨틱 웹 낱낱이 파헤치기 + React.Fragment 에 쓰인 시맨틱 개념 | 시작하기에 앞서 팀 버너스리, 차세대 웹 - TED 강연 (웹에서의 데이터) https://www.ted.com/talks/tim_berners_lee_on_the_next_web?language=ko#t-397419 (7분 40초 ~9분 40초) | Semantic web? Semantic Tag? > Definition 시맨틱 웹은 직역하면 의미론적인 웹 입니다. 즉, 문서의 이미에 맞게 어플리케이션의 의미에 맞게 구성 된 웹입니다.컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹. 또한 다른 의미로는 정보를 분석하여 그 정보..
Web:Heading Tag(제목 태그)와 검색엔진 최적화의 연관성 | 들어가기에 앞서, 웹을 개발하다 보면, 웹페이지를 구성할때 heading tag를 자주 사용하게 됩니다. 그러나 heading tag의 역할이나 중요성에 대해서 간과하게 되는 경우가 있는데요. 하지만 heading 태그는 페이지의 내용을 보여주는 것 뿐 아니라 검색엔진 최적화에도 큰 영향을 미친다고 합니다. 이를 위해 heading 태그에 대해서 알아봅시다. | Heading tag란? 책을 생각해보면, 책의 내용중 중요한 내용에는 색이나 굵기의 차이를 두기도 하는데요, 이러한 역할을 하는것이 HTML에서의 제목 태그(Heading tag) 입니다. HTML에서 heading tag 는 H1~H6 까지 총 6개 입니다. 크기에도 차이..
Web:iframe 사용시 하단에 발생하는 공백 제거방법 | 시작하기에 앞서 iframe 을 사용하다 보면 하단에 하얀 공백이 생길때가 있다. 그때 해결할 방법은 아래와 같다. | 해결 방법https://stackoverflow.com/questions/7290214/html-strange-space-between-iframe-elementsAn iframe in standards mode is display: inline by default. That means they will be placed on the text baseline, ie. where the bottom of an 'a' ends, not where the bottom of a 'y' does. The gap you're seeing..
Web :haml이란? | 시작하기에 앞서 haml을 봐야 할 일이 생겨 간략히 haml에 대해 정리해본다. | haml이란 html preprocessor중하나이다! (조사하는 도중 html preprocessor라는 개념에 대해서도 알게됬고, haml 말고도, markdown jade, slim 등이 있다는 것도 알게 됬다.. 싱기방기 ) 1) HAML ( HTML Abstraction Markup Language ) - Ruby 프레임워크의 일부로 사용 2) Markdown - 경량 마크업 언어. 지원하는 에디터를 통해 쉽고 빠르게 시각적인 효과를 줄 수 있다. 3) Slim - Ruby의 HTML 템플릿 엔진. 4) Jade - JavaScript의 Node.js로 구현 된 템플릿 엔진. 5) E..
WEB:DOM APIs | 시작하기에 앞서,Dom api는 라이브러리를 쓰는것보다 대체로더 빠르다.라이브러리보다 불편하고 어렵지만, low-level의 dom api를 이해한다면, 라이브러리나 프레임워크를 사용하면서도 그동작을 이해하고 유추하기 쉽고, 문제해결에도 유리하다. 개인적인 생각으로 이러한 dom과 관련한 개념들을 탄탄히 학습해 놓는다면, 프레임워크에 의존하는 개발자가 아닌, 유연하게 새로운기술도 쉽게쉽게 습득하는 유연한 개발자가 될것이라 판단된다.| DOM api 관련 링크document. 으로 사용할 수 있는 API들 -> 링크 element. 으로 사용할 수 있는 AP들 -> 링크 | DOM 탐색 APIsDOM 탐색에 몇 가지 유용한 속성들이다.tagNametextContentnodeTyp..
Web:DOM 과 querySelector | DOM이란? https://developer.mozilla.org/ko/docs/Gecko_DOM_Reference/%EC%86%8C%EA%B0%9C 공식문서 참고 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또..
Web: 도메인관리시스템에 대한 이해 | 시작하기에 앞서 만든 펜션사이트를 도메인을 연결해주려 하였다. 기존에 파이어베이스에서 제공한 호스팅으로 임의의 url (ex) example.firebase.app.com 로 사이트를 이용하고 있었는데, 알기쉬운 도메인으로 연결하는 과정에서 도메인관리 시스템에 대해서 궁금해져서 검색해보고 알아보았다. | 도메인, 네임서버와 관련한 웹 접속의 흐름 아래에서 볼수 있듯이 모든 도메인은 네임서버를 가지고 있다고 한다. 네임서버에서 도메인과 ip를 연관지어 브라우저에 연결된 ip주소와 관련한 내용을 보여주는 것이다. 도메인을 구입한 네임서버가 해외에 있으면 속도가 느리다고한다. 하지만 가격이 매우싸다고한다..ㅎ(500원에 할수도있다고한다.. 아까 14000원 주고 1년치..
Web - HTTP 프로토콜의 이해 | 인터넷 (네트웍 통신)의 이해 인터넷 != World Wide Web별거 아닌거 같지만 중요한 개념이다. 대부분의 사람들이 인터넷을 웹이라 생각할 수 있다. 하지만 인터넷은 더 큰 범주이고 웹은 인터넷 기반의 대표 서비스 중 하나이다. 웹이외의 인터넷 기반 서비스들을 프로토콜, 포트, 기능 별로 분리해 정리하면 아래 표와 같다. 이름 프로토콜 포트 기능 WWW HTTP 80 웹서비스 Email SMTP/POP3/IMAP 25/110/114 이메일 서비스 FTP FTP 21 파일 전송 서비스 DNS DNS 23 네임서비스 NEWS NNTP 119 인터넷 뉴스 인터넷 (Internet)TCP/IP 기반의 네트워크가 전세계적으로 확대되어 하나로 연결된 네트워크들의 네트워..