전체 글 621

[41-8 HTML] 아톰 atom.io, 보일러플레이트, 상용구코드, doctype, meta, charset, utf-8, charset, meta, description,emmet

1. 아톰 설치하기 다운로드 사이트 --> https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io 2. web 폴더 만들기> html-personal site 폴더 만들기> index.html 파일 만들기 3. 보일러플레이트(상용구 코드) index.html 파일에 코드를 작성해보자...

HTML & CSS 2022.10.05

[41-7 HTML] UTF-8, 유니코드

1. utf-8 웹페이지 안의 모든 text가 UTF-8 인코딩 시스템으로 인코딩 되어 웹사이트를 문제 없이 보도록 한다. 간혹 웹사이트를 열었을 때, 우리가 알아볼 수 없는 글자로 웹사이트가 해석한 것을 볼 때가 있는데 이것을 변형된 캐릭터를 뜻하는 모지마케라고 쓴다. 모지바케가 나타나는 까닭은 브라우저가 잘못된 문자 집합을 사용하여 문자를 렌더링하면서 웹브라우저가 데이터를 이상한 글자로 보여주게 되는 것이다. UTF-08은 HTML 5로 작업할 때 사용하는 표준 인코딩이다. 국제 기호가 모두 포함되어 있기 때문이다. 아래의 그림과 웹사이트는 웹사이트 내에서 올바르게 렌더링하기 위해 사용하는 UTF-8 문자 목록이다. https://www.fileformat.info/info/charset/UTF-8/..

HTML & CSS 2022.10.05

[41-6 HTML] 1990년대 웹사이트의 모습

과거 html로만 제작된 웹사이트의 초창기 모습을 살펴보자 wayback machine이라는 웹사이트의 과거를 기록하고 있는 아카이브 사이트가 있다. https://archive.org/web/ 웹사이트를 검색하면, 내가 원하는 시기의 웹사이트 모습을 보여준다. 예컨데, 2000년 6월 19일의 네이버 웹사이트 화면을 보자면, 지금과는 너무너무너무 다른 모습이 보인다... 완전 html로만 구성되어 있다. 이 모습이 조금 촌스럽게 보일 수도 있지만 이 정도만 되도 내가 기록하고 싶거나 보여주고 싶은 정보를 모두 넣을 수 있을 것이다! 실제로 저명한 인물들도 이정도 html로 구성된 자기소개서를 웹사이트에 올려놓고 있다. https://www.cs.cornell.edu/home/kleinber/ Jon K..

HTML & CSS 2022.10.05

[41-4 HTML] HTML 구조 실습하기, 마크업, markup, codepen, e-book 무료, html element, html attributes

HTML은 모든 웹사이트의 기초이다. css, javascript만 사용하여 만든 웹사이트는 없지만, html만 사용하여 만든 웹사이트는 있으니 말이다. html은 마크업 언어의 일종인데, 마크업 Markup이란? 편집자가 저자의 원고에 변경 사항을 표시하거나, 출판사에 레이아웃 변경을 위해 표시한 기호같은 것이다. XML,GML, HTML(HyperText Markup Language)은 모두 가운데에 Markup 글자가 들어갔다. 모두 마크업에 기반을 둔 언어라는 뜻이다. 한편, 마크업 언어인 HTML은 태그(Tag)를 사용하여 웹사이트의 레이아웃과 구조를 지정한다. HTML이 태그를 이용하여 어떻게 웹사이트에서 작동하는지 실습하며 알아보도록 하자. 1. codepen 회원가입하기 html 코드를 실..

HTML & CSS 2022.10.05