후회가 없도록

웹 페이지의 디자인을 책임지는 CSS 1. 기원 1) 누가 하콤 비움 리(Håkon Wium Lie) 2) 언제 1994년 10월 10일 3) 어디서 - 4) 어떻게 - 5) 왜 웹 페이지를 디자인하는 방법으로는 기존에 HTML의 태그 내부에서 또는 태그를 통해 추가하는 방법이 있었다. 하지만 점점 디테일하고 높은 수준의 디자인 수요가 늘어나고, HTML에는 웹 페이지의 정보를 다루는 것에 집중을 하기 위해 CSS(Cascading Style Sheet) 파일을 따로 생성하여 적용하게 된 것이다. CSS는 지금까지 여러 버전을 거쳐왔는데, CSS1은 1996년 12월 W3C의 권고 사항으로 나온 버전으로 모든 HTML의 태그에 대한 간단한 시각적 포맷 모델과 CSS의 언어에 대한 설명이 담겨있다. CSS..

이 글의 내용은 HTML5를 기준으로 공부한 내용을 정리한 글이다. 아래 태그 중에는 몇 가지 태그를 제외하고 HTML5 외 버전이나 브라우저에서 사용할 수 없는 태그도 존재함을 유의할 것. 태그 정리에 앞서 HTML에서 알아두면 좋은 내용 1. HTML 주석 기호: 2. VSC(Visual Studio Code)에서 작성하는 경우에 !(느낌표) 하나를 입력한 후, 탭(tap) 키를 누르면 VSC에서 기본적인 구조를 작성해준다. 3. HTML에서 한글을 사용하기 위해서는 : 문서와 관련된 요약 정보를 담는 태그 4) : 눈에 보이는 웹 사이트의 내용과 모든 구조의 설계 내용을 담는 태그 5) : character setting의 약자로, 모든 문자(한글 등)를 웹 브라우저에서 깨짐 없이 표시할 수 있게 ..

웹 제작의 설계도, HTML 1. 기원 1) 누가 팀 버너스 리(Tim Berners-Lee) 2) 언제 1990년 말에 명시 3) 어디서 유럽 입자 물리 연구소(CERN) 4) 어떻게 버너스리가 제안한 인콰이어(HTML의 원형)로부터 시작 5) 왜 1980년, CERN의 비정규 계약직으로 일하던 팀 버너스 리는 CERN의 연구원들 사이에서 문서를 이용하고 공유하기 위한 체계로써, 인콰이어라는 것을 제안했다. 그는 이를 더 발전시켜서 1989에는 인터넷 기반의 하이퍼텍스트 체계를 제안하는 메모를 작성, 1990년 말에는 이를 HTML로 명시하며 브라우저와 서버 소프트웨어를 작성했다. 1991년 말에는 버너스 리가 처음으로 인터넷에서 문서를 HTML 태그(tag)라고 부른 것이 HTML 최초의 일반 공개 ..

HTML 사용에 있어서 재밌는 통계가 있는데, 앞으로 HTML을 작성함에 있어서 참고 자료로도 좋을 것 같아 간단하게 기록한다. 이 통계는 2021년 7월 기준이다. 1. 평균적으로 한 웹페이지에서 사용하는 태그의 개수는 아래와 같은 분포를 보이고, 32개인 경우가 가장 많다. 2. 한 웹페이지에서 사용되는 태그는 평균적으로 아래와 같은 빈도를 보인다. 3. 출처 https://www.advancedwebranking.com/html/#doctype The average web page from top twenty Google results Apparently, an average web page uses thirty-two different element types: The thirty-two elem..

한 달 전에 클론 코딩으로 만든 자그마한 프로젝트를 블로그에 정리하기 위해 오랜만에 열어보았다. 고작 'index.html', 'style.css', 'app.py'라는 이름의 3개 파일이 전부인데도, 그 사이에 몇몇 부분은 까먹거나 이해가 안 갔다. (하... 이제부턴 진짜 프로젝트와 공부도 중요하지만, 거기서 배운 점, 어려웠던 점 등을 기록으로 남기는 과정도 중요하게 여기고 기록해야겠다...ㅠㅠ) 그래도 나름 쉬운 언어(언어라고 하기에도 부끄럽지만)였기 때문에 다시 수정해보고, 결과를 보는 건 재밌었다. 그. 런. 데. 도저히 이해가 안 가는 게, 어느 순간부터 CSS 파일을 수정하고 위치를 바꿔서 링크해도 HTML에서 제대로 적용이 안 된다. CSS 파일을 제거했을 때 아예 HTML 모양이 망가지..

1. jQuery jQuery는 HTML 사용자가 HTML을 조금 더 잘 제어하기 위한 방법 중 하나로, 자바스크립트(Javascript)를 더 편하게 사용할 수 있게 하는 자바스크립트 함수의 모음(라이브러리)입니다. jQuery를 통해 다음과 같이 기존의 긴 자바스크립트 명령을 직관적인 함수로 사용할 수 있습니다. document.getElementById('element').style.display = "none"; 위 명령은 순수하게 자바스크립트 언어로 작성한 명령이고, 해당 id(예시에서는 'element')의 태그를 숨긴다는 명령입니다. $('#element').hide() 맨 위의 명령과 같은 명령이며, 보다 직관적이고 편리한(짧은) 것을 알 수 있습니다. 또, 알 수 있는 것은 자바스크립트 ..

웹 서비스 개발 및 배포를 위해선 프론트엔드(front-end)와 백엔드(back-end)가 구성이 되어야 하고, 그중 시각적이고 직관적인 부분을 담당하는 프론트엔드는 우리 눈에 보이는 웹 페이지 자체를 만드는 영역입니다. 그리고 웹 페이지를 제작하기 위해선 HTML, CSS, JS(Javascript, 자바스크립트)라는 3가지 구성요소를 이해하고, 사용할 줄 알아야 합니다. 이 글에서는 강의(스파르타코딩클럽)와 함께 제가 이해한 내용을 바탕으로 정리한 내용입니다. 우선 이 글을 요약하면 다음과 같습니다. 웹 페이지 제작에는 HTML, CSS, JS, 이렇게 3가지 도구 및 언어를 알아야 하며, 이 3가지 요소는 사람으로 비유했을 때 다음과 같은 역할을 합니다. 1. HTML: 사람 신체의 뼈, 신체 구..