잼로그(JAM_log)

문서 형식 정의 태그(Document Type Definition Tag) 출력할 웹 페이지의 형식을 브라우저에게 전달하는 태그 대소문자를 구별하지 않으며 html 버전 등에 따라 작성하는 방법이 다르다. HTML 태그 모든 요소의 부모 요소이며, 웹 페이지에 단 하나만 존재할 수 있다. 따라서 모든 요소는 내부에서 기술되어야 한다. (은 예외) 또한 Global Attribute를 지원한다. 가장 많이 사용되는 것에는 lang 정도가 있다. 화면에 표시할 모든 콘텐츠는 이곳에 기술한다. HEAD 태그 head 요소는 metadata를 포함하기 위한 요소로, 웹 페이지에 단 하나만 존재할 수 있다. 화면에 표시되지 않는 meta, title, style, link, script 등을 포함하고 있으며 이 ..

Studying (Review)/HTML 2022. 8. 14. 12:11

Semantic Tag (시맨틱 태그) 대부분의 인터넷 사용자들이 정보를 취득하기 위해 검색엔진을 사용한다. 현 시대에서 그만큼 검색엔진에 최적화 된 웹 사이트를 만드는 것은 중요하다고 할 수 있다. 검색엔진 최적화(SEO)를 위해서는 검색엔진이 웹사이트 정보를 수집하는 방법에 대해서 이해할 필요가 있는데, 검색엔진은 로봇이라는 프로그램을 이용하여 웹사이트의 HTML 코드를 수집하게 된다. 이 때, 검색엔진은 HTML 코드만으로 그 의미를 인지하여야 하고 HTML 코드 중에서도 의미론적 요소 즉, 시맨틱한 요소(Element)를 해석하게 된다 이 의미론적인 요소를 충족하기 위해서 필요한 것이 바로, 시맨틱 태그이다. 아래의 코드 두 줄을 확인해보자. Hello Hello 이 코드를 실행시킨 결과(화면)를..

Studying (Review)/HTML 2022. 8. 14. 01:36

HTML5 요약 정보 2014. 10. 28에 확정된 차세대 웹 표준안으로 지금까지 사용중이다 (버전업은 계속 되고 있지만 버전 변경은 되지 않았다. 현재 표준은 하나로 합쳐져서 이쪽에서 확인할 수 있다. 하나로 합쳐지면서 HTML5라는 말보다 HTML이라고 그냥 부르게 된 듯 하다.) 추가된 기능들 (출처 - poimaweb) HTML 기본 문법 Element (요소) 시작 태그와 종료 태그, 그 사이에 위치한 content로 구성된 것. HTML 문서는 Element의 집합으로 이루어진다 Nested Element (요소 중첩) Element 내에 다른 Element를 포함할 수 있고, 이 때부터 부모자식관계가 성립된다 이 관계를 시각적으로 파악하기 쉽도록 들여쓰기(indent)를 활용한다. 안녕하세..

Studying (Review)/HTML 2022. 8. 4. 23:34

HTML(Hyper Text Markup Language) 이란? 웹 문서를 작성하는 데에 사용하는 언어로서, 프로그래밍 언어(JavaScript, Java, C 등)들과는 다른 것이다 H가 내포한 Hyper Text라는 말에서 알 수 있듯이 다양한 자료들을 참조하고 연결할 수 있는 문서를 작성하는 언어이다. 언어이기는 하나 태그 등을 이용하여 문서와 데이터의 구조 정도만을 명기하고 있기에 일반적인 프로그래밍 언어들과는 구별된다. HTML의 역사 (첫 개발부터 HTML4 까지) 1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고 공유하기 위한 체계였다. (HTML이 개발되기 시작한 이..

Studying (Review)/HTML 2022. 8. 3. 18:47

0. 들어가며 인생에서 가장 중요한 시기를 맞이한 것 같다는 생각이 들었다. 얼마 안되는 경험과 지식으로 취업이라는 전쟁에서 반드시 승리해야만 하는 상황이다. 지금의 이 상황을 극복하지 못하면 앞으로도 발전은 기대하기 어려울 거라는 결론에 이르렀다. 어쩌면, 뜬금없고도 자극적인 서두겠지만 지금의 나는 사면초가, 진퇴양난과도 같은 상황이다 그렇기에 임전무퇴의 정신으로 이 전쟁에 임하고자 다짐하며 글을 쓴다. (글을 쓴다고는 하지만, 스터디 계획을 선언하는 것에 가깝다) 1. 나의 지난 삶 회고 짧았던 실무 경험을 타의로 마친 후, 나는 원티드 프리온보딩 챌린지를 도전하고자 하기 전까지 어쩌면 폐인과 같은 삶을 살았던 것 같다. 모든 의지가 박살나버렸고, 그 어떤 말로도 위로받지 못했고, 내가 진짜 무언가를..

Studying (Review)/Plan & Practice 2022. 8. 3. 09:00

다시 취업에 뛰어들어야 하는 상황이었다. 그런데 그렇다할 포트폴리오도 없고, 그냥 전체적으로 너무 비루한 이력과 경력과 실력이랄까. 그래도 일단은 준비해보자 하고 있었는데, 원티드에서 이런 이벤트를 하고 있는 것을 알게되었다. 뭐 당장 취업을 하든 못하든 나는 프론트엔드 개발을 접고 싶지 않았기 때문에 이번 챌린지도 기회로 삼기로 했다. 그래서 고민하다가 일단 되는대로 시작해보기로 했다. 먼저, 사전과제 api repository를 fork 해두고, 내가 만들어야 하는 repository를 새로 생성하였다. api는 로컬에서 돌려야 하는 환경인데, 일단 기능구현을 우선적으로 하기위해 fork만 시켜두고 로컬에 clone은 하지 않은 상태이다. 브랜치 전략같은 경우에는 git flow에 기반한 전략으로 가..

Studying (Review)/React 2022. 7. 30. 16:17

참조 | https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 1. React는 무엇인가? React는 UI(사용자 인터페이스)를 만들기 위한 JavaScript 라이브러리이다 2. React 활용에 필요한 사전지식과 요구사항(by TaniaRascia) HTML, CSS에 대한 기본지식 프로그래밍과 JavaScript에 대한 기본지식 DOM(Document Object Model: 문서객체모델) 에 대한 기본이해 ES6(ECMAScript 2015) 문법과 기능에 대한 지식 Node.js와 npm(Node Package Manage..

Studying (Review)/React 2022. 5. 14. 18:53

참조 | https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 1. Next는 무엇인가? Next는 React 기반의 프레임워크로 빠른 웹 애플리케이션에 필요한 빌딩 블럭을 제공한다 2. 웹 어플리케이션 구축을 위해 고려해야 할 것들 UI(유저 인터페이스) - 사용자(User)가 어플리케이션과 상호작용하는 방..

Studying (Review)/Next.JS 2022. 5. 14. 16:39