자바는 활용 영역에 따라 일반 데스크톱 환경을 지원하기 위한 Java SE(Standard Edition, J2SE)와 기업형 애플리케이션 개발을 지원하기 위한 Java EE(Enterprise Edition, J2EE)로 나뉜다. 대규모 자바 웹 프로그램을 개발하기 위해서는 두 가지 모두 필요하지만 대부분의 JSP 관련 APT와 실행환경은 톰캣에 포함되어 있기 때문에 연습용으로는 Java SE만 설치해도 될 것 같다.


Java JDK(Java Development Kit)는 자바 실행환경과 컴파일 도구를 포함한 개발자 도구로써, 자바 소스를 클래스 파일로 컴파일하는 컴파일러 및 디버거, JavaDoc 등 개발에 필요한 유틸리티로 구성되어 있다. 그리고 자바를 실행할 때 기반이 되는 자바 가상머신(JVM, Java Vitual Machine)과 기본적으로 제공되는 다양한 클래스 집합인 API, 자바 프로그램을 실행하기 위한 환경인 JRE(Java Runtime Environment)도 포함되어 있다.




JDK 설치하는 방법


http://www.oracle.com/technetwork/java/javase/downloads/index.html 에 접속하여 JDK를 선택한다.



그리고 Accept License Agreement를 선택해야한다.



자신의 컴퓨터 운영체제에 맞는 것을 다운받는다. 필자는 Windows 운영체제 이기 때문에 Windows 버전을 다운받겠다.



그리고 설치한다. 설치할땐 계속 'next' 버튼을 눌러주면 되며 이후에 환경 설정에 필요하기 때문에 파일 위치를 기억해두는게 좋다.



다음은 환경변수를 설정할 차례이다.


이때 환경 변수를 사용 하는 이유는 '컴퓨터의 어떤 경로에서라도 Java 프로그램을 접근시키게 만들기 위해서' 이다.


내 컴퓨터 -> 속성 -> 고급 시스템 설정 -> 고급 -> 환경변수




그리고 아래 순서대로 해준다.


1. 새로 만들기

2. 새 시스템 변수 이름 설정 (JAVA_HOME)

3. 디렉터리 찾아보기

4. 앞에서 기억해둔 jdk 폴더 찾고 확인




Path 선택 후 편집


새로 만들기 -> %JAVA_HOME%\bin 입력



마지막으로 확인 버튼을 누르면 jdk 환경변수 설정이 끝난다.




제대로 설정이 됬는지 확인하기 위해서 cmd 명령 프롬프트를 사용해본다.


javac 를 입력했을 때 아래와 같다면 제대로 된 것이다.



혹시나 위와 같이 되지 않는다면 jdk 경로를 다시 한번 확인하거나 path안에 저장한 JAVA_HOME을 맨 위로 올려준다.






'관계형 DBMS (RDBMS, 관계형 데이터 베이스 시스템)' 의 종류에 대해 알아보자.


'mssql vs mysql vs oracle'


 Microsoft SQL server

( mssql )

 MySQL

 Oracle

초판

 1989

 1995

 1980

특허

 상업적

오픈 소스 

상업적 

 구현 언어

C++ 

C , C++ 

C , C++ 

서버 

운영체제 

 Linux , Windows

FreeBSD , Linux, OS X
Solaris , Windows

AIX , HP-UX , Linux
OS X , Solaris , Windows
z / OS

 지원되는 

프로그래밍

언어

 C++ , Delphi , Go
Java , JavaScript (Node.js)
PHP , Python , R
Ruby , Visual Basic

 Ada , C , C#
C++ , D , Delphi
Eiffel , Erlang , Haskell
Java , JavaScript (Node.js)
Objective-C , OCaml
Perl , PHP , Python
Ruby , Scheme , Tcl

 C , C# , C++
Clojure , Cobol , Delphi
Eiffel , Erlang , Fortran
Groovy , Haskell , Java
JavaScript , Lisp
Objective C , OCaml
Perl , PHP , Python
R , Ruby , Scala
Tcl , Visual Basic

 성능

 MySQL < MSSQL < Oracle

 장점

1. 기업을 겨냥한 폐쇄 소스

2. ACID를 완벽하게 준수하는 엔진 사용

3. 트랜잭션 및 절차에 대한 높은 수준의 제어

1. 다양한 엔진 및 인터페이스와 호환 가능

2. 간단한 설계

3. 오픈소스이다.

4. 가장 보편적인 데이터베이스 도구로서 온라인 지원이 쉬움

1. 폐쇄 소스

2. 테이블 및 행 잠금을 제공

3. 테이블 스페이스, 동의어 및 패키지와 같은 명령을 사용하여 광범위하고 유연한 스토리지 사용자 정의

4. 광범위한 백업 메커니즘

5. 테이블 및 데이터베이스를 대규모로 관리하도록 설계

6. 사용자가 많아서 신뢰성이 높다.

 단점

 중소규모
ex) 중소기업

 중소규모
ex) 쇼핑몰, 중소기업

 대규모
ex) 대기업

 사용해야

 경우

1. .NET 개발환경에서 작업하는 경우

2. 대기업 / 기업 환경에 서비스를 제공

3. 애플리케이션 개발보다는 워크로드를 처리

4. 데이터베이스를 세부적으로 제어

1. 소규모 운영

2. 읽기 전용 웹 앱 또는 웹 사이트

3. 높은 수준의 복제 기능

4. 간단한 쿼리만 사용하며 동시성이 낮음

1. 트랜잭션 제어 측면에서 유연성이 필요

2. 대규모 데이터베이스 사

3. 높은 수준의 확장성

4. 데이터베이스가 플랫폼에 독립적


Microsoft access


종류 

MS access 

장점 

1. DB관리가 쉽다.

2. 엑셀과 호환이 잘된다.

3. PC 한대로 구축 가능하다.

4. 다른 포맷으로 변환이 쉽다(다른이름으로 저장 기능)

단점 

1. 윈도우에서만 사용 가능하다.

2. DB파일 크기가 최대 2g로 제한된다.

3. 복잡한 query문을 소화하지 못한다.

4. 여러명이 동시에 접속할 수 없다.



* 트랜잭션 : 데이터를 다루는 작업의 단위이다.

* ACID(원자성, 일관성, 고립성, 지속성) : 데이터베이스 트랜잭션이 안전하게 수행된다는 것을 보장하기 위한 성질을 가리키는 약어이다.

'Web development > DB' 카테고리의 다른 글

[MySQL] DB 데이터 이전 및 백업  (1) 2017.12.09



과거에는 PC로만 인터넷에 접속했기 때문에 웹 사이트 디자인을 할 때 PC의 모니터를 기준으로 했다면 요즘은 PC, 테블릿, 스마트폰 등 다양한 기기들의 출현으로 글씨가 작게 보이는 등의 문제가 발생했다. 그런 이유로 PC버전과 모바일버전의 웹사이트를 따로 제작하게 되면 비용, 시간, 인력이 모두 2배로 들기 때문에 비효율적이다. 그리고 드디어 반응형 웹이라는 기술이 등장했다.


반응형 웹이라는 것은 다양한 기기, 환경마다 최적화된 웹사이트를 제공하는 것을 말한다.





반응형 웹의 장점


1. 유지보수가 간편하다.

- 모바일 버전과 데스크톱 버전을 따로 만들 경우 새로운 내용을 추가하거나 수정할 때 개별적으로 수정하는 반면 반응형 웹에선 한번에 할 수 있다.


2. 모바일 점유율의 증가.

- 모바일로 인터넷에 접속하는 사람들을 위한 모바일화면에 최적화된 화면을 구성할 수 있다.


3. 마케팅에 유리하다.

- 각 기기들에 최적화된 화면을 제공함으로써 웹 사이트에서 보여주고자 하는 내용을 잘 전달할 수 있다.


4. 검색 엔진 최적화가 가능하다.

- 검색 엔진 최적화(SEO, Search Engine Optimize)란, 포털 사이트나 검색 사이트에서 사용자가 특정 키워드로 검색했을 때 검색 결과에서 상위권에 나타나도록 관리하는 작업을 말하는데 데스크톱 전용 웹사이트와 모바일 전용 웹사이트 등으로 사이트가 나눠지면 주소 또한 나눠지게 되고 이런 경우, 검색엔진이 검색 결과를 나타냄에 있어서 불리함을 가진다. 반면에 반응형 웹을 이용하여 웹 사이트를 만들면 하나의 주소만을 사용하게 되어 검색 결과 노출에 유리함을 가지게 된다.


5. 미래 지향적 기술이다.

- 미래에는 테블릿, 스마트폰뿐만 아니라 TV, 냉장고, 내비게이션 등 더 다양한 기기들로 웹 사이트를 접속할 수 있게 될 것이다. 그렇기 때문에 다양한 화면에 최적화가 가능한 반응형 웹 기술이 필수적이다.



반응형 웹의 단점


1. 기획력과 디자인의 어려움

- 기기, 환경마다 최적화된 구조를 설계해야 하기 때문에 제작함에 있어서 조금 더 어렵다.


2. 높은 비용

- PC만 지원하는 웹 사이트 제작보다 더 많은 비용이 발생하며 유지 보수 비용 또한 높다.




반응형 웹을 만들기 위해서는 미디어 쿼리가 필요하다. 


미디어 쿼리는 CSS3부터 지원되는 기술로 미디어 타입, 화면 크기 등을 기준으로 다른 스타일 시트를 적용시켜 주며 이를 이용하여 화면 크기가 달라질 때 스타일을 바꿀 수 있고 반응형 웹을 만들 수 있다.





웹서비스를 할 때 누구에게나 같은 모양의 페이지를 보여줘야 하기 때문에 웹폰트의 중요성은 매우 높다고 할 수 있다.


쉽게 사용하는 방법으로는 구글 폰트 https://fonts.google.com/ 를 이용하는 방법이 있는데


사이트를 보면 대부분이 영어를 위한 폰트이며 한글은 없을 것 같다.


하지만 구글에서는 여러 나라의 폰트를 지원하며 한글 폰트 역시 지원하고 있다. https://fonts.google.com/earlyaccess


현재 구글에서 지원해주는 한글 폰트 11가지를 소개하겠다.


1. Hanna (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/hanna.css);
Example : font-family: 'Hanna', sans-serif;

2. Jeju Gothic (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);
Example : font-family: 'Jeju Gothic', sans-serif;

3. Jeju Hallasan (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
Example : font-family: 'Jeju Hallasan', cursive;

4. Jeju Myeongjo (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
Example : font-family: 'Jeju Myeongjo', serif;

5. KoPub Batang (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/kopubbatang.css);
Example : font-family: 'KoPub Batang', serif;

6. Nanum Brush Script (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
Example : font-family: 'Nanum Brush Script', cursive;

7. Nanum Gothic (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
Example : font-family: 'Nanum Gothic', sans-serif;

8. Nanum Gothic Coding (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
Example : font-family: 'Nanum Gothic Coding', monospace;

9. Nanum Myeongjo (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
Example : font-family: 'Nanum Myeongjo', serif;

10. Nanum Pen Script (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
Example : font-family: 'Nanum Pen Script', cursive;

11. Noto Sans KR (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
Example : font-family: 'Noto Sans KR', sans-serif;


css 선택자를 처음 보는 사람은 이 글을 먼저 보길 바란다 → CSS 선택자(selector) 종류 정리 요약


먼저 설명했던 css 선택자는 태그와 클래스, id값을 이용하여 스타일을 적용 한 것이다.

반면에 지금부터 설명할 것은 '속성 선택자'와 '가상 클래스'이다. 

먼저 설명할 것은 속성 선택자이다. 이것은 태그 안에서 사용하는 속성들의 값을 이용하여 스타일을 적용 하는 방법이다.

같은 태그여도 속성에 따라 다양한 스타일을 적용할 수 있다는 장점이 있다.


명칭 

선택자 

설명 

[속성]형식 

[속성]{속성: 속성 값;} 

지정한 속성을 가지고 있는 요소

[속성=값]형식

[속성=값]{속성: 속성 값;} 

주어진 속성과 값이 일치하는 요소 

[속성~=값]형식

[속성~=값]{속성: 속성 값;} 

속성과 값이 일치하는 요소를 찾는데 비교값이 여러개이면 하나만 일치해도 적용 

[속성^=값]형식

[속성^=값]{속성: 속성 값;} 

지정한 문자로 시작하는 속성 값에만 적용

[속성$=값]형식 

[속성$=값]{속성: 속성 값;} 

지정한 문자로 끝나는 속성 값에만 적용

[속성|=값]형식 

[속성|=값]{속성: 속성 값;} 

속성이 지정한 값으로 시작하면 적용 

[속성*=값]형식

[속성*=값]{속성: 속성 값;} 

해당 값이 포함되있으면 적용 


(속성 선택자)



이번에는 가상 클래스에 대해 설명하겠다. 가상 클래스는 웹 문서 소스에는 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정하여 사용하는 것이다. 예를 들면 이미지 위에 마우스를 올려뒀다던가 하는 여러 상황에 쓰인다.


명칭 

선택자 

설명 

:link 선택자

a:link{속성: 속성 값;} 

문서 안의 하이퍼 링크 중 아직 방문하지 않은 링크에 적용 

:visited 선택자

a:visited{속성: 속성 값;}  

한번 이상 방문한 사이트에 적용. 기본 색상은 자주색(puple) 

:active 선택자 

a:active{속성: 속성 값;}  

해당 요소가 활성화되었을 때 적용 ex)클릭한 상태 

:hover 선택자 

a:hover{속성: 속성 값;}  

해당 요소 위에 마우스 포인터를 올려놓았을 때 적용(롤오버) 

:focus 선택자 

a:focus{속성: 속성 값;}  

해당 요소에 초점이 맞춰졌을 때 적용 ex)텍스트 필드 안에 초점이 맞춰질때 

:nth-child(n) 선택자

태그:nth-child(n) 

n번째 자식 요소에 스타일을 적용한다. n에는 숫자를 넣어도 되지만 odd,even 또는 2n+1, 2n 등 수식을 사용 할 수 있다. 

:nth-last-child(n) 선택자

태그:nth-last-child(n) 

:nth-of-type(n)

태그:nth-of-type(n) 

같은 태그가 여러개 나열 되있을때 n번째 항목인지를 지정하여 적용한다. 

:nth-last-of-type(n)

태그:nth-last-of-type(n) 

 :first-child

태그:first-child 

첫 번째 자식 요소에 적용할 스타일이다.

:last-child 

태그:last-child 

마지막 자식 요소에 적용할 스타일이다.

:first-of-type

태그:first-of-type 

형제 관계에 있는 요소 중 첫 번째 요소에 적용한다. 

:last-of-type

태그:last-of-type 

형제 관계에 있는 요소 중 마지막 요소에 적용한다.

only-child

태그:only-child 

부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일 적용한다. 

only-of-child

태그:only-of-child 

해당 요소가 유일한 요소일 때 스타일을 적용한다.

:checked

태그:checked 

라디오 버튼이나 체크박스가 체크 되었을 때 적용할 스타일 지정한다. 

::before 

태그::before{content : " ";} 

특정 요소의 내용 앞이나 뒤에 지정한 내용을 만들 수 있다. 이때 content 를 꼭 넣어줘야 실행되며 :: 는 css3 : 는 css2이다. 

::.after

태그::after(content : " ";} 

::selection 선택자

::selection{속성:속성 값;} 

드래그되어 선택되는 영역의 스타일을 지정한다. 

:not 선택자

:not(태그){속성:속성 값;} 

not 안에 포함된 태그를 제외한 모든 부분에 스타일 적용 


(가상 클래스)

'Web development > HTML & CSS' 카테고리의 다른 글

반응형 웹 디자인이란?  (0) 2017.11.11
11가지 한글 구글 폰트  (0) 2017.09.30
CSS 선택자(selector) 종류 정리 요약  (0) 2017.07.26
CSS 정의 및 특징  (0) 2017.07.22
HTML5 태그 미지원 브라우저  (0) 2017.07.19


[ 스타일의 상속 관계 ]


웹 문서에서 사용하는 태그들은 상속의 개념이 적용된다. 그래서 부모 요소와 자식 요소가 존재한다.

예를 들어 <ul><li>목록1</li><li>목록2</li></ul> 형태가 있을 때 ul은 li의 부모 요소이고 li는 ul의 자식요소이다.

그리고 부모 요소에 있는 속성들이 자식 요소로 이어지는데 이것이 바로 '상속'이다.


상속의 예로는 body에 배경색을 넣으면 자식 요소인 <h2>와 <p> 등에도 같은 배경색이 적용된다.


그리고 스타일은 단계적으로 적용되기 때문에


p{color:red;}

p{color:blue;}


처럼 같은 태그에 다른 스타일이 적용되면 마지막으로 정의된 스타일을 적용한다. 위 소스에서는 글자색에 'blue' 가 적용된다.


선택자는 여러가지가 있다. 선택자(selector)란, 속성이 어디에 적용되는지 표시하는 것이다.


 명칭

 선택자

 설명

 전체 선택자

 * {속성:속성 값;}

 페이지에 있는 모든 요소를 대상으로 스타일을 적용한다. 

 태그 선택자

 태그 {속성:속성 값;}

 특정 태그에 스타일을 적용한다.

 클래스 선택자

 .클래스이름 {속성:속성 값;} 

 특정 클래스에 스타일을 적용한다.

 id선택자 

 #id이름 {속성:속성 값;}

 특정 id에 스타일을 적용한다.

 하위 선택자 

 상위요소 하위요소 {속성:속성 값;} 

 모든 하위 요소에 스타일을 적용한다. 

 자식 선택자

 부모요소 > 자식요소 {속성:속성 값;} 

 자식 요소에만 스타일을 적용한다. 

 인접 형제 선택자 

 요소1 + 요소2 {속성:속성 값;} 

 첫 번째 동생 요소에 스타일을 적용한다. 

 형제 선택자  

 요소1 ~ 요소2 {속성:속성 값;} 

 형제 요소에 스타일을 적용한다. 

 그룹 선택자 

 요소1,요소2 {속성:속성 값;} 

 여러 요소들에 한번에 묶어서 스타일을 적용한다. 

[ 선택자(selector) ]



 하위 선택자 

  자식 선택자  

 인접 형제 선택자

 형제 선택자 

 section ul {속성:속성 값;} 

 section > ul {속성:속성 값;}

 h1 + p {속성:속성 값;}

 h1 ~ p {속성:속성 값;}

<body>

<section>

<p></p>

<ul>

<li>

<ul></ul>

</li>

<li>

<ul></ul>

</li>

</ul>

</section>

</body>

<body>

<section>

<p></p>

<ul>

<li>

<ul></ul>

</li>

<li>

<ul></ul>

</li>

</ul>

</section>

</body>

<body>

<section>

<h1></h1>

<p></p>

<p></p>

<p></p>

</section>

</body>

<body>

<section>

<h1></h1>

<p></p>

<p></p>

<p></p>

</section>

</body>

[ 헷갈리기 쉬운 선택자들 ]





위 사진의 왼쪽은 HTML 만으로 구성된 모습이며 오른쪽은 CSS를 이용하여 디자인을 한 모습이다.


CSS Cascading Style Sheet 의 줄임말이다.


html을 이용해서 텍스트와 이미지, 표 등을 웹 문서에 넣는 것을 물고기에 비유하자면 ''에 해당한다.


그럼 CSS 는 무엇일까? CSS는 텍스트에 크기와 색상을 주고 이미지의 크기와 위치, 표의 색상, 배치 등 웹 문서에 디자인을 추가한다.


비유하자면 물고기의 ''에 해당한다.


CSS가 없다면 웹 문서는 매우 투박하고 볼품없어질 것이다.

  • 목록1
  • 목록2
  • 목록3
위의 목록은 <ul> 태그와 <li>  태그를 이용해서 만든 것이다. 이것에 css 효과를 주면

  • 목록1
  • 목록2
  • 목록3


이렇게 만들 수 있다. 세로로 나열되있던 목록을 가로로 만들고 글자에 색을 입히고 크기를 키웠으며 배경색을 주는 등 웹 문서에 여러가지 효과를 줄 수 있다. 웹 페이지의 디자인은 css로 하는 것이다. 그리도 모바일, 태블릿 등 웹 문서에 접근 가능한 다양한 기기들이 나온 지금 css의 중요성은 더욱 커져가고 있다. 사실 html을 이용해도 간단한 디자인 효과를 주는 것도 가능하긴하다.



HTML


위의 글자는 html로 글자색을 준 것이며 소스는 <font color="red">HTML</font> 이다.


이것을 css 로 한다면


CSS


이며 소스는 아래와 같다.


<style>

.cssfont{color:red;}

</style>


<p class="cssfont">CSS</p>


이렇게만 보면 html로 효과 주는 것이 더 짧은데 왜 css를 사용하냐는 의문이 생길 수 있다. 하지만 같은 효과를 여러곳에 줄때 html은 하나하나 지정해줘야하지만 css는 한번에 지정해 줄 수 있는 등 소스가 길어질 수록 css의 중요성은 커진다.


다시 말하면 웹 문서에서 내용과 디자인을 html 과 css 로 분리 할 수 있다. 이것은 웹 표준에 필요한 것이기도 하며 사이트의 수정에 도움을 줄 수 있다.


html은 그대로 두고 css만 바꿔 주면 전혀 다른 디자인을 만들 수 있다. 인쇄용 문서, 모바일용 페이지, 태블릿용 페이지, TV용 페이지 등 CSS만 바꾸면 여러 매체에 사용할 수 있게 된다.


CSS는 <style>태그 사이에 넣는다. 보통 <style>태그는 <head>태그 사이에 넣는다.


html문서 안에 css를 넣는것을 간단하게 표현하면 이렇다. (내부 스타일시트)


<html>

<head>

<style></style>

</head>

<body>

</body>

</html>


또는 css를 넣는 다른 방법도 있다(외부 스타일 시트)


<html>

<head>

<link href="외부 css 파일 경로" rel="stylesheet" type="text/css">

</head>

<body>

</body>

</html>


그리고 html과 다른점이 있다면 html에서는 주석을 넣을 때 <!-- 주석 --> 이랫다면 

css에서는 /* 주석 */ 를 사용한다.


css를 사용하면 한번에 문서에 디자인을 바꿀 수 있다.


p{

color:red;

}


위 소스를 사용하면 <p> 태그안의 모든 글자 색상은 red가 된다. 여기서 p 부분을 선택자(select)라고 한다.


선택자에 { 와 } 사이에 들어간 속성들을 주는 것이다. 


간단하게 css에 대해 알아봤다. css는 웹 문서에 없어서는 안되는 필수 요소이다. html을 배운다면 css도 꼭 알아두도록 하자.



현재 HTML5 까지 나왔지만 오래된 브라우저들은 지원하지 않는 경우가 있습니다.


그렇기 때문에 HTML5 로 만들어진 사이트를 옛날 브라우저로 접속할 경우 제작자의 의도와 맞지 않게 사이트가 구성될 수 있기 때문에 HTML5 태그 지원 여부를 확인하고 지원하지 않는 경우 추가적인 설정이 필요합니다.


IE 

Edge 

Firefox 

Chrome 

Safari 

Opera 

IOS Safari 

Opera Mini

Android Browseer 

Chrome for Android 

 

 

52 

49 

 


9.3 

 

4.4 

 

 

14 

53 

58 

 

45 

10.2 

 

4.4.4 

 

11 

15 

54 

59 

10.1 

46 

10.3 

all 

56 

59 

 

16 

55 

60 

11 

47 

11 

 

 

 

 


56 

61 

TP 

48 

 

 

 

 

 

 

57 

62 

 

 

 

 

 

 


(html5를 지원 현황)


브라우저는 자신이 인식하지 못하는 태그를 인라인 태그로 취급하기 때문에 html5 태그인 header, section, nav, article, footer 을 쓰기 위해서는


강제로 블록 레벨 태그로 설정해야합니다.


header, section, nav, article, footer{ display:block; } <!-- 태그들을 블록 레벨 태그로 만든다. -->


그리고 IE 8 이하 버전에서는 시맨틱 태그를 지원 하지 않기 때문에 자바스크립트를 이용해야한다.


<script>

document.createElement('article');

document.createElement('section');

document.createElement('aside');

document.createElement('nav');

document.createElement('header');

document.createElement('footer');

</script>


위 태그는 <head>와 </head> 사이에 넣는다.


또는 자바스크립트 파일을 이용 할 수 있는데


https://github.com/aFarkas/html5shiv 페이지 접속 후에 src 폴더를 클릭하고 html5shiv.js 파일을 저장하여 사용할 수 있다.


<!-- [if it IE 9]>

<script src="/html5shiv.js"><script>

<![endif] -->


위 태그는 head 또는 script 또는 body 에 삽입한다.


<img> 태그에 있는 usemap 속성을 이용하면 하나의 사진에 구역을 나눠 서로 다른 사이트로 향하는 링크를 만들 수 있습니다.


ex)


<img src="사진.png" alt="" usemap="#네임이름">


<map name="네임이름">

<area shape="rect" coords="시작x좌표,시작y좌표,끝x좌표.끝y좌표" href="주소">

<map name="네임이름">

<area shape="rect" coords="시작x좌표,시작y좌표,끝x좌표.끝y좌표" href="주소">


</map>


실제로 해보겠습니다.


(유즈맵 적용 전 사진)





(유즈맵 적용 후 사진)


이미지맵을 적용하기 전 사진에서는 마우스를 사진에 올렸을 때 마우스 포인터에 아무런 변화가 없지만

이미지맵을 적용한 후 사진에는 사진박스, 네이버박스, 다음박스에 마우스를 올렸을 때 포인터가 변하는걸 볼 수 있으며

클릭시 해당 사이트로 이동하는 것을 볼 수 있다.


적용 소스

<img src="https://t1.daumcdn.net/cfile/tistory/2451BA4C596D6FFE1B" alt="" usemap="#named">

<map name="named">

<area shape="rect" coords="22,19,225,209" href="http://wishml.tistory.com/1">

<area shape="rect" coords="255,80,435,135" href="http://wishml.tistory.com/2">

<area shape="rect" coords="255,160,435,208" href="http://wishml.tistory.com/4">

</map>

'Web development > HTML & CSS' 카테고리의 다른 글

CSS 정의 및 특징  (0) 2017.07.22
HTML5 태그 미지원 브라우저  (0) 2017.07.19
CSS 초기화 파일(초기화 코드)  (0) 2017.07.15
HTML 기본 구조(기본 틀, 초기설정, 세팅)  (0) 2017.07.15
UTF-8 과 EUC-kr  (0) 2017.07.14

@charset utf-8;


/* css 초기화 */

html, body, div, span, applet, object, iframe, 

h1, h2, h3, h4, h5, h6, p, blockquote, pre, 

a, abbr, acronym, address, big, cite, code, 

del, dfn, em, img, ins, kbd, q, s, samp, 

small, strike, strong, sub, sup, tt, var, 

b, u, i, center, 

dl, dt, dd, ol, ul, li, 

fieldset, form, label, legend, 

table, caption, tbody, tfoot, thead, tr, th, td, 

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary, 

time, mark, audio, video { 

margin: 0; 

padding: 0; 

border: 0; 

font-size: 100%; 

font: inherit; 

vertical-align: baseline; 

/* HTML5 display-role reset for older browsers */ 

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section { 

display: block; 

body { 

line-height: 1; 

ol, ul { 

list-style: none; 

blockquote, q { 

quotes: none; 

blockquote:before, blockquote:after, 

q:before, q:after { 

content: ''; 

content: none; 

table { 

border-collapse: collapse; 

border-spacing: 0; 

}

'Web development > HTML & CSS' 카테고리의 다른 글

HTML5 태그 미지원 브라우저  (0) 2017.07.19
HTML 이미지 맵 만들기(usemap)  (0) 2017.07.18
HTML 기본 구조(기본 틀, 초기설정, 세팅)  (0) 2017.07.15
UTF-8 과 EUC-kr  (0) 2017.07.14
HTML 태그 요약  (0) 2017.07.14

+ Recent posts