본문 바로가기

Road to Web Developer

 (31)
[입문] Hyperlink, a tag HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. 이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트를 순서대로 읽어야 하는 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link)라 한다. HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다. 네이버 방문하기 1. href 속성 href 속성은 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의..
[입문] Text Tag 모바일 퍼스트Mobile First 기조로 인해 텍스트를 줄이고 이미지, 동영상 등의 미디어 사용을 늘리고 텍스트를 줄이고 있는 추세이긴 하나, 여전히 HTML 콘텐츠의 대부분은 텍스트로 구성된다. 시맨틱 태그, SEO를 고려해야 하기 때문에 사용성에 따라 제목, 본문, 모양 혹은 중요도에 맞는 태그를 사용하여야 한다. 01. 제목 (Headings) Tag Heading 태그는 제목을 나타낼 때 사용하며, h1 ~ h6까지 사용한다. 예전에는 웹사이트에서 가장 중요한 콘텐츠에 h1를 선언했다. 그래서 2000년대 초에 만들어진 사이트들은 대부분 로고를 h1으로 선언했다. 그러나 HTML5로 넘어오면서, header, footer 등 역할이 구분되는 영역에서 중요도에 따라 h1 ~ h6를 재사용하도록 권..
[입문] HTML Tag 기본 01. 문서 타입 선언 문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며, 대소문자를 구별하지 않는다. 문서별 기술 양식이 있었으나, HTML5이 표준이 되어 HTML5 문서 형식 정의만 사용한다. 02. html Tag html 태그는 모든 HTML 요소의 부모이며, 웹 페이지에 단 하나만 존재한다. 문서 타입 선언 태그 이외의 모든 HTML 태그는 HTML 내부에 작성해야 한다. Global Attribute (전역 속성)을 지원하며, 특히 lang 속성을 HTML 태그에 사용하는 경우가 많다. 03. head Tag head 태그는 메타데이터를 포함하기 위한 요소이며, html 태그와 마찬가..
[입문] Vue3 설치하기, 실전 편 ① Vue-CLI를 사용하여 기본적인 Vue.js 프로젝트를 구성해보았다면, 이제 Vue3에서 권장하는 환경 설정으로 프로젝트를 구축하여 현업에 가깝게 실습해보도록 하자. 한 가지 알아둘 것은, 공식적인 권장사항이 필수는 아니다. 현업에서 프로젝트는 다양한 환경이 있고 본인이 익숙한 프레임워크 혹은 라이브러리를 사용하지 못할 수도 있다. 그러므로 늘 차선책을 준비해서 문제없이 프로젝트를 진행할 수 있기를 바란다. Vue3는 JavaScript가 아니라 TypeScript를 권장하고 있으며, Vue.js 라이브러리들이 점차 TypeScript를 지원하도록 발전하고 있다. 물론 JavaScript를 아예 쓸 수 없는 것은 아니지만, 웹 프로그래밍 언어의 흐름은 JavaScript에서 TypeScript로 발전하..
[입문] Vue3 설치하기, 기본 편 Vue.js 는 프로젝트에 상황에 맞춰서 적용할 수 있도록 설계되어있다. 이는 프로젝트가 진행되면서 생길 수 있는 요구사항에 따라 여러 가지 방법으로 Vue.js를 활용할 수 있다는 의미다. 예를 들어 단순한 랜딩 페이지라면, Vue.js 자체 프로젝트를 생성하는 것보다 일부 영역에만 바로 사용할 수 있도록 CDN으로 연결하는 것이 더 나은 방법일 수 있다. 프로젝트에 Vue.js를 추가하는 3가지 주요 방법은 다음과 같다. 1. 정적인 페이지에 CDN Package로 연결하기 2. npm을 사용하여 연결하기 3. 공식 CLI를 사용하여 프로젝트 구조가 잡혀있는 boilerplate를 사용한다. 여기서 정적인 페이지에 CDN Package를 사용하는 방법은 학습하거나, 프로토 타입을 빠르게 구축해보기 위..
[입문] Vue.js 설치하기에 앞서... 앞서 Vue.js 개요를 어느정도 이해했다면, Vue.js를 직접 설치하여 실습해보는 일만 남았다. 하지만 설치하기 이전에 미리 인지해야할 것들을 살펴보자. 바로 설치하는 글을 따라서 작성하면 쉽게 설치에 성공할 수 있으나, 기억에 남지 않을 것이다. Vue.js를 설치한다는 것은 하나의 프로젝트를 구성하는 토대를 만드는 것이다. 꽤 괜찮은 프로젝트 환경 설정을 위해 다소 귀찮고 시간이 걸리더라도 하나씩 살펴보면서 가는 것이 더 중요하다는 점을 명심하자. 우선 이 글을 작성하는 2022년 기준으로, Vue.js는 현업에서 2.x 버전과 3.x 버전을 병행하는 과도기에 있다. 현재까지 만들어진 Vue.js 프로젝트는 Vue2.x 버전일 가능성이 높다. 그러나 공식 버전이 3.x 버전으로 공표된 만큼, 3...
[입문] Vue.js 개요 Vue.js는 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프런트엔드 프레임워크다. 이 프로젝트는 웹 UI 개발을 할 때 다양한 디자인 패턴을 적용할 수 있는 것에 초점을 둔다. 전통적인 HTML 개발 방식과 크게 다르지 않아 문법이 단순하고 간결하여 진입장벽이 낮은 편이다. 코어 라이브러리는 선언형 렌더링과 컴포넌트 구성에 초점을 두며, 정적인 페이지에 일부만 사용할 수도 있다. 라우팅, 상태 관리, 빌드 도구화와 같이 복잡한 애플리케이션에 필요한 기능들은 공식적으로 유지 보수되는 지원 라이브러리와 패키지를 통해 제공된다. 에반 유라는 개발자에 의해 개발되었으며, Angular에서 사용되는 양방향 데이터 바인딩을 제공하고 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐..
링크 미리보기 꾸미는 방법, Open Graph 카카오톡으로 링크를 보내면 이상하게 나오는데, 이거 어떻게 변경할 수 있나요? 웹사이트 개발을 완료하고 나면, 종종 고객으로부터 받는 질문이다. 재밌는 글이나 유용한 자료가 있다면 본인의 메신저 혹은 지인에게 공유한 경험은 한 번씩은 있을 것이다. 단순히 URL만 나오던 예전과 달리, 많은 앱과 서비스에서 해당 링크에 대한 미리보기를 제공하고 있다. 이런 미리보기 기능을 제공하는 것이 OpenGraph Protocol인데, 줄여서 오픈 그래프(Open Graph)라고 부른다. 위는 네이버 링크를 메신저로 보냈을 때 나타나는 미리보기 화면이다. URL을 받았을 때 텍스트로는 현재 웹페이지가 어떤 역할을 하는지 파악하기 어렵기 때문에, 이미지, 제목, 설명으로 간단한 정보를 제공한다. 내용 자체는 쉽지만, ..

티스토리툴바