[HTML] HTML의 특징과 구조 그리고 기본적인 HTML 태그들...

개발/HTML 2018. 6. 28. 22:54

[특징 정리]


- HyperText Markup Language의 약자이다.

- HTML은 웹의 최소 단위인 웹페이지를 만드는 언어이기 때문에 웹의 밑바탕이 된다.

- 웹 페이지의 구조를 만들기 위해 사용한다.

- HTML 개발을 위해서는 웹브라우저와 텍스트 에디터가 반드시 필요하다.

- 서버 필요없이 실행할 수 있으며, index.html이 웹 사이트의 루트 파일이다.

- .html 확장자를 붙이면 HTML 파일이 되어 브라우저로 실행이 가능하다. 

(저장할 때 파일명.html으로 저장하면 HTML 파일이 생성된다)


[태그]

- HTML의 태그들은 각각의 용도가 있다. 

- 태그는 다음과 같은 형태로 사용된다.  <tagname>content</tagname>

- 태그는 종류가 매우 많으므로, 외우기보다는 이해한 후, 필요에 따라 갖다쓰는 것이 좋다.

- 보통은 한 쌍으로 이루어져있다.(시작 태그와 끝 태그)


<h1>Title<h1>

<p>Content<p>


- 몇몇은 태그 하나로 나눠쓴다.


<br/> 

HTML5에서는 <br>로도 가능하다.



html 기본 구조는 다음과 같다.


<!DOCTYPE html>는 HTML5를 사용하겠다는 일종의 선언이다.


그리고 HTML 파일 내 설정 세팅이나 내용은 반드시 <html>과 </html> 태그 안에 들어가야 한다.

이 태그가 가장 기본이 되는 태그이다.


<head> </head> 사이에는 제목을 위한 <title>태그와 <meta> <script>나 <link>등이 들어갈 수 있다.


유저가 실제 눈으로 보는, HTML 파일에 대한 Contents 정보들은 <body>태그안에 입력된다.


페이지 구조를 브라우저에게 알리는 정보들은  <head>태그안에 작성된다.


<!DOCTYPE html> // HTML5임을 나타내는 선언
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>


<meta> 란? 


- 브라우저에게 해당 HTML 파일에 대한 정보를 알리는 태그일 뿐, 사용자를 위한 정보는 아니므로 보이지 않는다.

 

- charset 속성의 경우, Character encoding을 뜻한다. 즉, 문자의 인코딩 종류를 결정한다.




아래 태그들은 모두 <body>태그에서 사용하는 것이다.



제목을 위한 h1, h2, h3, h4, h5 태그


<h1>111</h1>
<h2>222</h2>
<h3>333</h3>
<h4>444</h4>
<h5>555</h5>


이렇게 하고 실행을 해보자.




h1이 가장 큰 제목(중요한 제목일때 사용한다)이며 h5로 갈수록 작아진다(중요도가 떨어진다)

크롬에서 개발자 도구(단축키 F12)를 사용하면 구조를 좀 더 쉽게 확인할 수 있다.




태그에는 2가지로 구분할 수 있는데, 다음과 같다. 


1. 인라인 태그

- 새로운 라인에서 시작하지 않는다. 즉, 내용 중간에 사용할 수 있다는 의미이다.

- <strong>, <em> <a>, <span>, <img> ...


<a>태그는  <a href="http://www.naver.com">네이버</a> 으로 사용한다. 링크를 거는 것이다.

태그 속성으로 target이 있는데, 현재 창에서 링크 이동할 것인지, 아니면 새 창을 띄우고 그 창에서

이동할 것인지를 지정하는 것이다. _blank의 경우 새 창을 띄우고 이동한다.

이것을 작성하지 않으면? 기본적으로 현재 페이지에서 링크 사이트로 이동하게 된다.


<a href="http://www.naver.com" target="_blank">네이버</a>



2. 블록 태그

- 새로운 라인에서 시작한다.

- <div>, <h1~h6>,<p>,<form> ...






ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ


태그 속성(Attribute)

- 시작 태그에 입력한다.

- 태그명과 ">" 사이에 입력한다. 

<tagname attributeName="attributeValue">content</tagname> 



'개발 > HTML' 카테고리의 다른 글

HTML에서 사용되는 태그 모음 한 방 정리..  (0) 2018.06.28
[HTML] <blockquote> 태그에서 cite 속성은 무엇인가?  (0) 2018.06.28
[HTML] HTML에서 CSS파일 사용시, class와 id 확장 연산자  (0) 2018.05.01
[HTML] HTML로 테이블(Table) 생성하기...  (0) 2018.05.01
[HTML] margin과 padding을 css에서 사용하는 방법은?  (0) 2018.05.01
Posted by sungho88
,

[vue.js] 1. Vue.js를 설치하는 방법과 webpack 설치 시 구조

개발 2018. 6. 28. 10:56

설치는 여러가지 방법이 존재한다.


1. 직접 <script>를 추가하는 방법(CDN을 사용하는 방법)


3. NPM을 설치한 후 사용하는 방법


4. Vue.JS에서 제공하는 공식 CLI(Command Line Interface)인  vue-cli을 사용하는 방법

 

이 블로그에서는 4번을 사용할 것이며, webpack을 이용할 것이다. 


사용 방법은 다음과 같다.


# vue-cli 설치
$ npm install --global vue-cli
# "webpack" 템플릿을 이용해서 새 프로젝트 생성
$ vue init webpack my-project
# 의존성을 설치하고 실행하세요!
$ cd my-project
$ npm install
$ npm run dev


회색은 주석이고, 검은색이 명령어다!


터미널을 열고! 5줄의 명령어를 순서대로 입력하자! 


여기서 my-project의 경우 원하는 프로젝트 폴더명을 작성한다.


vue init webpack ...


을 입력하면 뭘 자꾸 물어본다.


npm init으로 package.json을 생성할때와 유사하다.



프로젝트명, 프로젝트 설명, 사용자, 뭘 설치할래? 할래? 할래?

특별한 설정을 하기 귀찮다면, 그냥 Enter키만 쳐서 넘기면 된다.


Use ESLint to lint your code?의 경우 처음이면 No을 하는것을 추천한다.

안 그러면 쓸데없는 에러를 페이지마다 수십개씩 발생시킨다.


엔터를 치면서 빈 공간이 너무 많다.

세미클론 안 붙여도 되는 코드인데 붙였다,

등등 공백 1개 1개 모두 에러가 발생한다.

에러라 하지만 일종의 경고랄까. 작동은 되지만 엄청 찝찝하다. 


이렇게 하면 webpack에 의해서 vue 프로젝트가 생성된다. 


그런데 많이 복잡하다. 이건 뭐지? 어떻게 사용해야 하는거지?




vue-cli를 통해 생성한 프로젝트의 디렉토리 구조는 위와 같습니다. 중요한 프로젝트 구조만 이야기 하면..


build/ : webpack 빌드 관련 설정이 모여 있는 디렉토리입니다.


config/ : 프로젝트에서 사용되는 설정이 모여 있는 디렉토리입니다.

    ㄴ dev.env.js : npm start 시 적용되는 설정입니다.

    ㄴ prod.env.js : npm run build 로 배포 버전에 적용되는 설정입니다.


dist/ : 배포버전의 Vue 어플리케이션 파일들이 모여 있는 디렉토리입니다. npm run build 명령어 실행시 생성됩니다.


node_modules/ : npm으로 설치되는 서드파트 라이브러리들이 모여 있는 디렉토리입니다.


src/ : 실제 대부분의 코딩이 이루어지는 디렉토리입니다.

    ㄴ assets/ : 이미지 등.. 어플리케이션에서 사용되는 파일들이 모여 있는 디렉토리입니다.

    ㄴ components/ : Vue 컴포넌트들이 모여 잇는 디렉토리입니다.

    ㄴ router/ : vue-router 설정을 하는 디렉토리입니다.

    ㄴ App.vue : 가장 최상위 컴포넌트입니다.

    ㄴ main.js : 가장 먼저 실행되는 javascript 파일입니다. Vue 인스턴스를 생성하는 역활을 합니다.





1. index.html


쉽게 말하면 이 어플리케이션은 자체는 index.html 파일이 보이는 것이다.

이 페이지에 선언된 id="app"인 div에 vue컴포넌트들이 들어간다고 할 수 있다.

Jquery 등 외부 라이브러리를 CDN으로 사용하기 위해서는 이 HTML파일에 링크를 적는다



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpacktest</title>
</head>
<body>
<div id="app"></div>

<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<!-- built files will be auto injected -->
</body>
</html>



2. main.js


main.js에서 Vue 인스턴스를 생성한 뒤, 로드한다.

el: '#app'이므로 위 index.html의 <div id="app"></div>에 Vue 컴포넌트들이 마운트 된다.


트들이 마운팅되게 됩: http://beomy.tistory.com/40?category=646688 omy]// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})


Vue 인스턴스 내부 속성을 살펴보면,


el: '#app'  - index.html 내에 id가 app인 div 태그에 Vue 컴포넌트를 마운팅하게 된다.


router  -  vue-router를 사용할 수 있다.


components: { App }  -  App 컴포넌트를 사용한다는 의미며, 지역적 등록이다.


template: '<App />'  -  #app에 마운팅 되는 컴포넌트는 <App /> 이다.


 


[한 수 배운 참고 블로그]


http://beomy.tistory.com/40?category=646688


http://itstory.tk/entry/vuecli-Webpack-%ED%85%9C%ED%94%8C%EB%A6%BF%EC%9C%BC%EB%A1%9C-vuejs-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0





'개발' 카테고리의 다른 글

[React] 리액트의 확장자는 .js가 아니라 .jsx이다.  (0) 2018.07.04
[vue.js] Vue.js란 무엇이며 왜 사용할까?  (0) 2018.06.30
웹스톰 쓸데없는 경고창들 없애기  (0) 2017.12.12
맥 터미널에서 Error: Xcode alone is not sufficient on Sierra.  (0) 2017.12.11
회원가입 시 암호화 방법 : SHA256 사용하기 - C#  (0) 2017.10.19
Posted by sungho88
,

롯데리아에서 신메뉴! 티렉스버거를 먹어봤습니다

취미/이런저런것들 2018. 6. 27. 22:44
잠실에 들려. 롯데리아에서
티렉스 버거를 한번 먹어봤습니다.

이름 들었을 때
음 공룡이 떠올랐습니다.
아 걘 티라노사우르스였지...
티라노버거 주세요~ 아니죠!
티렉스버거 주세요~ 해야지요!
시켜봅시다 !
롯데리아도 음료 셀프라니 넘나 좋은 것..

버거포장부터 달라요!!
둥근게 아니라 기...길다!
기대된다! 열어보자!

무자비한 놈이 나타났다.
무자비한 놈을 무자비하게 먹어보자!

오잉 ㅎㅎ 비쥬얼 쇼크!! 완전 대박.
이건 뭐임.. 버거보다 패티가 더 크다니 ㅎㅎㅎ
히트칠 것 같다!!
손님이 끊이질 않는다!!
롯데리아가 이걸로 다시 좀 뜨려나!?

어마러마한 길이의 치킨 통다리살!
퍽퍽한 가슴살이 싫다면 티렉스버거로!

새우버거와 마찮가지로 소스는 단순하다
롯데리아의 대표적 소스는??

마..요네즈ㅋ ㅋ
그치만 패티의 강력함과 압도적인 크기!!
괜찮다 요즘 100원만
더내면 치즈스틱까지!? 실화냐

'취미 > 이런저런것들' 카테고리의 다른 글

vs code 단축키 - 자동정렬과 터미널(Terminal) 열기 등등...  (0) 2018.07.16
다이소 셀카봉...황당 구매 후기  (0) 2018.07.05
갤럭시S8에서 개발자 모드 활성화  (0) 2018.06.08
네이버 클로바 AI 스피커 : 클로바 개봉 후기  (0) 2018.04.29
왠만하면과 웬만하면. 어떤게 옳은 표기법인가요?  (0) 2018.04.19
Posted by sungho88
,

티스토리툴바