Base/WEB

[WEB] HTML 기본 개념(html,css,script)

반응형

1.Front end  / Back end 

Front-End(client side): 클라이언트 사이드로서 보통 사용자가 보는 화면을 뜻한다.

 

browser(html)

html = html , css (꾸미는 것),  script(동작) 

html은 이 3가지로 구성되어있다. html로 기본 뼈대를 만들고 css로 살을 붙여 화면을 꾸미는 것을 한다. 

그리고 기본적인 동작을 하는데 있어서 script를 사용한다.

.jsp, .asp, .php (동적)

bootstrap(반응형 웹)

Presentation Layer(로직 x)

 

Bank-End(server side) : 서버 사이드로서 사용자가 보지 못하고 웹의 뒤에서 동작되는 것들을 의미한다.

 

Web Server(정적인 페이지 처리) - Apache, nginx

Web Application Server(WAS) - 이것을 통해 동적인 페어지를 처리 할수 있는 컨테이너를 포함한 서버다.

jsp, servlet, applet, nodeJs, C#, 

프레임워크(Django, Flask) - mvc or mvp 기반

 

Bussiness Layer(Logic), Persistence Layer - 사용자의 요청을 받아서 로직을 처리하는 것

back 단에서 DB와의 연결하고 그 결과를 Front side 에서 보여 준다.

 

 

 

2. 기본적인 HTML 구조

<!doctype html>  - HTML5를 사용함을 브라우저에 알려주는 것
<html lang="en">  - html 이 사용하는 lang
 <head> - html 문서에 대한 정보
  <meta charset="UTF-8"> - 문서에 대한 설명을 표시
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title> - head 안에 들어가는 태그로 제목표시줄의 내용
 </head>
 <body>  - html 문서에서 실제적으로 보여지는 부분
  
 </body>
</html>

기본적인 html 구조는 위와 같다. html은 태그(<TAG>)로 이루어져 있다.

 

이렇게 해당 <태그의 이름 | 속성명  = 속성값> 내용 < 종료태그> 구성되어 있다. 종료 태그는 해당 태그의 범위를 여기까지라고 지정하는 것으로 보통 써주는 것 이 좋다. 안쓸경우 에러가 날 경우가 많다.

 

  • 제목(Heading)

HTML은 제목을 표현할 수 있는 다양한 크기의 <h>태그를 제공한다.

가장 큰 <h1>태그부터 가장 작은 <h6>태그까지 다양한 크기로 제목을 표현할 수 있습니다.

예제

<h1>제목1의 크기입니다!</h1>

<h2>제목2의 크기입니다!</h2>

<h3>제목3의 크기입니다!</h3>

<h4>제목4의 크기입니다!</h4>

<h5>제목5의 크기입니다!</h5>

<h6>제목6의 크기입니다!</h6>

 

  • 단락(Paragraph)

단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고 한다.

예제

<h1>제목1의 크기입니다!</h1>

<h2>제목2의 크기입니다!</h2>

<h3>제목3의 크기입니다!</h3>

<p>여기서부터 단락입니다.</p>

 

  • <br>태그(break line)를 사용하면 새로운 단락을 만들지 않고도 줄을 나눌 수 있습니다.

 

  • 텍스트(text) 서식 미리 정의하기

HTML 코드에서 작성한 텍스트 서식을 그대로 표현하려면 <pre>태그를 사용해야 합니다.

<pre>태그(preformatted text) 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현됩니다.

 

 

 

3.CSS

CSS는 Cascading Style Sheets의 약자로서 HTML의 documents의 뼈대를 사용자에게 꾸며서 보여주는 기술이다.

HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 한다.

이 css를 하는법은 3가지가 있다.

 

1.HTML 문서안에 style 속성 사용

<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
</head>
<body>
<h1 style="color:blue; text-align:center;>
</body>
</html>

 

2.style 태그를 사용함

<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
</body>
</html>

이렇게 <body> 위에 head안 쪽에 넣어준다.

 

3.css 파일을 별도로 만들어 html 문서에 연결시킨다.

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
	<link href="./css/test.css" rel="stylesheet">
 </head>
 <body>

 	<h1 class="hi_css">CSS TEST</h1>
	<h1 >CSS TEST</h1>
	<center id='result'> 해당 태그는 센터에 출력 됩니다. </center>
	<p> 해당 태그는 오른쪽에 출력 됩니다. </p>


 	<!--사용자의 입력양식을 지정하는 form / action은 이 form 을 받을 어플리케이션이 누군인지를 지정해주는 것이다.-->
  <form action="destination.html" method="get">
	ID  : <input type="text" name="id" id="id" /><br/>
	PWD : <input type="password" name="pwd" id="pwd" /><br/>
	<input type="submit" value="SEND" >
  </form>

	<div id='msg' class='msg' value='a'></div>
	<input type='button' value='BTN' id='scriptBtn' />

	<p id='msgLayer'>
 </body>

</html>

<link> 를 사용하여 해당 경로에 있는 css파일을 가져와서 적용한다. css파일은 이렇게 구성되어 있다.

.hi_css{
	color:red;
	text-align:center;
	}
p {
	color:blue;
	text-align:Right;
}
#result {
	color:green;
	}
input[type=text]{
	color:red;
}
input[type=password]{
	color:blue;
}

 

 

4.jquery

jquery란 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다.

즉 동작을 함에있어 조작을 쉽게하기 위해 설계 된 라이브러리이다.

jquery 를 쓰기 위해서는 script를 가져온다는 구문이 필요하다. 그 구문은 아래와 같다.

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
	<link href="./css/test.css" rel="stylesheet"> - 
	<script src="http://code.jquery.com/jquery-latest.min.js"> - 스크립트를 쓰기위해 해당 사이트에서 가져온다는 구문이다.
    </script>

 </head>
 <body>

 </body>


</html>

그 후 사용할 jquery를 가져온다. html은 위에서 아래로 읽어나간다. 그래서 스크립트의 기능을 작성하고 쓰기위해서는 

밑에서 기능을 지정해줘야한다. 그 이유는 body부분에서 해당 속성명이나 클래스명이 들어가기전에 기능을 만들수 없기 때문이다. 변수를 지정하고 값을 넣어준다음 기능을 쓰는 함수와 같다고 보면 된다.

스크립트 부분은 <script> </scipt> 태그를 이용해 이 사이에 필요한 기능을 만들어 쓴다. 아래와 같이 간단하게 만들어 쓴다.

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
	<link href="./css/test.css" rel="stylesheet"> - 
	<script src="http://code.jquery.com/jquery-latest.min.js"> - 스크립트를 쓰기위해 해당 사이트에서 가져온다는 구문이다.
    </script>

 </head>
 <body>

 	<h1 class="hi_css">CSS TEST</h1>
	<h1 >CSS TEST</h1>
	<center id='result'> 해당 태그는 센터에 출력 됩니다. </center>
	<p> 해당 태그는 오른쪽에 출력 됩니다. </p>


 	<!--사용자의 입력양식을 지정하는 form / action은 이 form 을 받을 어플리케이션이 누군인지를 지정해주는 것이다.-->
  <form action="destination.html" method="get">
	ID  : <input type="text" name="id" id="id" /><br/>
	PWD : <input type="password" name="pwd" id="pwd" /><br/>
	<input type="submit" value="SEND" >
  </form>

	<div id='msg' class='msg' value='a'></div>
	<input type='button' value='BTN' id='scriptBtn' />

	<p id='msgLayer'>
 </body>
 <script>
 //jquery 형식
		$(document).ready(function(){
				$('#scriptBtn').click(function(){
						//window.alert('버튼을 클릭하셨습니다');
						//document text 추가하는 방법은 : append(),html(), text()
						$('.msg').append('텍스트를 추가할 때 사용하는 함수입니다~');
					})
			})
		//script 형식
 		document.getElementById('msgLayer').innerHTML='append msg';

 </script>

</html>

ㅈjquey에서는 $으로 시작된다.

$(document).ready(function(){} 는

ready는 일종의 제이쿼리 이벤트로 document 문서가 로드 되었을 때 발생하게 끔한다. 그 후 fuction 이라는 부분은 함수로서 {} 부분에 로직을 작성한다.

 

 

 

참조 url : tcpschool.com/html/

반응형
저작자표시

'Base > WEB' 카테고리의 다른 글

[WEB] D3.js Event, Aninmation 사용법 - 3  (0) 2020.09.14
[WEB] D3.js 에서 Data 사용법 - 2  (0) 2020.09.14
[WEB] D3.js 기본 개념 및 사용법 - 1  (0) 2020.09.14
[WEB] Javascript로 HTML 태그(DOM) 접근하기  (0) 2020.09.13
[WEB] window 환경에서 NGINX 설치 및 포트 수정  (0) 2020.09.11
나아무늘보
혼자 끄적끄적하는 블로그 입니다.