티스토리 뷰

WEBn/WEB1

[WEBn] WEB1 정리

정뚱띵 2018. 4. 26. 21:13
728x90
반응형

[WEBn] WEB1 

 

  • 에디터 설치

Editor라는 프로그램이 필요하기 때문에

github.com에서 만든 Atom(아톰)을 쓴다.

 

https://atom.io/

 

다운로드해서 설치를 한다.

실행을 하고 난 후 프로젝트를 만든다.

 

  • test.html

 

https://opentutorials.org/course/3084/18437

 

생활코딩을 보고 난 후 정리하는 글이에 다시 한번 복습하는 과정으로 정리를 하겠습니다.

 
필자는 위 사진에 있는 기획서대로 만들어 보겠다.
정리 내용이므로 자세하게 따라가면서 배우기 원한다면 생활코딩 https://opentutorials.org/course/1 에서 차근차근 따라해보자.
 
 
웹브라우져에 표시된다.
 
첫번째로는 제목 web 이라는 제목을 적었으며
다음으로는 목차, 소제목을 적었다.
 
 
코딩된 내용을 설명을 하면
 
우선 
 
1번 라인에는 관용적으로 <!doctype html> 이라는 것을 적어주는데 html 언어로 만들었다는 걸 알려주는 것 이다.
 
본문은 <body></body>로 묶기로 약속이라고 한다.
그리고 본문을 설명하는 즉, body를 설명하는 태그는 head 태그로 묶기로 약속하였으며,
바디와 헤드를 감싸는 태그는 html이다.
 
3번째 라인에 <title> </title>은 웹 브라우져 탭을 수정해주는 것이다.
또한, 검색엔진을 위해서라도 타이틀을 항상 써야한다고 한다.
 
4번째 라인은 <meta charset="utf-8"> UTF-8로 읽어 주라는 것이다.
한글을 지원해주도록 설정한 것 이다.
 
다음으로는 <h1> 태그이다.
 
<h1>W3C</h1>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
 
The <h1> to <h6> tags are used to define HTML headings. 제목

 

 
위 주소를 가면 예제를 통해 설명이 되어 있으며 실행을 해보면 이와 같이 바로 이해할 수 있을 것이다.
 

 

다음 태그로는 

<parent>

<child></child>

</parent>

부모자식 관계 태그이다.

<ul>

<li></li>

</ul>

목차를 표시해준다.

<ol>

<li></li>

</ol>

숫자를 넘버링한다. 

Ordered List Unordered List 약자이며,

 

2대 : ol / ul + li

3대 : table + tr + td 

이렇게 나눌 수 있다.
 

 

 

 

다음으로는 내용을 적어준다.

 

https://www.w3schools.com/html/html_paragraphs.asp

 

<p> </p> 태그는 단락을 설정해준다.

CSS를 사용하여 더 섬세하게 만들수 있다.

 

https://www.w3schools.com/cssref/css_selectors.asp

 

  • 사진,동영상 그리고 링크 추가해보기
아래와 같은 사진을 보게 되면 사진과 본문 내용에 링크가 걸려있는게 보일 것이다.

 

나름 기획서와 비슷하게 제목과 목차, 소제목, 사진, 본문 내용이 적어졌다.

 

 

 

추가 된 것은 14-15라인이 추가되었다.

 

이미지를 추가 하기 위해 <img src="" width="" height=""> 쓰는 태그이다.

 

사진 파일을 불러 올 수 있게 저장한 파일을 같은 폴더에 저장을 한 후 '제목.확장명'을 적어준 후 크기를 조절하는 것이다.

 

width="" height="" 순서는 바뀌어도 상관이 없으며 간단하게 크기 조절을 하였다.

 

다음은 자세한 내용을 안내해주기 위해 링크를 걸었다.

 

<a href="https://www.w3.org/TR/html51/"> </a> 이와 같은 태그를 쓰는데 간단하다.

태그에 대해 자세히 알고 싶으면 잠깐의 검색으로 알수 있으니 알아보는 것도 좋을 것 같다.

 

새창으로 링크가 열리는 걸 원하면 <a href="https://www.w3.org/TR/html51/" target="_blank"> </a> 이렇게 쓰면 된다.

target="_blank"를 추가 해주면 새창으로 열리게 된다.

 

클릭 전에 내용을 설명 해주는 방법은 <a href="https://www.w3.org/TR/html51/" title="html5 speicification"> 이렇게 쓰면 된다.

타이틀 안에 내용을 설명해주는 것인데 링크에 마우스를 가져다 대면 입력한 내용이 보일 것 이다.

 

또한,
<iframe width="560" height="315" src="주소" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
유튜브 같은 곳에서 필요한 링크를 데려온다. 태그 소스를 보면 나온다.
이와 같은 방법으로 동영상도 추가 할 수 있다.

 

  • 태그 및 정리
<strong> </strong> 
진하게 표시해주는 태그이다.
 
<u> </u>
내용에 밑줄을 표시해주는 태그이다.
 
<br> 줄바꿈이다.
 
<input type="checkbox">
체크박스 생성이 된다.
 
disqus, livere 댓글을 추가 해 주는 서비스이다.
 
www.tawk.to 채팅을 할 수 있는 서비스이다.
 
위 서비스들은 지금 블로그에 적용을 해보았으며 테스트도 해보았다.
 
  • 웹서버 운영
정리가 잘 되어 있는 곳을 소개하는 게 더 맞는거 같다고 생각하여 

링크를 적겠습니다.

728x90
반응형
저작자표시
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
250x250