WEBn : 웹 어플리케이션 서비스 만들기가 개편되었네요

개발/HTML 2018. 11. 17. 13:51

웹 어플리케이션 서비스를 옛날에 시청했는데


HTML CSS를 안 쓰다가, 다시 쓰려니 기억이 안나서 다시 들어가봤습니다.


생활코딩 많이 바뀌었더라구요.. 복잡해지고 무슨 코딩야학?? 이게 뭥미.


어쨋거나 다시 HTML을 시작해봅시다.


https://opentutorials.org/course/3083


코딩

웹

인터넷

컴퓨터


에 대해  배운다니 멋지고 거창하군요.



HTML = 쉽고, 중요하다, 퍼블릭 도메인이다.


퍼블릭 도메인이란, 저작권이 없는 100% 무료인 것들을 말한다.


HTML 코딩 실습 환경 준비


1. 웹 브라우저

2. 웹 에디터


태그(Tag)

<strong>강조할 내용</strong> : 텍스트 일부를 강조하기 위해 사용하는 태그

<u>밑줄</u> : 밑줄을 귿는 태그

<h1>제목</h1>: 제목. 


<h1>부터 <h6>까지 존재하며 숫자가 커질수록, 폰트 사이즈는 작아짐.


<br> : 새로운 줄로 개행할 수 있다. 하지만, 

<p> 테그 역시 새로운 줄로 개행된다.

둘의 차이점은


<br>은 단순한 줄을 바꾸는 용도로 사용되지만,

<p>는 단락을 구분해주기 때문에 의미론적으로 더욱 중요한 태그이다.

물론 <br>은 여러번 쓰면 원하는 만큼 띄울 수 있기만, <p>는 정해진 간격만큼만 띄울 수 있다.

이것은 css를 통해 커버할 수 있다. margin-top: 30px; 이런식으로 마진을 쓰면 되기 때문이다.


<ul>

<li></li>

<ul>



<ol>

<li></li>

<ol>

속성(Attribute)

<img src="logo.jpg" width="100%"  >


src와 width가 속성이다. 순서는 상관없다. 시작 태그 안에 작성한다.

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

CSS 속성) text-rendering란 무엇인가?  (0) 2018.12.24
[HTML] HTML에서 div 안에 div를 정중앙으로 옮기는 방법. display 속성.  (0) 2018.12.04
페이지 가운데 정렬하기 : maring: 0 auto  (0) 2018.11.16
[HTML] CSS 기초  (0) 2018.10.18
[HTML] 파비콘(Favicon) 만들고 적용하는 방법  (0) 2018.10.02
Posted by sungho88
,

vs code에서 자동으로 태그(Tag) 닫아주는 패키지 설치!

개발 2018. 7. 12. 18:09

HTML 작성시에는 워낙 잘 되서 필요가 없다.


하지만, 리액트에서 JSX파일을 수정할 때는 자동완성이 안되서 난감했다.


태그를 일일히 다 작성하고, 끝 태그(</..>)까지 일일히 맞춰줘야한다니...말도 안된다.


JSX에서 HTML을 작성할 수 있는 방법을 찾다가 못 찾았다.


대신, 자동으로 끝 태그를 생성해주는 패키지는 찾았다.


이름은 너무나 쉽다.


Auto Close Tag


이다.


이것을 패키지 창을 열고(왼쪽 수직으로 정렬된 항목 중 가장 마지막 네모)



이것을 누른 후, Search Extensions...


에다가 입력한다.


그리고 선택 후, Install 고고~


그 다음 Reload한 뒤 해보면 적용이 된다!




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

터미널(Terminal)에서 해당 디렉토리 vs code 바로 실행하기  (0) 2018.07.18
[React] 04) 리액트(React)에서 컴포넌트 라이프사이클(Component Lifecycle)  (0) 2018.07.13
[React] 리액트에서 props이란 무엇이며 어떻게 사용하는가?  (0) 2018.07.10
[React] 02) 리액트(React) 설치 방법 및 구조  (0) 2018.07.07
[React] 리액트의 확장자는 .js가 아니라 .jsx이다.  (0) 2018.07.04
Posted by sungho88
,

HTML에서 사용되는 태그 모음 한 방 정리..

개발/HTML 2018. 6. 28. 23:56

<abbr> Tag


<p>
<abbr title="World Wide Web">WWW</abbr>
Smaller and faster than other CSS frameworks.
Easier to learn, and easier to use than other CSS frameworks.
Better cross-browser compatibility than other CSS frameworks.
Uses standard CSS only (No jQuery or JavaScript library).
Supports modern responsive mobile first design by default.
Provides CSS equality for all browsers: Chrome, Firefox, Edge,
Provides CSS equality for all devices: desktop, laptop, tablet,
Speeds up and simplifies web development.
</p>


abbr요소는 텍스트를 생략어(abbreviated form)로 지정합니다.


무슨 말이냐?


약자를 쓸 경우 무슨 뜻인지 모를때가 있다.


위에 예제의 경우 WWW의 전체 뜻을 알려주기 위해서


<abbr title="World Wide Web"> 이렇게  적어주면 WWW에 마우스를 갖다대면


title에 적힌 설명이 뙇~~



이렇게 설명을 해주는! 태그이다.

눈에 띄게 점선 밑줄까지!!



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

[HTML] 파비콘(Favicon) 만들고 적용하는 방법  (0) 2018.10.02
CSS 개념 및 선택자(Selector) 사용하는 방법  (0) 2018.06.30
[HTML] <blockquote> 태그에서 cite 속성은 무엇인가?  (0) 2018.06.28
[HTML] HTML의 특징과 구조 그리고 기본적인 HTML 태그들...  (0) 2018.06.28
[HTML] HTML에서 CSS파일 사용시, class와 id 확장 연산자  (0) 2018.05.01
Posted by sungho88
,

[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
,

HTML의 기본적인 개념 정리

개발/HTML 2017. 8. 4. 00:38

HTML : HyperText Markup Language 


[웹 서버]

- 웹 브라우저의 요청(Request)을 기다리는 하나의 컴퓨터라고 할 수 있다.

- 웹 서버는 브라우저의 요청에 따라 웹 브라우저에게 응답(Response)을 하는 역할을 한다.

- 24시간 쉬지않고 작동해야만 한다.

- 웹 서버는 HTML 파일이나 각종 리소스들을 저장하고 있다.


[웹 브라우저]

- 브라우저에서 어떤 사이트를 열때는, 웹 서버에 해당 HTML 페이지를 요청해야한다.

- HTML은 브라우저에게 웹 페이지의 구조와 내용에 대해 알려준다.


요즘 에디터들은 자동 완성 기능이 훌륭하다.

아톰(Atom) 같은 경우, 확장자를 .html로 하면 HTML로 인식하여 여러 단축키를 사용할 수 있다.

html파일에 html이라 입력을 하게 되면 


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

  </head>

  <body>


  </body>

</html>

이렇게 자동으로 html 태그 구조가 생성된다.

<> 안에 오는 단어 또는 문자를 태그(Tag)라 부른다.
태그 : 브라우저에게 작성한 텍스트의 구조와 의미에 대해 알려준다.

- HTML 문서에 적힌 탭, 리턴, 개행 등 대부분의 공백을 무시한다.

매칭 태그: 시작태그와 종료태그가 존재하는 태그
Ex)
<html> </html> : 이 파일이 html 파일이라고 명시하는 태그
<head> </head> : 타이틀 등 웹 페이지에 관련된 정보를 포함 
<body> </body> : 웹 페이지의 모든 내용과 구조를 포함. 사용자의 눈에 보이는 웹 페이지의 내용.

<title> 안녕하세요. 반갑습니다. </title>


위 문장 처음부터 끝까지 전체를 엘리먼트(Element)라 부르며, 이 경우 title 엘리먼트로 부름.


<style> 엘리먼트는 HTML 태그 내에 head태그 안에 위치해야 함.

<style type="text/css">

또한 type이라는 속성을 갖음. 이것은 스타일의 종류를 브라우저에게 알리는 역할.

즉, CSS를 사용할 것이므로 위와 같이 작성

속성(Attribute) : 엘리먼트에 대한 추가적인 정보를 제공해주는 것.


CSS란?

HTML이 홈페이지의 구조만을 표현하는데 사용되지만, (홈페이지 구조 설계 = 개발)

CSS는 홈페이지의 스타일을 입히는데 사용됨. (홈페이지 꾸미기 = 디자인에 가까움)


정리


1. HTML과 CSS는 웹 페이지를 만들기 위해 사용하는 언어

2. 웹 서버는 HTML과 CSS로 만들어진 웹 페이지들을 저장하고 서비스를 제공하기 위한 용도.

3. 브라우저는 웹 페이지를 요청하여 HTML과 CSS를 기반으로 콘텐츠를 표현함.

4. HTML은 웹 페이지를 구조화하는데 사용

5. CSS는 Cascading Style Sheet의 약자. HTML의 디자인 스타일을 제어하는데 사용.

6. 엘리먼트는 시작태그, 콘텐츠, 종료태그 세 가지로 구성됨.(예외도 존재 : <img >)


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////


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

[HTML] q 태그의 사용법과 엘리먼트의 종류  (0) 2017.08.04
[HTML] a 태그 사용법과 href의 상대 경로 지정하기  (0) 2017.08.04
Chorme에서 Textarea 크기 조절 막아버리기~  (0) 2017.03.06
HTML 태그에서 띄어쓰기는 어떻게 할까?  (0) 2017.01.31
HTML 내용물 가운데 정렬하기  (0) 2017.01.23
Posted by sungho88
,

티스토리툴바