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

DOM(Document Object Model)

DOM은 HTML에서 정의하는 것이나, 자바스크립트의 일부로 구현된 것이 아닌, 주요 브라우저 벤더들이 구현하는 것이다.

DOM은 HTML 페이지에 대한 모델을 구성하거나 페이지에 접근하고 수정하는 영역을 담당한다.

DOM은 브라우저가 DOM tree를 이용하여 이 모델을 구성하는 방법을 명시한다.

DOM 쿼리 캐싱하기

스크립트가 같은 요소를 한 번 이상 사용할 필요가 있다면 요소의 위치를 변수에 저장하는 것이 좋다.

같은 요소를 탐색하기 위해 DOM 트리를 여러번 조회하는 것을 방지할 수 있기 때문이다.

이런 방법을 Caching 이라고 한다. DOM 트리내의 객체에 대한 Reference(노드의 위치)를 저장한다고도 한다.

var itemOne = getElementById('one');

사용한 메서드가 하나 이상의 노드를 리턴할 수 있다면 탐색 조건에 일치하는 노드가 하나 뿐이더라도,

항상 노드의 collection인 NodeList 객체를 리턴한다.

Nodelist 객체에서 요소 선택하기

var elements = getElementById('hot');

if (elements.length >=1) {
    var firstItem = elements[0];    // elements.item(0);
}

배열 문법이 item() 메서드보다 빠르게 동작한다.

CSS 선택자를 이용해 요소 선택하기

querySelector는 첫번째 요소만 리턴하고, querySelectorAll은 NodeList 객체를 리턴한다.

// querySelector 메서드는 조건에 일치하는 첫 번째 요소만 리턴한다.
var el = document.querySelector('li.hot');
el.className = 'cool';

// querySelectorAlll 메서드는 NodeList 객체를 리턴한다.
// 조건에 일치하는 두 번째 (목록에서는 세 번째) li 요소를 선택하여 특성을 변경한다.
var els = document.querySelectorAll('li.hot');
els[1].className = 'cool';

공백 노드

일부 브라우저는 요소 사이사이의 공백을 텍스트 노드로 추가하기 떄문에 DOM을 탐색하는데 방해가 된다.

(ie는 공백문자를 무시해 텍스트 노드를 추가 생성하지 않음)

페이지 내의 공백 문자를 모두 제거한다면 페이지 크기가 작아져 더욱 빠르게 클라이언트에 전송되거나 로드할 수 있지만,

코드를 읽기 어려워진다.

jQuery라는 자바스크립트 라이브러리는 이 문제를 알아서 해결해준다.

텍스트 노드에 접근해서 변경하기

var itemTwo = document.getElementById('two');  // 목록의 두 번째 아이템을 가져온다.

var elText  = itemTwo.firstChild.nodeValue;    // 텍스트 내용을 가져온다.
//elText = elText.replace('잣', '양배추');
itemTwo.firstChild.nodeValue = elText.replace('잣', '양배추');  // 잣을 양배추로 변경한다.

HTML 콘텐츠 추가 / 제거하기

DOM 조작방식은 innerHTML 속성을 이용하는 방법보다 보안상 안전하다. 하지만 더 많은 코드를 작성해야하며, 더 느리게 동작할 수도 있다.

innerHTML 속성은 전체 콘텐츠에 접근 및 수정할 때 적합하다.

요소로부터 HTML을 가져올 때 innerHTML 속성을 이용해 요소의 모든 콘텐츠를 하나의 문자열로 가져올 수 있다.

이 때 마크업도 포함된다.

'<em>신선한</em>무화과'

아래는 마크업을 포함한 문자열을 수정하는 예제이다.

// 목록의 첫 번째 아이템을 변수에 저장한다.
var firstItem = document.getElementById('one');

// 아이템의 콘텐츠를 가져온다.
//var itemContent = firstItem.innerHTML;

// 첫 번째 아이템의 콘텐츠를 링크로 수정한다.
firstItem.innerHTML = '<a href=\"http://example.org\">' + firstItem.innerHTML + '</a>';

저작자표시 동일조건

'Web Develop > Front-End' 카테고리의 다른 글

Android Webview - input에서 엔터키 입력 감지 안될 때 (0)	2022.10.12
CSS 선택자 우선순위 (0)	2021.08.22
jquery - attr('checked','checked') 가 한번만 동작할 때 (0)	2021.05.11

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

Roopretelcham

Web Develop

html 기초

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' 카테고리의 다른 글

자바스크립트 - 문서 객체 모델(Document Object Model)

'Web Develop > Front-End' 카테고리의 다른 글

반응형 웹 만들기

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

HTML 5 미지원 브라우저 고려하기

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

윈도우 웹서버 설치 및 HTML 실습기초

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

+ Recent posts

티스토리툴바

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