Web Study_1

송민우·2020년 7월 20일
Web-2020SumCamp
0

Web 2020Camp

목록 보기
1/9
post-thumbnail

What is HTML

- HTML은 Hyper Text Markup Language의 약자다. - HTML은 웹페이지의 구조역할을 한다. - HTML은 요소의 연속으로 이루어져 있다. 각 HTML 요소는 컨텐츠를 어떻게 표시하면 되는지 브라우저에게 전달한다.

'!DOCTYPE html' 태그는 현재 이 문서가 HTML5 버전 문서라는 것을 선언한다.
'html' 태그는 HTML의 페이지의 내용 전체를 감싼다.
'head' 태그는 HTML 페이지의 메타정보를 포함한다.
'Title' 태그는 브라우저에서 보여지는 제목bar 나 Page 탭에서 보여지는 이름을 표시한다. head태그 사이에 들어간다.
'body' 태그는 문서의 몸체를 담당한다. Body태그는 보여지는 모든 컨텐츠들(제목, 문단, 이미지, 하이퍼링크, 표, 리스트 등)을 담는다.


h1태그와 P태그, br태그 사용 스크립트

My First Heading

my first
paragraph.

HTML 문서의 기본구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>h1태그와 P태그, br태그 사용 스크립트</title>
</head>
<body>
    <h1>My First Heading</h1><hr>
  	<p>my first <br>paragraph.</P>
</body>
</html>
//
<h1>태그는 감싸진 정보에 해딩 효과
<p>태그는 감싸진 정보를 하나의 문단으로 묶는 효과
//

모든 태그(요소)들은 시작태그, 컨텐츠, 끝내는태그로 정의된다.

ex) <tagname>Content</tagname>

하지만 br 과 같이 기능에 따라 컨텐츠와 앤드태그가 없는 요소들도 있다. 컨텐츠가 없는 태그들은 앤드태그를 갖지 않음.

Web Browers

웹 브라우저(크롬, 앳지, 파이어폭스, 사파리)는 HTM문서를 읽고 표시하기 위한 목적으로 개발됐다. 브라우저는 HTML태그를 표시하진 않지만 문서를 어떻게 표시할지 결정하기 위해 태그들을 사용한다.

오직 Body 태그 안에 있는 정보만이 브라우저에 표시된다.

HTML History

1989년에 Tim Berners-Lee가 최초로 www를 개발. 1991년에 HTML 개발

이후 계속된 업데이트 후 2014년에 HTML5 출시.
2017년 HTML5.2 업데이트.

Learn & Writing HTML

웹 페이지는 전문 애디터를 사용해서 개발될 수 있지만 배우는 목적으로서는 기본적으로 운영체제에 포함되어 있는 노트패드, 텍스트애딧 등을 사용해서도 가능하다.

HTML코드를 작성하고 나서 저장할 때에는 확장자명을 htm 혹은 html로 저장해야하면 이에 차이는 없다. 또한 인코딩 설정을 확인해야 한다.(UTF-8,euckr 등)

HTML페이지를 브라우저에서 보기 위해서는 파일을 더블클릭하여 열거나 해당 브라우저를 통해 열기 등을 선택하면 된다.

HTML Basics

모든 HTML문서들은 !DOCTYPE html 로 시작되어야 한다. !DOCTYPE html은 해당 문서의 타입을 의미하며, 브라우저가 웹 페이지를 제대로 표시할 수 있도록 돕는다. html코드의 가장 상단에 한번만 선언하면 된다.

HTML의 헤딩은 h1 부터 h6로 이루어진다.
h1은 가장 중요한 헤딩이고 반대로 h6은 덜 중요한 헤딩이 된다.

html에서 링크는 a태그를 통해 정의된다.

ex) <a href="http://hightuna.dothome.co.kr/2020Camp/html_study.html">My html study</a>

(상단 스크립트 링크)
My html study

링크의 목적지는 상단 href의 주소로 귀속된다.

HTML Images

html에서 이미지를 사용하기 위해서는 img태그를 사용해야 한다.

ex) <img src="Sky.jpg" alt="하늘 사진" width= "150" height= "150">

표시되길 바라는 이미지 소스파일 명을 src에 쓰고, alt에는 이미지가 표시되지 않을시 보여질 텍스트를 쓴다. width와 height는 표시될 이미지의 크기를 결정한다.
alt, width, height는 생략될 수 있다.

HTML Elements

HTML elements들은 모두 상하위의 개념으로 집합구조를 이룬다.

html태그는 뿌리 요소로 전체 html문서를 포함하며 정의한다.
html태그 안에는 body태그가 들어간다.

body태그는 문서의 몸체를 의미한다.

html,body 태그 또 h1, p태그 등은 모두 시작태그와 앤딩태그로 구성된다. 절대 앤딩태그를 까먹어서는 안된다.

HTML은 대소문자에 민감하지 않다. html에서 p태그는 P와 똑같이 여겨진다. 하지만 XHTML과 같은 엄격한 규정의 문서타팁을 위해서 태그명을 소문자로 쓸것은 권장한다.

HTML Attributes

모든 HTML 요소들은 속성을 가질 수 있다. 속성은 요소들에 대해 추가 정보를 제공한다. 모든 속성은 시작태그에 명시되고 보통 name = "value"와 같은 페어식의 형태로 사용된다.

a태그는 요소에 하이퍼링크 속성(href)을 주어 스크립트에 명시된 URL페이지로 이동할 수 있도록 한다.

style 속성은 color, font, size 등의 스타일을 요소에 더하기 위해 사용된다.

ex) <p style="color:red;">This is a red paragraph.</p>

결과 :

This is a red paragraph.

html태그의 속성에는 웹 페이지의 언어를 결정하는 lang속성이 있다. 이 속성은 검색앤진과 브라우저를 돕는 역할을 한다.
각 나라에 맞는 속성값이 있다. 영어의 경우 en(default) 한글은 ko로 표시한다.

ex) <html lang="ko">

title태그의 속성은 해당 타이틀에 마우스를 올려놨을때 표시되는 툴팁으로 나타난다.

속성명을 쓸 때에는 소문자 혹은 대문자로 전체 처리를 하며, XHTML에서의 엄격한 문서타입을 위해 소문자를 쓰는 것을 권장한다.

속성값을 작성할 때 HTML스탠다드는 quote를 필요로하지는 않지만 XHTML에서의 사용을 위해 quote를 표시할 것을 권장한다.

Good : <a href = "hisnet.handong.edu">visit hisnet</a>

Bad : <a href = hisnet.handong.edu>visit hisnet</a>

또한 원하는 영역만큼을 정확히 래퍼런스로 선택하기 위해서 Quote를 잘 사용하여야 한다.

ex) 
Good : <p title="About hisnet">

Bad : <p title=About hisnet>

HTML Headings

h1부터 h6로 단계가 구성되는 헤딩은 브라우저에서 자동으로 빈 마진 공간을 헤딩 앞 뒤로 얻게 된다.

검색엔진은 헤딩을 통해서 웹페이지의 구조와 내용을 정리한다.
유저도 헤딩을 통해 페이지를 흝어본다. 그렇기에 헤딩은 문서의 구조를 보여주는 측면에서 중요하다.
HTML에서 Heading태그들은 데이터를 헤더로 사용하기 위해서만 이용된다. 텍스트를 크게 하거나 볼드로 바꾸기 위해서 사용해선 안된다.

CSS를 사용하여 헤딩태그들의 크기를 조정할 수 있다.

ex) <h1 style = "font-size:40px;">Heading 1</h1>

결과값 :

Heading 1


HTML Paragraphs + hr

태그는 문단을 정의한다. 문단으로 지정된 데이터는 문단단위로 개행이 되며 브라우저에서 자동으로 문단의 앞 뒤의 빈 마진 공간을 적용한다. 브라우저는 임의적으로 별도로 표시되어 있지 않은 빈 공간을 모두 무시하는 설정이 있다. 이는 스크린의 크기, 윈도우의 크기의 따라 결과값이 달라지기 때문이다. pre태그를 사용하여, 시와 같이 연으로 떨어져 있는 문단을 만들 수 있다.

ex)

Welcome to 

Gods love you.

Nice to meet you.

HTML CSS Style color,font,size

CSS 코드를 사용하여 html요소의 배경색을 설정할 수 있다.

ex) <body style ="background-color:powerblue;">
  <h1>This is a heading</h1>
  <p>This is paragraph.</p>
  </body>

이외도 각각의 h1,p태그의 색상값을 개별적으로 변경해주는 방법도 있다.
Text색상을 바꾸고 싶다면

ex) <h1 style ="color : blue;">This is heading</h>

방법을 사용하면 된다.

서체를 바꾸고 싶다면

ex) <h1 style ="font-family:futura;">This is a heading</h1>

의 속성을 사용하면 된다.

Text의 크기를 바꾸고 싶다면

ex) <h1 style = "font-size:500%;">This is heading</h1>

을 사용할 수 있다.(혹은 font-size:50px")

정렬을 하고 싶다면
ex)

Centered Heading


를 사용할 수 있다. (left, center, right)

HTML Text Formatting

b: 볼드가 들어간 텍스트
strong : strong효과가 들어간 텍스트
i : 이텔릭체가 들어간 텍스트
em : em, 강조가 들어간 텍스트
small : small이 들어간 텍스트
mark : 마크가 된 텍스트
del : delete처리가 된 텍스트
ins : ins처리가 된 텍스트
sub : sub처리가 된 텍스트, 화학기호, 혹은 수학 기호를 쓸 때 사용됨.
sup : sup처리가 된 텍스트. 각주를 적을 때 쓰인다.

HTML Quotation and citation elements, Commnets

blockquote : 인용한 말들을 섹션을 지정해서 정리한다. 브라우저는 보통 blockquote부분을 인덴트한다.

q : 짧은 인용문을 쓸 때 사용한다. 브라우저는 보통 인용마크를 인용구 앞뒤로 삽입한다.

abbr : 감싼 데이터에 마우스를 올려두면 추가적인 정보를 보여준다.(검색값 등)

ex) <abbr title="World Health Organization">WHO</abbr>

ex) WHO

address : 작성자와 컨텍할 수 있도록 연락처를 생성하는 태그다. address태그는 보통 이탈릭체로 랜더링되며 브라우저는 address태그 앞뒤로 개행을 넣어준다.

cite : 책이나 시, 노래, 영화와 같은 창작품의 제목을 표시해준다.
cite태그에 감싸진 정보는 보통 이탈릭체로 랜더링된다.

bdo : 텍스트의 방향을 설정해주고 싶을때 사용하는 태그다

ex) <bdo dir="rtl">This text will be written from right to left</bdo>

ex) This text will be written from right to left

HTML 코드 내에 주석을 쓰고 싶다면 

<!-- Comments -->

이렇게 주석으로 처리할 수 있다.
주석은 브라우저 상에서는 보여지지 않지만 텍스트 에디터 상에서 확인할 수 있다.
주석을 통해서 에러디버깅, 방지에 활용할 수 있음

HTML Colors & RGB, HEX, HSL

HTML상에서 컬러는 컬러네임, RGB, HEX, HSL, RGBA, HSLA 값 등으로 조정될 수 있다.
HTML은 140개의 기본 컬러네임을 지원한다,

ex) <p style= "color:Slateblue;">Slateblue</p>

Tomato

orange

powderblue

Mediumseagreen

Slateblue


텍스트의 색 뿐만 아니라 요소를 감싸고 있는 border의 색상 또한 변경할 수 있다.

ex)<h1 style= "border : 2px solid Tomato;">우린 멋있어</h1>

우린 멋있어

Color Values

색상의 세부값을 조정해주고 싶다면 사용도에 따라 RGB,HEX,HSL값을 조정해주면 된다.

ex) <h1 style ="background-color:rgb(255, 99, 71);">Hi</h1>
<h1 style ="background-color:#ff6347;">Hi</h1>
<h1 style ="background-color:hsl(9, 100%, 64%)">Hi</h1>

Hi

Hi

Hi

또 rgba, hsla값 등은 기존 rgb, hsl값 뒤에 (알파값)색상에 투명도를 추가할 수 있다.

ex) <h2 style="background-color:rgba(255,99,71,0.2);">Hi</h2>

Hi

RGB : red, green, blue Value
HEX : #rr(red)gg(green)bb(blue)
HSL : hue, saturation, lightness

CSS

css는 Cascading Style Sheets의 줄임말이다. 웹 페이지 상에 존재하는 레이아웃을 한번에 조정할 수 있는 기능으로 많은 작업을 줄일 수 있다.

여기서 말하는 Cascading이란 HTML코드에서 상하 부모관계로 이루어져 있는 태그들에게 적용되는 효과들이 부모에게서 자녀코드로 이어지는 것을 말한다.

CSS코드는 3가지 방법으로 사용된다.
1. HTML코드의 속성으로 들어간다.

<h3 style ="color:blue;">Blue</h3>

Blue

  1. head 태그 안에 style태그로 효과를 적용한다.
<!DOCTYPE html>
<html>
<head>
<style>
  body{background-color: powderblue;}
  h3{color:blue}
  p{color:red}
</style>
</head>
<body>
  <h3>This is a heading</h3>
  <p>This is paragraph.</p>
  
</body>
</html>
  1. Html파일 외부의 CSS파일을 개별적으로 작성하여 Link시킨다.
<!DOCTYPE html>
<html>
<head>
<style>
	<link rel="stylesheet" href="style.css">
</style>
</head>
<body>
  <h3>This is a heading</h3>
  <p>This is paragraph.</p>
  
</body>
</html>

Link를 시킬 때는 여러가지 방법이 있을 수 있다.
1. URL을 통해 링크 시키기

<link rel"stylesheet" href="htps://www.abcdefg.com/html/styles.css">
  1. 'html' 폴더에 있는 파일 링크시키기
<link rel"stylesheet" href="/html/styles.css">
  1. 같은 폴더에 있는 파일 링크시키기.
<link rel"stylesheet" href="styles.css">

CSS를 통해 조정할 수 있는 것 :
서체, 색상, 서체 사이즈, 보더,패딩,마진

HTML Links

HTML상에서 링크를 사용할 때 target속성을 사용함으로서 세부 설정을 조정할 수 있다.

1. 새 창에서 띄우기.
<a href="https://hisnet.handong.edu" target="_blank">visit Hisnet</a>

2. 보이는 창으로 이동하기
<a href="https://hisnet.handong.edu" target="_self">visit Hisnet</a>

3. 상위 레벨의 창에서 링크를 연다, 없을 시 _Self와 같은 효과
<a href="https://hisnet.handong.edu" target="_parent">visit Hisnet</a>

4. 가장 상위의 창에서 링크를 연다, 없을 시 _Self와 같은 효과
<a href="https://hisnet.handong.edu" target="_top">visit Hisnet</a>

같은 웹사이트 상에서는 fullname URL을 사용하지 않고 세부내용만 적어서 링크를 적용할 수 있다.(Relative URLs) 이에 반대는 Absolute URLs로 full address를 사용한다.

Absolute URLs

<p><a href="https://www.google.com/">Google</a></p>

Relative URLs

<p><a href="html_images.asp">HTML Images</a></p>

mailto 를 사용하여 작성된 메일아이디로 메일을 보내는 링크를 만들 수 있다.

ex) <a href="mailto:21500356@handong.edu">send email</a>

버튼을 링크로 사용하기 위해서는 자바 스크립트 코드가 필요하다.
자바스크립트는 버튼을 클릭했을 때 생기는 이벤트를 조정할 수 있도록 한다.
또한 링크에도 설명을 위한 타이틀을 추가할 수 있다

ex) <button onclick="document.location='default.asp'">HTML Tutorial</button>

ex) HTML Tutorial

html에서 링크는 기본적으로 보여지는 색상과 상태가 있다.
방문되어지지 않은 링크는 밑줄이 그어져있고 파란색이고, 방문된 링크는 밑줄이 그어져있고 보라색, 활성화된 상태의 링크는 밑줄이 그어져 있고 빨간색이다. 우리는 CSS를 활용하여 상태마다의 표시를 변경할 수 있다.

ex)<style>
a:link {
  color: green; 
  background-color: transparent; 
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

Link Color

changing the default colors of links

Images


CSS를 활용하여 버튼의 스타일 또한 변경할 수 있다.

ex) 
<style>
a:link, a:visited {
  background-color: #f22336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

페이지가 길어서 내용이 많은 웹 페이지의 경우 북마크가 유용하게 사용될 수 있다.
링크를 생성하여 해당 링크를 누르면 명시되어진 위치로 이동하는 코드를 작성한다.

ex) <h2 id = "C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>

id값을 설정하고 이후 해당 id위치로 이동하고 싶을 때 #C4로 연결된 링크를 통해 이동할 수 있다.

Image Attributes or style

이미지의 넓이와 높이를 조정하는 것에 속성값 변환을 쓸 것인지 아니면 스타일로 조정할 것인지에 대해 생각해볼 필요가 있다.

첫번째 이미지는 속성값으로 넓이와 높이를 128로 지정했지만 헤드태그의 style에서 width를 100%로 고정해놨기 때문에 변화가 없다.

HTML5 Icon

두번째 이미지는 소스이미지의 태그 안에서 style을 사용해 이미지를 변환시켰고 적용이 됐다. 이를 통해 링크의 속성값보다는 스타일태그가 우선되며 스타일태그 중에서도 헤드태그로 전체가 적용되는 것보다 개별적으로 들어가는 조정값이 우선된다는 사실을 알 수 있다.

HTML5 Icon

Images in Another Folder

HTML파일과 다른 폴더에 있는 이미지를 불러오고 싶다면

<img src = "/images/image.jpg" alt="image">
와 같은 코드를 사용할 수 있다. 폴더를 / 로 구분

또 URL을 사용하여 다른 서버에 있는 이미지를 갖고 오고 싶다면

<img src ="https://abced.com/images/camp/image.jpg" alt="image">
와 같은 방법으로 가져올 수 있다.

이미지 링크는 Gif확장자에도 가능하며 만약 텍스트 혹은 문단 사이에 이미지를 넣고 싶다면 Style의 float값을 사용하면 된다.


ex) 
<!DOCTYPE html>
<html>
<body>


<p>
<img src="https://live.staticflickr.com/65535/50002110743_ca9dffdbc7_b.jpg" alt="Smiley face" style="float:right;width:42px;height:42px;">
텍스트의 오른쪽에 이미지가 위치하게 된다.
</p>

<p><strong>Float the image to the left:</strong></p>
<p>
<img src="https://live.staticflickr.com/65535/50002110743_ca9dffdbc7_b.jpg" alt="Smiley face" style="float:left;width:42px;height:42px;">
텍스트의 왼쪽에 이미지가 위치하게 된다.
</p>

</body>
</html>

Smiley face 텍스트가 차지하고 있는 영역의 오른쪽에 이미지가 위치하게 된다.

Float the image to the left:

Smiley face 텍스트가 차지하고 있는 영역의 왼쪽에 이미지가 위치하게 된다.




Image Maps

이미지맵 태그는 클릭이 가능한 이미지영역을 만든다. 영역은 하나 이상의 에리어 태그를 통해 설정된다.

<img src="https://www.w3schools.com/html/workplace.jpg" alt="Workplace" usemap="#workmap">
usemap 속성을 사용하여 맵과 연동될 수 있도록 한다.

<map name="workmap">
맵의 이름을 usemap 속성과 같게 하여 받아준다.
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  
  area shapedpsms rect, circle, poly, default가 있다.
  coords에서 앞의 두 숫자는 X,Y좌표를 의미하고 뒤에 두 숫자는 포함하는 픽셀수를 의미한다.
  shape poly를 사용할 경우 x,y좌표만을 이용하여 영역을 설정한다.
  
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Background Image on a HTML element

<p>A background image for a div elememt:</p>

<div style="background-image: url('img_girl.jpg');">
</div>


<p>A background image for a p elememt:</p>

<p style="background-image: url('img_girl.jpg');">

</p>

div태그와 style을 사용하여 텍스트의 배경이미지를 설정해줄 수 있다.
또한 인라인 스타일 뿐만 아니라 head태그 안의 스타일 태그를 통해서도 배경이미지를 설정해줄 수 있다.

Background Repeat

만약 element보다 이미지의 크기가 작다면 끝 영역에 닿을 때까지 이미지는 계속 반복생성된다. 반복되는 것을 막기 위해서 코드를 추가할 수 있다(no-repeat). 또한 반복 없이 페이지 전체를 커버하기 위해서도 몇가지 코드를 추가할 수 있다.

ex) 

<style>
  <body> 
   background-imageL url('https://live.staticflickr.com/65535/50002110743_ca9dffdbc7_b.jpg');
   background-repeat: no-repeat;
   background-attachment: fixed;
   
   
   background-size:cover;
   전체 요소가 항상 이미지로 덮어질 수 있도록 위 코드를 작성한다.
   background-size: 100% 100%;
   만약 이미지가 창 크기에 조절에 따라 늘여지길 원한다면 cover코드 줄을 삭제하고 위 코드를 작성한다.

  </body>  
</style
profile
송민우
Front-end Developer / UX designer
다음 포스트

Div와 Span의 차이

0개의 댓글