본문 바로가기

전체990

WWW란? WWW는 World Wide Web이다. 간단하게 웹(Web)으로 부른다. 웹은 인터넷으로 접근할 수 있고 하이퍼텍스트로 연결되는 Uniform Resource Locators (URLs)으로 식별하는 문서나 자원이 있는 정보공간이다. 영국 과학자 Tim Berners-Lee가 1989년에 만들었다. 1990년 핵연구를 위한 유럽 조직인 CERN에서 일할 때 첫 웹브라우저를 선보였다. 1991년 웹브라우저를 조직 밖으로 공개하였다. 1991년 1월에 다른 연구 협회에 공개하였고 8월에 일반에 공개하였다. 월드 와이드 웹 (World Wide Web)은 정보화 시대가 발전하는데 핵심이었으며 인터넷을 통한 상호 작용에 수십억 명이 주요 도구로 사용하고 있다. 웹 페이지는 주로 HTML (Hypertext M.. 2020. 11. 1.
미끄러져 나오는 메뉴 날마다 조금씩 블로그 살결을 바꾸고 있다. 오늘은 옆에서 미끄러져 나오는 메뉴 만들기를 소개한다. 수업 시간에 쓸 목적으로 만든 블로그라 목록이 많다. 사이드바가 길어지는 것이 맘에 들지 않아 카테고리만 따로 뗴어내 감춰두고 필요할 때 보이게 하고 싶어졌다. 찾아보니 자바스크립트(javascript)나 제이쿼리(jquery)로 만든 것이 많다. 아무래도 씨에스에스(CSS)로만 만든 것이 맘에 들어서 골랐다. 먼저 skin.html파일 윗부분에 아래와 같은 태그를 넣고 style.css파일에 이어지는 코드를 넣어서 완성하였다. 나름대로 보기 좋다. ≡ /* ---------------------------------------------- */ /* menu*/ /* ---------------------.. 2020. 11. 1.
스킨 편집할 때 좋은 프로그램 괄호 brackets 티스토리 블로그 살결(skin)을 만지작거린다. 크게 아는 것은 없지만 남이 만든 것을 해석할 줄은 안다. 티스토리에서 새로 내 놓은 스킨 '포스터'를 짜집기 해 보았다. 스킨을 손보는 일은 생각보다 아주 번거롭다. 번거로움을 상당히 줄여줄 프로그램을 소개한다. brackets을 내려받아 실행하면 별다른 설명 없이 쉽게 따라할 수 있다. 프로그램 이름을 괄호(brackets)로 붙인 것이 재밌다. brackets.io/ A modern, open source code editor that understands web design Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor .. 2020. 11. 1.
HTML과 CSS란 무엇인가? 티스토리 스킨을 고치거나 만들기 위해서는 먼저 에이치티엠엘(HTML)과 시에스에스(CSS)를 알아야 한다. 티스토리 관리자 화면에서 스킨 편집으로 들어가서 html 편집 단추를 누르면 skin.html과 style.css를 편집할 수 있다. 모두 영어로 쓰인 파일이 열린다. 이 파일을 편집하려면 프로그래밍 언어를 알아야 한다. 아래를 여행하면 거의 모든 걸 알 수 있다. 가끔씩 시간이 날 때마다 한두 가지 올려 보려 한다. HTML https://www.w3schools.com/html/ HTML Tutorial HTML Tutorial HTML is the standard markup language for Web pages. With HTML you can create your own Website... 2020. 11. 1.
HTTP와 HTTPS 올해부터 티스토리는 보안 HTTPS 접속으로 바꾼다고 한다. 이제까지는 일반 HTTP와 보안 HTTPS 가운데 하나를 고를 수 있었다. 그간 보안 접속 HTTPS로 바꾸면 위험을 알리는 메시지가 떠서 그냥 일반 HTTP 접속를 써왔는데 원인을 알아보려고 자료를 찾아 보았다. 경고 메시지가 뜨는 까닭은 내가 만든 스킨에서 스크립트 화일을 일반 HTTP접속으로 받아왔기 때문이다. HTTP와 HTTPS는 어떻게 다른가? HTTP는 초문서 전송 규약(HyperText Transfer Protocol)을 줄인 말이다. 이 방식은 웹 문서를 평문으로 주고 받기때문에 중간에서 전송되는 정보를 엿볼 수 있다. 이 문제를 해결하기 위하여 HTTPS(HTTP Secure)는 문서를 암호화하여 주고 받도록 하는 것이다. 뉴.. 2020. 11. 1.
시맨틱 웹(Semantic Web) Semantic은 옛 그리스말 $\theta\eta\mu\alpha\nu\tau\iota\kappa\omicron\varsigma$에서 온 말이다. 참고(https://en.wikipedia.org/wiki/Semantics) 대충 옮기면 시맨틱은 어떤 말이나 기호가 품고 있는 뜻을 파악하는 언어학이나 철학적인 연구를 이르는 말이다. 시맨틱 웹은 무엇일까? 로마자 표기법에 따라 세맨틱으로 읽어야 할 것 같은데 어찌 된 일인지 시맨틱으로 적은 글이 대부분이다. 아마도 이미 굳어진 학술 용어라서 그런 것 아닐까 생각한다. 시맨틱 웹(Sementic Web)은 W3C(World Wide Web Consortium)에 의해 표준화된 WWW(World Wide Web)의 확장이란다. 웹페이지를 만드는 프로그래밍 .. 2020. 11. 1.
파이썬 연습 시작_빌트인 구조 아나콘다를 설치하고 쥬피터 노트북을 써서 파이썬을 공부하는 과정을 기록하려고 한다. 시작 파이썬이 기본으로 지원하는 빌트인(built-in) 구조를 살펴보자. 시퀀스(sequence) 형태의 자료 구조는 요소의 위치 값인 인덱스(index)를 통해 다가갈 수 있다. 또한 특정 범위 값을 고르는 슬라이싱(slicing), 아이템 추가(adding), 유무 확인(membership)등의 연산을 주로 한다. 이러한 시퀀스 형태의 대표적 자료 구조는 리스트, 튜블 등이 있다. 또한 값의 순서를 고려하지 않는 구조인 세트도 있다. *built-in: 서로 관계가 있는 요소 몇몇을 잘 분리되지 않도록 단단히 묶는 것이다. *sequence: 수학에서는 수열로 옮기는데 보통 한 줄로 늘어 놓은 것이다. 빌트인으로 요.. 2020. 11. 1.
Anaconda 설치 https://www.anaconda.com/products/individual Anaconda | Individual Edition Anaconda's open-source Individual Edition is the easiest way to perform Python/R data science and machine learning on a single machine. anaxdtest.xdlab.co 오로지 거북수학을 위해 파이썬(python)을 쓰기 위해 검색한 결과를 적는다. 위에 있는 링크를 찾아 아나콘다를 설치하면 이전 글보다 좀더 편하게 거북 수학을 실행해 볼 수 있다. 1. 프로그램은 여느 프로그램과 같은 방법으로 설치할 수 있다. 2. 실행에서 아나콘다 내비게이터를 실행한다. 환경(E.. 2020. 11. 1.
사진 편집할 때 좋은 프로그램 포토샵만큼은 아니지만 공짜로 이 정도면 만족이다. 그러고 보니 이젠 포토샵이 시들해진 느낌이다. 내가 안 찾아서 그런걸까? pixlr.com/kr/x/ 사진 에디터 : Pixlr.com - 온라인 무료 사진 편집 툴 Pixlr X를 통해 브라우저에서 고급 사진 편집 툴을 바로 실행할 수 있어요. 별도의 설치 또는 회원가입이 불필요! 컴퓨터, 태블릿, 스마트폰에서 언제 어디서나 무료로 이용하세요. pixlr.com 2020. 11. 1.
지엔유(GNU) 자유 소프트웨어 운동이란? 1983년 9월 리처드 스톨만이 유즈넷에 지엔유(GNU) 프로그램 코딩을 시작한다고 적었다. 지엔유는 프로그램을 자유롭게 고치고 배포할 수 있도록 하자는 운동이다. 아래는 이 운동을 상징하는 그림이다. 요즘 오픈 소스와 비슷하지만 조금은 다르다고 한다. 지엔유는 줄여도 지엔유가 되도록 "GNU's not Unix."이란 문장을 줄여서 만든 이름이라니 재밌다. 아주 많은 사람이 돈을 좇는데 유별난 사람인 모양이다. 아무튼 결과로 리눅스와 같은 프로그램이 만들어졌다고 하니 참 좋은 운동이다. 한때 아주 낡은 컴을 되살리고자 우분투를 잠깐 깔아서 쓰기도 했는데 뭔가 대단한 일을 하고 있다는 자부심이 뿜뿜하기도 했다. 결국 학교 일을 하기 위해 필요한 한글과 엑셀 파일이 호환되지 않아.. 2020. 11. 1.
스킨을 반응형으로 만들자 요즘은 모바일 기기를 워낙 많이 쓰기 때문에 스킨을 만들 때 피씨 사용자만을 위한 디자인은 외면받기 쉽다. 스킨을 반응형으로 만들어야 하는 까닭이다. 고맙게도 티스토리 스킨 편집 화면에서는 아래와 같이 반응형이 제대로 작동하는지 미리 볼 수 있다. CSS에서는 미디어퀴리로 기기별로 설정을 따로 해줄 수 있다. .example { width: 500px; font-size: 1.5em; color:#000; } @media screen and (max-height: 800px) { .example { width: 190px; font-size: 1.0em; color:#ccc; } } 먼저 example 요소는 피씨로 접속한 화면에서는 위쪽 스타일로 보인다. 화면 폭이 800px이하인 모바일 기기로 접속한.. 2020. 11. 1.
티스토리 스킨 skin.html 구조를 알아 보자 티스토리 스킨을 만들거나 고치기 위해선 먼저 스킨 파일의 구조를 알아야 한다. 프로그래밍을 전혀 하지 못한다고 하더라도 간단한 부분을 고쳐서 개성이 드러나는 스킨으로 바꾸는 일은 크게 어렵지 않다. 잘못되면 다시 적용할 수 있는 스킨은 차고 넘치므로 두려워 하지 말고 나서 보자. 먼저 skin.html을 열어 보자. 확장자로 html 문법으로 쓰인 문서임을 알 수 있다. 구조를 간단하게 살펴보자. html 문서는 그 안에 작은 부분인 요소(element)가 들어 있다. 요소는 태그(tag)로 구분하는데 각 요소는 아래와 같이 여는 태그와 닫는 태그로 둘러싸서 적는다. html 문서를 수학 시간에 배운 집합으로, 요소는 원소로 생각하면 쉽게 이해할 수 있다. 요소의 예시 이 문서가 HTML5 문서임을 알린.. 2020. 11. 1.
반응형

티스토리툴바