본문 바로가기

Web Front-End

(41)
HTML 기본4 - HTML head 1. HTML Element 엘리먼트는 메타데이터를 위한 컨테이너이고 태그와 태그 사이에 위치한다. HTML 메타데이터는 HTML 문서에 대한 데이터이고 브라우저 상에서는 보여지지 않는다. 메타데이터는 일반적으로 문서의 제목, 캐릭터셋, 스타일, 스크립트 그리고 다른 메타정보를 정의한다. 2. HTML Element -> 안에는 제목, 스타일, 스크립트 등 정보를 정의하지만 너무.. 기초적인 내용이라 meta에 대해 좀 더 정리해보도록한다. 엘리컨트는 케릭터셋, 페이지 설명, 키워드, 저자, 기타 메타데이터등 페이지의 정보에 대한 정보를 설명하기 위해 사용한다. 메타데이터는 브라우저가 컨텐츠를 어떻게 보여줄지 등 사용하는데 사용되거나, 키워드 등에 관련한 검색엔진에 의해 사용된다. (여기서 사용될 nam..
HTML 기본3 - 블록레벨(block) 요소와 인라인(inline) 요소 1. 블록레벨 요소(Block-level Element) -> 블록레벨 요소는 항상 새로운 라인에 시작(수직)되고 사용 가능한 너비를 full로 차지한다. 대표적인 블록레벨 요소로는 div 가 있고 div 외에도 address, article, aside, blockquote, canvas, dl, dt, h1, header, hr, li, p 등 다양한 태그들이 존재 일반적으로 페이지의 구조적 요소를 나타날 때 사용 블록레벨 요소는 인라인 요소에 중첩될 수 없으나, 블록레벨요소는 다른 블록레벨 요소에 중첩될수 있음 크기(width, height)를 지정할 수 있고 사용 가능한 너비를 최대로 차지한다. width:100%; height: 0; 으로 시작한다. Margin과 Padding의 위, 아래, 좌..
HTML 기본2 - 기초 1. HTML 요소(Element)의 구조 1) 여는 태그: HTML Element는 열고 닫는 꺽쇠 괄호로 구성되고 요소가 시작부터 적용되기 시작함 2) 닫는 태그: 요소 이름 앞에 슬러시(/)가 있는것을 제외하면 여는 태그와 같다. 닫는 태그를 명시해주지 않으면 이상한 결과를 초래할 수도 있다. 3) 내용: 엘리먼트 안에 있는 내용으로 말 그대로 텍스트 형태의 Content이다. 4) 요소: 여는 태그, 닫는 태그 내용을 통틀어 요소라고 불린다. 2. HTML Document 1) 모든 HTML 문서는 문서타입 선언을 로 시작해아한다. 2) HTML 문서는 , 로 시작과 끝을 정의한다. 3. HTML Heading 1) HTML headings는 부터 태그로 정의 되어 있다. 2) 부터 가장 중요 사..
HTML 기본1 - HTML 소개 1. HTML이란 뭘까 ? -> HTML은 웹 페이지를 만들기 위한 표준 Markup Language이고, 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분 할 수 있도록 의미를 부여하고, 논리적인 영역으로 구조화하고 이미지와 비디오 같은 컨텐츠를 삽입할 수 있게 해주는 요소들로 구성된 언어이다. 쉽게 말해, 웹페이지가 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다. HTML은 Hyper Text Markup Language의 약자 웹 페이지의 구조를 나타낸다. 엘리먼트들의 시리즈로 구성되어 있다. HTML 엘리먼트들은 브라우저에게 컨텐츠들을 어떻게 보여줘야할지 알려준다. HTML 엘리먼트들은 Tag(예: 등) 들로 나타낸다. 브라우저는 HTML ..
Nuxt.js 웹 프로젝트 시작하기 1. Node.js 설치(모든 작업에서 선행되어야함) - 노드 사이트에서 LTS 버전을 손쉽게 설치한다..(Next > Next > 수준으로 쉽게 설치 가능) - 작성기준 Node의 버전은 "10.16.3 LTS" https://nodejs.org/en/ 2. 프로젝트 생성 - yarn을 이용하여 프로젝트를 구성하려면 "npm install -g yarn" 글로벌 옵션으로 yarn 설치(현시점 1.19.1 버전) - 실제 프로젝트 생성(명령 프롬프트 현재 디렉토리에 생성됨) 1) "yarn create nuxt-app " 2) or.... "npx create-nuxt-app " 3) or.... "npm init nuxt-app " 3. 프로젝트 옵션 선택(필요에 따라 선택하면됨) - 프로젝트명: 엔터..
nuxt build ? generate ? nuxt build --spa ? 차이? 1. nuxt build : SSR(Server Side Rendering) 을 포함한 정규 빌드 2. nuxt generate : Prerendering 된 SPA(Single Page Application) 3. nuxt build --spa : Prerendering 없는 순수 SPA(Single Page Application) 위명령어는 프로젝트 루트에서.. 사용!
Vue.js 개발을 위한 Visual Studio Code 세팅 현재 Atom, Bracket 등 유용한 도구가 많지만, VS Code가 가장인기있는 IDE이다. 따라서 가장인기 있는 VS Code를 설치하기로한다. 설치 URL은 https://code.visualstudio.com 여기서 쉽게 다운로드하여 설치 할수 있다. (다음>다음...만 누르면 손 쉽게 설치 완료) [유용한 플러그인] 플러그인은 좌측 상단에 확장(Extension 탭에서 아래 플러그인을 검색 후 install 한다) - Korean Language Pack : VSCode에서 한국어를 지원해줌 - view-in-browser : html 파일을 기본 브라우절 쉽게 볼 수있다. - vetur: 코드에 대한 문법 하이라이트, 코드 자동완성, 디버깅, 린팅 기능등을 제공 - HTML Snippets..
Nuxt.js SSR(Server Side Rendering) 환경 1. 프로젝트 생성 및 초기화 - nuxt.js starter 템플릿을 이용하는 방법 or 직접 시작하는 명령어 - nuxt 패키지만 다운로드하면 vue, vue-router, vuex 등의 패키지가 모두 설치됨 - "nuxt build" 명령어는 Webpack을 이용해 애플리케이션을 빌드할 수 있기때문에 배포시 적절 - "nuxt start" 명령은 운영 버전으로 서버를 시작함. 그전에 build가 선행되어야함 - "nuxt generate"명령은 애플리케이션을 빌드후 모든 경로의 화면을 정적 HTML로 생성함 nuxt 태그는 router-view 요소 역할을 대신함 nuxt-child 태그는 vue-router의 router-view와 동일 nuxt-link 태그는 vue-router의 router-..