728x90

WebRTC 특징

웹에서 사용할 수 있는 P2P 기술

기본적으로 별도의 서버를 사용하지 않으므로 두 피어가 연결 방법을 공유하기 위한 가상의 신호 서비스인 Signalling 사용
클라이언트가 동일 로컬 네트워크가 아닌 이상 다이렉트 소켓을 사용할 수 없는 경우(P2P연결불가)가 많으므로, 릴레이 서버인 TURN 서버를 사용
UDP 기반

1:1 , 1:N, N:N 응용서비스 개발 모두 가능

1:1 - 카카오 보이스톡

1:N - 방송서비스 (대량 접속 환경에선 P2P 성격은 버려짐)

N:N - 화상회의형서비스

WebRTC 어려움

관련 기술 문서 부족
UDP기반의 RTP프로토콜로 품질 불확실성
고난이도의 미디어 처리

강의 : https://nomadcoders.co/noom

줌 클론코딩

WebSockets, SocketIO, WebRTC

요구사항 :

ExpressJS, app.get(), Pug, JS

Node v14.17.3 이상

pug

: html을 조금 더 세련되게 쓸 수 있는 템플릿 언어. express 뷰 엔진

node.js

__filename 은 현재 실행 중인 파일 경로

__dirname 은 현재 실행 중인 폴더 경로

위는 CommonJS 모듈내에서만 동작하며 ES모듈에서는 동작안하므로 아래 코드 추가 필요

import path from 'path';
const __dirname = path.resolve();

“Uncaught SyntaxError: Cannot use import statement outside a module” 에러시 package.json에 아래 코드 추가

 "type": "module",

express내에서 템플릿 엔진을 사용하려면
app.set으로 설정

https://expressjs.com/ko/guide/using-template-engines.html

Express와 함께 템플리트 엔진 사용

Express와 함께 템플리트 엔진을 사용 Express가 템플리트를 렌더링하려면 다음과 같은 애플리케이션 설정이 필요합니다. views, 템플리트가 있는 디렉토리. 예: app.set('views', './views') view engine, 사용할

expressjs.com

nodemon 특정 경로 파일 수정할때는 재시작되지 않도록 설정하려면 nodemon.js에 ignore 추가

{
    "ignore": ["src/public/*"],
    "exec": "babel-node src/server.js"
}

바벨은 그 자체로 아무것도 하지 않으므로 플러그인을 사용해야한다.

babel foundation에서는 plugin들을 포함한 번들파일을 포함한 preset을 제공하며 (plugin 자동 설치) "@babel/preset-env"는 공식적인 기본 프리셋이다.

https://developer.mozilla.org/ko/docs/Web/API/WebSocket

WebSocket - Web API | MDN

WebSocket 객체는 서버와의 WebSocket 연결을 생성하고 관리할 수 있는 API 들을 제공합니다. 이는 데이터를 전송하거나 주고 받는 등의 API 들을 포함합니다.

developer.mozilla.org

webSocket에는 아래와 같이 자유롭게 어트리뷰트를 추가하고 설정할 수 있다.

 socket["nickname"] = parsedMsg.payload;

SocketIO

소켓IO는 웹소켓의 일부분이 아니다. 대부분의 브라우저가 웹소켓을 지원하지만 미지원인 경우 롱폴링(long polling) 으로 연결이 이뤄진다.

*클라이언트가 서버에 있는 정보를 요청하면 지정한 시간동안 연결을 열어둔다. 서버에 정보가 없으면 클라이언트가 요청한 정보가 생길 때 까지 또는 지정한 시간이 끝날 때까지 해당 요청을 열어둔다. 지정 시간이 끝나면 클라이언트는 서버에 있는 정보를 다시 요청한다. 코멧은 서버가 클라이언트로 뭔가를 송신할 수 있을때까지 HTTP 응답 완료를 지연시킨다. 이 기법을 'GET' 또는 '미결 POST(pending -POST) 라고 부른다.

저작자표시 비영리 변경금지

'Web Develop > Web Programming' 카테고리의 다른 글

Spring Boot시작하기 (0)	2021.08.10
html 기초 (0)	2021.01.07
반응형 웹 만들기 (0)	2017.03.23
HTML 5 미지원 브라우저 고려하기 (0)	2017.03.21
윈도우 웹서버 설치 및 HTML 실습기초 (0)	2017.03.09

728x90

https://start.spring.io/

위 사이트에서 Generate

Group :  프로젝트를 식별 고유 아이디.
 ex) com.cafe24.test

Artifact : 버전 정보를 생한 이름(jar, war) , 프로젝트 ID

 ex) Test Project

Application.java

@SpringBootApplication: @EnableAutoConfiguration, @ComponentScan, @Configuration을 하나로 묶은 어노테이션

실행 시 서버가 가능되는 걸 볼 수 있다.

- 시작페이지를 만들기 위해

resources > static 하위에 index.html 파일을 생성

시험적으로 body의 내용을 바꾸고 localhost:8080페이지를 열어보면 index.html의 내용을 확인가능

- 컨트롤러 생성

Inaugurate/src/main/java 경로에 TestController.java파일 생성

package com.cafe24.itwillbs2.Inaugurate.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {

	@RequestMapping(value = "/home")
	public String home() {
		return "index.html";
	}
}

http://localhost:8080/home 경로 접속 시 index.html 의 내용이 출력된다

@ResponseBody 로 data 전달

Controller.java

(...)
@ResponseBody
	@RequestMapping("respTest")
	public String respTest() {
		String val = "Response Test!";
		return val;
	}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
	$.ajax({
		type: "GET", url: "/respTest", 
		success: (data) => { console.log(data); 
		$('#contents').html(data); }
	});
</script>


</head>
<div id="contents"></div>
<body>Hello World!
</body>
</html>

- Rest컨트롤러 이용하기

- RestController는 Spring 4.0이상에서 지원하며 @RestController 는 @ResponseBody 어노테이션은 기본적으로 활성화되어있어 추가 불필요

class 이름을 RestController로 하면 어노테이션과 이름이 충돌되기 때문에 TestRestController로 클래스 생성

TestRestController.java

(...)
@RestController
public class TestRestController {
	
	@RequestMapping(method = RequestMethod.GET, value = "/restTest")
	public String getValueTest() {
		String testVal = "restController Test";
		return testVal;
	}

}

index.html에서 ajax요청 url만 바꿔서 테스트 해보면 TestRestController클래스의 메소드의 테스트값이 출력되는 걸 확인가능하다.

* 스프링 부트 프로젝트 폴더구조

src
└─ main
   └─ resource
      └─ templates (View: Thymeleaf, Groovy, Velocity 등)
      └─ static    (정적 컨텐츠 : html, css, js, image 등)

- view로 JSP 사용하기

src/main/webapp/WEB-INF/views 에 index.jsp파일 생성 (폴더 없으면 생성)

pom.xml에 의존성 추가

<dependencies>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>
</dependencies>

application.properties에 환경설정 추가

spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

Controller.Java 소스 추가작성

@RequestMapping("test")
	public ModelAndView test() throws Exception {
		ModelAndView mav = new ModelAndView("index");
		mav.addObject("name", "gildong");
		List<String> testList = new ArrayList<String>();
		testList.add("a");
		testList.add("b");
		testList.add("c");
		mav.addObject("list", testList);
		return mav;

	}

서버실행 후 확인해보면 index.jsp의 화면을 보여줌을 알 수 있다.

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>Hello Spring Boot!</h1>
	<div>JSP List Test</div>
	<c:forEach var="item" items="${list}" varStatus="idx"> ${idx.index}, ${item} <br />
	</c:forEach>

</body>
</html>

저작자표시 비영리 변경금지

'Web Develop > Web Programming' 카테고리의 다른 글

WebRTC 및 Node 등 스터디 (0)	2022.02.25
html 기초 (0)	2021.01.07
반응형 웹 만들기 (0)	2017.03.23
HTML 5 미지원 브라우저 고려하기 (0)	2017.03.21
윈도우 웹서버 설치 및 HTML 실습기초 (0)	2017.03.09

728x90

0. 개발 환경 구축

https://rutel.tistory.com/309?category=605953

이클립스 웹(html+jsp) 개발환경 구축

JSP(Java Server Page) 설치 JAVA 개발을 할수 있는 자바개발툴 JDK https://www.oracle.com/java/technologies/ Top Downloads - Java SE - Java SE 8 https://www.oracle.com/java/technologies/javase-download..

rutel.tistory.com

1. 기초 소스 + 문단 나누기 등 기본태그

<!DOCTYPE html>
<html>
 <head>
  <title>html 첫 시간</title>
 </head>
 <body>
  <h1>html 첫 시간</h1>
  <h2>HTML이란?</h2>
  <p>
  Hyper Text Markup Language의 약자.<br>
  웹페이지를 만들어 주는(구조를 담당) 프로그램언어.<br>
  명령어(tag)로 구성된다.
  </p>
  <p>
  일반적으로는 tag는 각 괄호 안에 들어가고 시작 tag와 종료 tag 한 쌍으로 이루어지며<br>
  원칙적으로 대소문자 구별은 없으나 소문자로 쓴다.<br>
  소스상에서 공백처리는 줄바꿈 적용 불가하고<br>
  문자 사이 띄우기는 한 개만 가능하다.
  </p>
  
  <p>
  웹문서를 저장할 때 확장자는 .htm 또는 .html로 저장한다.<br>
  한글을 포함하여 영문 이외의 특수문자 등을 제대로 나타내려면 인코딩은 UTF-8로 지정한다.
  </p>

  <hr>
   <h2>웹문서를 구성하는 필수(기본) 태그들</h2>
  <hr>

  <pre>
   &lt;!DOCTYPE html&gt;		----- 웹문서 버전을 브라우저에 알림
   &lt;html&gt;			----- 웹문서 시작 선언
    &lt;head&gt;			----- 웹문서 머리말 영역 시작 선언 
					사용자에 보이지않으나 여러 태그들 추가됨
     &lt;title&gt; ... &lt;/title&gt; 	----- 웹문서 제목 지정 (브라우저 탭 부분)
    &lt;/head&gt;			----- 웹문서 머리말 영역 끝 선언
    &lt;body&gt;			
	...			----- 사용자에게 보여질 컨텐츠 등을 지정함
    &lt;/body&gt;
   &lt;/html&gt;			----- 웹문서 끝 선언
  </pre>

  <hr>
  hn(n=1~6)태그 - 제목글자 태그들
  <hr>
  <p>
   글자는 두껍게(볼드체)로 나타나며
   위아래에 한 줄 공백이 생긴다.
   글자의 크기는 h1일 떄 가장 크고 점점 작아지다가 h6일 떄 가장 작다.
  </p>
  <h1>제목글자 태그 h1입니다.</h1>
  <h2>제목글자 태그 h2입니다.</h2>
  <h3>제목글자 태그 h3입니다.</h3>
  <h4>제목글자 태그 h4입니다.</h4>
  <h5>제목글자 태그 h5입니다.</h5>
  <h6>제목글자 태그 h6입니다.</h6>
<!--   <h7>제목글자 태그 h7입니다.</h7> -->
<!--   <h8>제목글자 태그 h8입니다.</h8> -->
<!--   <h9>제목글자 태그 h9입니다.</h9> -->

 <hr>
  <h2>body(본문)을 구성하는 여러 태그들</h2>
 <hr>
 <p> <!-- 소스상의 공백은 브라우저에 영향을 못 미치나 작업자의 효율성을 위함임 -->
  문단을 구성 &lt;p&gt;<br>
  줄 바꿈을 지정 &lt;br&gt;<br>
  수평선을 지정 &lt;hr&gt;<br>
  공백을 소스 그대로 살려줌 (고정폭 글꼴로 나타남) &lt;pre&gt;
 </p>
 <!-- 주석 태그입니다. -->

 <h3>풀꽃</h3>

 <pre>		나태주</pre>
 <p>
 자세히 보아야 예쁘다<br>
 오래 보아야 사랑스럽다<br>
 너도 그렇다
 </p>
 </body>
</html>

결과 미리보기 :

html 첫 시간

HTML이란?

Hyper Text Markup Language의 약자.
웹페이지를 만들어 주는(구조를 담당) 프로그램언어.
명령어(tag)로 구성된다.

일반적으로는 tag는 각 괄호 안에 들어가고 시작 tag와 종료 tag 한 쌍으로 이루어지며
원칙적으로 대소문자 구별은 없으나 소문자로 쓴다.
소스상에서 공백처리는 줄바꿈 적용 불가하고
문자 사이 띄우기는 한 개만 가능하다.

웹문서를 저장할 때 확장자는 .htm 또는 .html로 저장한다.
한글을 포함하여 영문 이외의 특수문자 등을 제대로 나타내려면 인코딩은 UTF-8로 지정한다.

웹문서를 구성하는 필수(기본) 태그들

   <!DOCTYPE html>		----- 웹문서 버전을 브라우저에 알림
   <html>			----- 웹문서 시작 선언
    <head>			----- 웹문서 머리말 영역 시작 선언 
					사용자에 보이지않으나 여러 태그들 추가됨
     <title> ... </title> 	----- 웹문서 제목 지정 (브라우저 탭 부분)
    </head>			----- 웹문서 머리말 영역 끝 선언
    <body>			
	...			----- 사용자에게 보여질 컨텐츠 등을 지정함
    </body>
   </html>			----- 웹문서 끝 선언

hn(n=1~6)태그 - 제목글자 태그들

글자는 두껍게(볼드체)로 나타나며 위아래에 한 줄 공백이 생긴다. 글자의 크기는 h1일 떄 가장 크고 점점 작아지다가 h6일 떄 가장 작다.

제목글자 태그 h1입니다.

제목글자 태그 h2입니다.

제목글자 태그 h3입니다.

제목글자 태그 h4입니다.

제목글자 태그 h5입니다.

제목글자 태그 h6입니다.

body(본문)을 구성하는 여러 태그들

문단을 구성 <p>
줄 바꿈을 지정 <br>
수평선을 지정 <hr>
공백을 소스 그대로 살려줌 (고정폭 글꼴로 나타남) <pre>

풀꽃

		나태주

자세히 보아야 예쁘다
오래 보아야 사랑스럽다
너도 그렇다

2. 글자의 형태와 관련된 태그들

<!DOCTYPE html>
<!--html5버전 (현재 웹표준)의 문서임을 선언 -->
<html>
<head>
<meta charset="UTF-8">
    <title>html 두번째</title>
</head>
<body>
    <hr>
    <h1>글자의 형태와 관련된 태그들</h1>
    <hr>
    볼드체 <b>글자를 두껍게</b> -- &lt;b&gt;태그<br>
    볼드체 <strong>(중요한 내용) 글자 두껍게</strong> -- &lt;strong&gt;태그<br>
    이탤릭 <i>글자를 기울여서</i> -- &lt;i&gt;태그<br>
    이탤릭 <em>(강조의 의미) 글자를 기울여서</em> -- &lt;em&gt;태그<br>
    <small>작은 글자</small> -- &lt;small&gt;태그<br>
    2<sup>2</sup>&lt;sup&gt;태그<br>
    H<sub>2</sub>O&lt;sub&gt;태그<br>
    마크<mark>(형광펜)</mark> 효과<br>
<h3>동시 적용 시의 올바른 문법</h3>
<p>
	1. <mark><b>마크펜 효과 + 볼드체</b></mark> 동시 <br>
	2. <b><mark>마크펜 효과 + 볼드체</mark></b> 동시 <br> 	
<!-- 	3. <b><mark>마크펜 효과 + 볼드체</b></mark> 동시 = x<br> -->
<!-- 	4. <mark><b>마크펜 효과 + 볼드체</mark></b> 동시 = x<br> -->
<!-- 시작과 종료태그를 서로 감싸듯이 쓴다. 엇갈리게 쓰면 틀림 -->
</p>
<h3>특수문자를 나타내는 특수문자 태그들<sup>(&로 시작하고 ;로 끝남)</sup></h3>
1.예약어 관련 특수문자 태그들
	<small>(html문서에서 특별한 약속이 되어있는 문자를 예약이라 함)</small> <br>	
	&amp; = &amp;amp; <br>
	&lt; = &amp;lt; <br>
	&gt; = &amp;gt; <br>
	(공백)&nbsp; = &amp;nbsp; 
	 <hr>
	&copy; = &amp;copy; <br>
	&trade; = &amp;trade; <br>
	&reg; = &amp;reg; <br>
 </hr>
</body>

</html>

결과 미리보기 :

글자의 형태와 관련된 태그들

볼드체 글자를 두껍게 -- <b>태그
볼드체 (중요한 내용) 글자 두껍게 -- <strong>태그
이탤릭 글자를 기울여서 -- <i>태그
이탤릭 (강조의 의미) 글자를 기울여서 -- <em>태그

작은 글자

-- <small>태그
2²<sup>태그
H₂O<sub>태그
마크

(형광펜)

효과

동시 적용 시의 올바른 문법

1.

마크펜 효과 + 볼드체

동시
2. 마크펜 효과 + 볼드체 동시

특수문자를 나타내는 특수문자 태그들^{(&로 시작하고 ;로 끝남)}

1.예약어 관련 특수문자 태그들

(html문서에서 특별한 약속이 되어있는 문자를 예약이라 함)

& = &
< = <
> = >
(공백) =  

© = ©
™ = ™
® = ®

결과 미리보기 :

3. 목록 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list - 목록 만들기</title>
</head>
<body>

<hr>
<h1>list - 목록 만들기</h1>
<hr>

<!-- 제목글자 2번째 크기 -->
<h2>목록의 종류</h2>

<p>
순서 있는 목록 &lt;ol&gt;<br>
순서 없는 목록 &lt;ul&gt;<br>
정의 목록 &lt;dl&gt;<br>
</p>
<hr>
<h2>ol - 순서 있는 목록</h2>
<!-- orderd list -->
<ol> 
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
	<li>juice</li>
	<li>cocoa</li>
</ol>

<ol>
	<li>red</li>
	<li>green</li>
	<li>blue</li>
</ol>

<ol>
<li>html</li>
<li>css</li>
<li>JS</li>
</ol>

<!-- 순서 없는 목록 -->
<ul>
<li>coffee</li>
<li>tea</li>
<li>milk</li>
<li>juice</li>
<li>cocoa</li>
</ul>

<ul>
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>

<ul>
<li>html</li>
<li>css</li>
<li>JS</li>
</ul>

<hr>
<h3>목록 앞의 모양을 지정하는 속성 - type</h3>
<h4>ol의 모양 지정 속성값들 ( type="<mark>1/a/A/i/I</mark>" )</h4>
<ol type="1">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>

<ol type="a">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>

<ol type="A">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>

<ol type="i">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>

<ol type="I">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>

<h4>ul의 모양 지정 속성값들 ( type="<mark>disc/circle/square</mark>" )</h4>
<ul type="disc">
<li>disc</li>
<li>circle</li>
<li>square</li>
</ul>

<ul type="circle">
<li>disc</li>
<li>circle</li>
<li>square</li>
</ul>

<ul type="square">
<li>disc</li>
<li>circle</li>
<li>square</li>
</ul>

<hr>
<h4>start속성으로 시작 기호(숫자) 값 바꾸기</h4>
<ol type="I" start="11">
<li>html</li>	<!-- 로마자 11부터 시작 -->
<li>css</li>
<li>JS</li>
</ol>

<hr>
 <h2>하위 목록 지정하기</h2>
<hr>

<ul>
 <li>html
  <ol>
   <li>tag</li>
   <li>속성</li>
   <li>속성값</li>
  </ol>
 </li>
 <li>css
  <ul>
   <li>selector</li>
   <li>속성</li>
   <li>속성값</li>
  </ul>
 </li>
 <li>JS</li>
</ul>

<h5>문제, 하위목록 만들기</h5>
<ol>
 <li>coffee
	<ul type="square">
  		<li> 아메리카노 </li>
  		<li> 카페라떼 </li>
  		<li> 카푸치노 </li>
	</ul>
 </li>

 <li>tea
	<ul>
  		<li> 녹차 </li>
  		<li> 홍차 </li>
	</ul>
 </li>
</ol>

<hr>
<h2>dl (Description List) - 정의 목록</h2>
<dl>
	<dt>dl</dt>
	<dd>정의 목록</dd>
</dl>

<dl>
	<dt>ol</dt> 
	<dd>순서가 있는 목록</dd>
</dl>

<pre>
 정의목록(dl)은 li를 쓰지 않고
 &lt;dt&gt; - 정의 내릴 대상
 &lt;dd&gt; - 정의 내용
                     를 쓴다.
</pre>

<dl>
<dt>ol</dt>
<dd>순서 있는 목록</dd>
<dt>ul</dt>
<dd>순서 없는 목록</dd>
</dl>

<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language의 약자.</dd>
   <dd>웹페이지를 만들어 주는 프로그램언어.</dd>
   <dd>웹페이지 구조를 담당</dd>
</dl>

</body>
</html>

결과 미리보기 :

list - 목록 만들기

목록의 종류

순서 있는 목록 <ol>
순서 없는 목록 <ul>
정의 목록 <dl>

ol - 순서 있는 목록

coffee
tea
milk
juice
cocoa

red
green
blue

html
css
JS

coffee
tea
milk
juice
cocoa

red
green
blue

html
css
JS

목록 앞의 모양을 지정하는 속성 - type

ol의 모양 지정 속성값들 ( type="1/a/A/i/I" )

1 (기본값)
a
A
i
I

1 (기본값)
a
A
i
I

1 (기본값)
a
A
i
I

1 (기본값)
a
A
i
I

1 (기본값)
a
A
i
I

ul의 모양 지정 속성값들 ( type="disc/circle/square" )

disc
circle
square

disc
circle
square

disc
circle
square

start속성으로 시작 기호(숫자) 값 바꾸기

html
css
JS

하위 목록 지정하기

html
1. tag
2. 속성
3. 속성값
css
- selector
- 속성
- 속성값
JS

문제, 하위목록 만들기

coffee
- 아메리카노
- 카페라떼
- 카푸치노
tea
- 녹차
- 홍차

dl (Description List) - 정의 목록

dl: 정의 목록

ol: 순서가 있는 목록

 정의목록(dl)은 li를 쓰지 않고
 <dt> - 정의 내릴 대상
 <dd> - 정의 내용
                     를 쓴다.

ol: 순서 있는 목록
ul: 순서 없는 목록

HTML: Hyper Text Markup Language의 약자.; 웹페이지를 만들어 주는 프로그램언어.; 웹페이지 구조를 담당

4. 표 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table - 표 만들기</title>
<style type="text/css">
	talbe, th, td { border:1px solid #69f; }
</style>
</head>
<body>
<hr>
<h1>table - 표 만들기</h1>
<table>
<tr>
	<th>태그</th>
	<th>설명</th>
</tr>
<tr>
	<td>table</td>
	<td>표 전체를 구성하는 태그</td>
</tr>

<tr>
	<td>tr</td>
	<td>줄을 구성하는 태그</td>
</tr>

<tr>
	<td>th</td>
	<td>제목칸 구성하는 태그</td>
</tr>

<tr>
	<td>td</td>
	<td>(일반)칸 구성하는 태그</td>
</tr>
</table>

</body>

</html>

표에 관한 스타일은 head태그내에서 css를 통해 지정한다.

결과 미리보기 :

table - 표 만들기

태그	설명
table	표 전체를 구성하는 태그
tr	줄을 구성하는 태그
th	제목칸 구성하는 태그
td	(일반)칸 구성하는 태그

저작자표시 비영리 변경금지

'Web Develop > Web Programming' 카테고리의 다른 글

WebRTC 및 Node 등 스터디 (0)	2022.02.25
Spring Boot시작하기 (0)	2021.08.10
반응형 웹 만들기 (0)	2017.03.23
HTML 5 미지원 브라우저 고려하기 (0)	2017.03.21
윈도우 웹서버 설치 및 HTML 실습기초 (0)	2017.03.09

728x90

미디어 쿼리

css 모듈 중 하나로 접속 기기에 따라 특정한 CSS 스타일을 사용하도록 해줌

1
[ONLY | NOT] @media 미디어 유형 [AND 조건]*[AND 조건]
cs

미디어 유형의 예 :

all : 모두

print : 인쇄장치

screen : 컴퓨터 스크린

미디어 쿼리의 조건에는 뷰 포트의 너비(width, height)나 단말기 브라우저의 너비(device-),

단말기 방향(landscape, portrait) 등을 속성으로 사용할 수 있다.

처음부터 미디어 쿼리를 이용해 반응형 웹을 만들 때

스마트폰 스타일이 간단한 스타일을 사용하므로, 처음부터 미디어 쿼리를 이용해 반응형 웹을 만들 때는 모든 기기에서 공통되는 스타일을 정의하고

스마트폰->태블릿 -> PC 순으로 미디어 쿼리를 적용한다.

화면 너비가 1024 이상일 때 #container 너비를 960px로 지정

style.css

1
2
3
4
5
@media screen and (min-width:1024px) {
    #container {
        width: 960px;
    }
}
Colored by Color Scripter
cs

유동형 레이아웃

픽셀로 레이아웃을 지정하면 화면이 작은 스마트폰이나 태블릿 PC에서는 글자가 작아 보기가 어렵다.

미디어 쿼리는 기기 해상도별로 따로 CSS를 정의해야하며 까다롭다. 따라서 문서 안의 각 요소 너비를 픽셀 값과 같은 고정폭이 아닌 백분율(%)과 같은 가변폭으로 지정하면 좋다.

이렇게 사이트 레이아웃을 백분율로 지정하는 것을 '유동형 레이아웃(fluid layout)'이라고 한다. (브라우저 너비 값이 바뀔 때마다 너비 값이 바뀜)

요소의 너비를 백분율로 바꾸기

// 960px를 백분율로 변경 -> 96%

1
2
3
4
#wrapper {
width:96%
( ...)
}
cs

// wrapper너비인 960px를 기준으로 600px를 백분율로 변경, 600px / 960px = 0.625 -> 62.5%

1
2
3
4
5
article {
float : left;
width: 62.5%;
padding:20px;
}
cs

글자 크기를 em 단위로 변환하기

px는 모니터의 해상도를 기준으로 하기 떄문에 N-screen 시대에는 적합하지 않아서, em 단위를 사용하는 것이 좋다.

16px가 1em 이므로, em값을 구하려면 px 글자크기를 16px로 나누어 em 값을 계산하면 된다.

em = 글자 크기(px) / 16px

유동형 이미지 만들기

백분율로 지정한다. (100%)

1
2
3
img {
    max-width: 100%;
}
cs

유동형 비디오 만들기

마찬가지로 백분율로 지정. (100%)

1
2
3
4
video {
        max-width: 100%;
    }
 
cs

그리드 레이아웃

백분율로 지정하는 유동형 레이아웃도 N-screen 시대에 대처할 순 있지만, 사이트 전체 레이아웃을 똑같이 유지하기 때문에

스마트폰처럼 브라우저 창의 너비가 좁을 경우에는 적합하지 않을 수 있다.

그래서 나온 것이 그리드 레이아웃 기법이다.

PC나 태블릿, 스마트폰 용 각각에 맞게 레이아웃을 먼저 구상한다.

그런 후 각각의 요소에 적절한 시맨틱 태그나 id값을 지정한다.

CSS 리셋

문서 전체의 글꼴, 마진이나 패딩의 값을 지정하지 않으면 브라우저마다 각기 다른 기본 값을 적용하게 된다. 그것을 막기위해 필요한 CSS 기본 값들을 미리 설정하는 것을 'CSS reset' 이라고 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
      body { /* 문서전체의 글꼴, 마진, 패딩 리셋*/
        margin: 0;
        padding: 0;
        font-family: "돋움";
        font-size: 1em;
      }
      a:link {
        text-decoration: none;
      }
      a img {
        border: 0; /* 이미지 링크 테두리 0 */
      }
    </style>
cs

geoMap_result.html

저작자표시 동일조건

'Web Develop > Web Programming' 카테고리의 다른 글

WebRTC 및 Node 등 스터디 (0)	2022.02.25
Spring Boot시작하기 (0)	2021.08.10
html 기초 (0)	2021.01.07
HTML 5 미지원 브라우저 고려하기 (0)	2017.03.21
윈도우 웹서버 설치 및 HTML 실습기초 (0)	2017.03.09

728x90

HTML 5

브라우저는 자신이 인식하지 못하는 태그를 만나면 인라인 태그로 취급 (자신만의 영역을 갖지 않는 태그)

하지만 <header>나 <article> 같은 태그들은 자신만의 영역이 있어야 하는 block level 태그로, 영역이 있어야 위치 등을 옮길 수 있다.

* 블록 레벨 요소 : 적용했을 때 새로운 블록이 만들어지는 태그, 해당 태그가 적용된 부분의 앞뒤로 줄바꿈이 생긴다. <p><div>, <ul> 등...

* 인라인 요소 : 적용하더라도 줄 바꿈이 생기지 않는다. <a>, <img>, <br> 등...

웹 문서에서 사용한 시맨틱 태그들은 <style> </style> 사이에 다음과 같은 소스를 추가하여 강제로 블록 레벨 태그로 설정해주어야 한다.

1
2
3
header, section, nav, article, footer {
display:block;
}
Colored by Color Scripter
cs

시맨틱 태그를 지원하지 않는 브라우저는 다음과 같이 자바 스크립트를 이용해, 웹 문서에서 사용할 시맨틱 태그들을 새로 정의해야 한다.

<head> </head> 태그 사이에 다음 스크립트를 넣어준다.

1
2
3
4
5
6
7
8
<script type="text/javascript">
  document.createElement('article');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('header');
  document.createElement('footer');
</script>
cs

HTML5 Shiv

자바스크립트를 이용해 HTML5 태그를 직접 정의해 사용하는 것은 번거롭기 때문에, 이런 과정을 자바스크립트 파일로 제공한다.

https://github.com/aFarkas/html5shiv

위의 페이지로 이동후 src 폴더안의 html5shiv.js 파일을 저장,

<!--[if lt IE 9]>
	<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

Modernizr

HTML 5를 지원하는지 확인 가능한 라이브러리이다.

https://modernizr.com/

위의 사이트에서 최신 버전의 라이브러리를 다운로드 가능하고, 다운로드한 파일을 다음과 같이 페이지에 링크해 사용한다.

1
2
3
<head>
<script src="medernizr.min.js"></script>
</head>
Colored by Color Scripter
cs

저작자표시 동일조건

'Web Develop > Web Programming' 카테고리의 다른 글

WebRTC 및 Node 등 스터디 (0)	2022.02.25
Spring Boot시작하기 (0)	2021.08.10
html 기초 (0)	2021.01.07
반응형 웹 만들기 (0)	2017.03.23
윈도우 웹서버 설치 및 HTML 실습기초 (0)	2017.03.09

728x90

웹서버를 편하게 관리할 수 있는 bitnami

https://bitnami.com/stack/wamp/installer

Recommended 버전 다운로드 클릭, No thanks, just take me to the download 선택

Components에서 모두 체크 해제 후 next (PhpMyAdmin은 기본 선택)
6자 이상의 데이터베이스 루트 유저 비번 입력
cloud with Bitnami 체크박스 해제 후 next
설치과정에서 보안경고시 방화벽 해제 허용 - Finish!

설치 후 Bitnami가 실행되면서 웹페이지가 열리는데, 이것은 localhost에서 보여주는 것이다.

htdocs라는 디렉토리의 index.html 을 읽어 웹브라우저에 보여주는 것인데, 이것은 다음이 경로에서 확인가능하다.

C:\Bitnami\wampstack-5.6.30-1\apache2\htdocs (설치 시 기본 경로)

메모장을 열어 아래의 소스를 작성한다.

저장할 때는 *.html, utf8로 저장하고 위의 htdoc폴더에 넣어준다.

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1>JavaScript</h1>    
    <h2>JavaScript</h2>
</body>
</html>
cs

1행의 DOCTYPE은 문서의 타입을 알려주는 것이며 html 뒤에 아무것도 적지 않으면 표준 (5.0)의 문서임을 알리는 것이다.

html의 본질은 링크이며, 아래 소스에서 <html>은 시작태그, 빗금이 있는 </html>은 끝 태그라고 한다. (또는 열린 태그, 닫힌 태그)

태그는 정보를 담거나 강조를 하기 위한 것으로, html은 문서의 , head는 문서의 정보, body는 문서의 본문을 나타낸다.

태그의 종류와 사용법은 https://opentutorials.org/course/1058 에서 확인 가능하다.

이후에 http://localhost:81/*.html 로 접속하면 페이지가 보일 것이다. (81은 포트 번호이며 설정에서 변경 가능)

만약에 index.html로 저장하였다면 그냥 localhost혹은 localhost:포트번호 로 접속하면 된다.

bitnami외에도 APMSETUP 모니터란 프로그램을 통해서도 웹서버를 제어할 수 있다.

(APMSETUP 모니터 설치시 htdocs 경로는 C:\APM_Setup\htdocs 가 됨)

크롬에서 검사를 통해 요소의 값을 변경해보기

우클릭-검사를 누르면 오른쪽에 창이 생긴다.

여기서 오른쪽 아래의 숫자값을 더블클릭해 값을 입력하거나 PgUP, PgDn으로 실시간으로 변경되는 하면을 볼 수 있다.

디버깅하기

Ctrl+Shift+J를 눌러 Console창의 에러메시지를 확인

php 에러를 찾을 때는 C:\Bitnami\wampstack-5.6.30-1\php 폴더의 php.ini 을 수정해 에러메시지를 브라우저에 노출시키는 방법이 있다. (보안상 실제 서비스시에는 비권장)

display_errors = off를 on으로 변경한 후, 아파치를 restart하면 다음과 같이 브라우저에 직접 노출되는 에러메시지를 볼 수 있게 된다.

Parse error: syntax error, unexpected '<' in C:\APM_Setup\htdocs\phpjs\1.php on line 10

혹은 \Apache(혹은 2)\logs 폴더의 error.log 파일을 열어 기록된 에러 메시지를 볼 수도 있다.

php 소스 코드 변경시 즉시 반영되게 하려면 opcache.enable=0 를 1로 변경한 후, 아파치를 restart한다.

저작자표시 동일조건

'Web Develop > Web Programming' 카테고리의 다른 글

WebRTC 및 Node 등 스터디 (0)	2022.02.25
Spring Boot시작하기 (0)	2021.08.10
html 기초 (0)	2021.01.07
반응형 웹 만들기 (0)	2017.03.23
HTML 5 미지원 브라우저 고려하기 (0)	2017.03.21

Web Develop/Web Programming

'Web Develop > Web Programming' 카테고리의 다른 글

'Web Develop > Web Programming' 카테고리의 다른 글

0. 개발 환경 구축

1. 기초 소스 + 문단 나누기 등 기본태그

html 첫 시간

HTML이란?

웹문서를 구성하는 필수(기본) 태그들

제목글자 태그 h1입니다.

제목글자 태그 h2입니다.

제목글자 태그 h3입니다.

제목글자 태그 h4입니다.

제목글자 태그 h5입니다.

제목글자 태그 h6입니다.

body(본문)을 구성하는 여러 태그들

풀꽃

2. 글자의 형태와 관련된 태그들

글자의 형태와 관련된 태그들

동시 적용 시의 올바른 문법

특수문자를 나타내는 특수문자 태그들(&로 시작하고 ;로 끝남)

3. 목록 만들기

list - 목록 만들기

목록의 종류

ol - 순서 있는 목록

목록 앞의 모양을 지정하는 속성 - type

ol의 모양 지정 속성값들 ( type="1/a/A/i/I" )

ul의 모양 지정 속성값들 ( type="disc/circle/square" )

start속성으로 시작 기호(숫자) 값 바꾸기

하위 목록 지정하기

문제, 하위목록 만들기

dl (Description List) - 정의 목록

4. 표 만들기

table - 표 만들기

'Web Develop > Web Programming' 카테고리의 다른 글

'Web Develop > Web Programming' 카테고리의 다른 글

'Web Develop > Web Programming' 카테고리의 다른 글

'Web Develop > Web Programming' 카테고리의 다른 글

티스토리툴바

특수문자를 나타내는 특수문자 태그들^{(&로 시작하고 ;로 끝남)}