Eunice

SVG그래픽생성법

1.어도비 일러스트 툴을 이용해 오브젝트 생성
2. 다른이름으로 저장- 확장자 형식을 svg로 선택후 저장.
3. svg options 에서 svg 버전을 1.1로 선택. fonts type는 convert to outline으로 선택. svg code 버튼 클릭.
4.<svg version 부터 </svg>까지 복사 후 html <body> 안에 붙여넣기.

<!--

이미지는 원본사이즈보다 크기를 키우면 깨진다. 하지만 벡터 이미지는 크기를 키워도 잘 깨지지 않는다.

-->

<!DOCTYPE html>

<head>

<title>SVG-Scalable Vector Graphics</title>

<style>

*{ margin: 0; padding: 0; }

.wrap { width: 100%; height: 100vh; overflow: hidden; }

.wrap svg { width: 100%; height: 100%; margin-top: -40px;}

</style>

</head>

<body>

y="0px" width="1920px" height="1080px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">

</linearGradient>

<path id="center" fill="url(#center_1_)" d="M251.767,1003.599c39.061,18.786,50.39,40.22,92.685,16.285

c107.486-60.822,235.694-73.624,353.279-35.417c33.523,10.892,64.262,36.068,96.762,45.703

c28.568,8.471,65.192-24.287,95.294-36.184c69.472-27.459,144.89-37.07,218.975-27.842c37.052,4.616,73.414,13.597,108.173,27.375

c26.869,10.652,68.461,44.229,92.559,38.563c32.084-7.544,65.431-35.98,98.324-46.884c34.966-11.589,71.403-18.934,108.157-21.507

c74.386-5.208,150.283,8.158,217.978,39.62c15.993,7.431,31.342,19.844,47.753,25.747c21.054,7.574,22.872,1.139,43.708-10.545

c29.584-16.587,61.845-29.685,94.586-38.916c0-175.404,0-518.117,0-579c0-82.496-209.947-212.989-554.93-212.989

S936.092,0,936.092,0H0l0.124,965.028C85.958,954.062,178.311,968.268,251.767,1003.599z"/>

</linearGradient>

<path id="right" fill="url(#right_1_)" d="M1920,741.462c-66,0-147-46.766-180-103.923l-52.039-90.133

c-33-57.158-33-150.688,0-207.846L1740,249.428c33-57.158,114-103.923,180-103.923"/>

</linearGradient>

</svg>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<style>

svg { width: 800px; height: 500px; background: lightblue; }

.circleBox { fill: rgb(230, 200, 255); stroke: rgb(255, 255, 255); stroke-width: 5; }

.rectBox {width: 200px; height: 150px; fill:rgb(255, 245, 152); }

.top { stroke-width: 100; stroke: rgba(255, 230, 210, 0.6);

stroke-dasharray: 10 10;

transition: all 0.5s ease-in;}

/*transition 커튼효과: 요소가 움직일 때 중간단계의 모습을 만들어준다*/

/*all: 모든 속성에 transition 적용. 0.5s: 진행시간(duration) 5초. ease-in: 베지어 곡선(가속도)*/

svg:hover .top { transform:translateX(500px);}

/*transform:translateX (요소를 X축으로 이동)*/

</style>

</head>

<body>

</svg>

</body>

</html>

'Coding' 카테고리의 다른 글

CSS 선수학습(2) (0)	2021.07.12
html 선수학습(7) (0)	2021.07.09
html 선수학습(5) (0)	2021.07.07
html 선수학습(4) (0)	2021.07.06
html 선수학습(3) (0)	2021.07.05

----------------멀티미디어태그.html

<!--

모든 웹 브라우저에서 동영상 파일을 재생하려면 h.264방식의 mp4 형식 파일을 사용해야한다.

※h.264방식의 mp4형식 파일은 다음 팟 인코더로 쉽게 생성할 수 있다.

비디오 태그의 옵션

src(비디오 파일의 경로 지정), poster(비디오 파일을 불러오기 전 표시할 이미지의 경로 지정

src="비디오 파일 경로", poster="이미지 파일 경로"

preload(비디오를 재생하기 전에 데이터를 모두

불러올지 여부 지정), autoplay(비디오의 자동 재생 여부를 지정), loop(비디오의 반복 재생 여부를 지정), controls(비디오 재생 도구의 표현여부를 지정), muted(음소거 여부를 지정)

-->

<!DOCTYPE html>

<head>

<title>멀티미디어 태그</title>

</head>

<body>

</video>

</body>

</html>

----------------------------------------------canvas를 이용한 선 그리기 html파일

<!--

함수를 호출(함수의 기능을 사용)하는 문법: 함수명( )

매서드를 호출하는 문법: Obj.매서드명( )

-->

<!DOCTYPE html>

<head>

<style>

#canvasbox { background: coral; border: 5px solid cornflowerblue; }

#imgbox { width: 600px; height: 400px; background: #ccc; }

</style>

</head>

<!--박스의 이름은 class 속성과 id 속성을 사용하여 붙인다.

id 속성은 자바스크립트 또는 제이쿼리에 관련된 박스의 이름을 붙일 때 사용하며, 이름의 중복을 허용하지 않는다.-->

</body>

</html>

----------------------------------------------canvas를 이용한 선 그리기 js파일

// JavaScript Document

//함수 정의 문법: function 함수명( ) { 명령어; }

// init 함수를 정의

function init( ) {

// document(HTML문서)에서 get(얻는다) Element(요소: 시작태그+웹콘텐츠+끝태그) ById(id 속성으로)

// 변수(variable) 선언은 메모리상에 데이터를 저장할 공간을 만들고 이름을 지정하는 것이다.

var canvas = document.getElementById("can");

var canbox = document.getElementById("canvasbox");

var imgbox = document.getElementById("imgbox");

//아이디명이 can인 요소를 선택하여 변수 canvas에 저장한다. canvas 변수에 저장된 값을 사용할 때는 변수명으로 사용한다.

var ctx = canvas.getContext("2d");

var ctbox = canbox.getContext("2d");

var ibox = imgbox.getContext("2d");

//그래픽을 그리는 요소를 지정: 2d는 2차원, wedg1 은 3차원

// draw(ctx); 요소를 2차원으로 그린다.

var centerX = canbox.width / 1.5;

var centerY = canbox.height / 2;

var radius = 150;

ctx.beginPath( ); //시작 좌표를 설정

ctbox.beginPath( );

ctx.moveTo(0, 0); //x축과 y축 좌표:0으로 부터

ctx.lineTo(250, 150); //x축 좌표:250, y축 좌표:150 까지

ctx.moveTo(250, 150);

ctx.lineTo(500, 0);

ctx.lineWidth = 10; //선의 두께를 10px로 설정.

ctx.strokeStyle = "pink"; //선의 색상 설정.

ctx.stroke( ); //선을 긋는다.

//Math.PI(Math 클래스의 PI상수값은 3.14(파이)값이다.)

ctbox.arc(centerX, centerY, radius, 0, 2 * Math.PI, false );

//x축좌표,y축좌표,원의 지름,시작 파이값, 끝 파이값, 모드

ctbox.fillStyle="#36f";

ctbox.strokeStyle="pink";

ctbox.lineWidth=10;

ctbox.fill( );

ctbox.stroke( );

ctbox.beginPath( );

ctbox.rect(50, 50, 50, 400);

ctbox.rect(150, 200, 200, 100);

//직사각형 x축좌표, y축좌표, 사각형의 너비값, 사각형의 높이값

ctbox.fillStyle="pink"

ctbox.fill( );

var imgObj = new Image( ); //이미지 객체를 생성해서 imgObj변수에 저장한다.

imgObj.src="./imgs/shiba.jpg";

//함수명이 없는 함수를 익명함수라고 한다. 익명함수는 무조건 실행한다.

imgObj.onload = function ( ) {

ibox.drawImage(imgObj, 20, 20);

};

var canvas = document.getElementById("can");

var ctx = canvas.getContext("2d");

ctx.beginPath( );

ctx.moveTo(0, 0);

ctx.lineTo(0,300);

ctx.moveTo(0, 300);

ctx.lineTo(500, 300);

ctx.moveTo(500, 300);

ctx.lineTo(500, 0);

ctx.moveTo(500, 0);

ctx.lineTo(0, 0);

ctx.lineWidth = 20;

ctx.strokeStyle = "pink"

ctx.stroke( );

}

//변수:이름으로 값을 사용

//메서드:이름으로 기능(명령어의 묶음)을 사용 arc( ); 매개변수

//class Arc{}

'Coding' 카테고리의 다른 글

html 선수학습(7) (0)	2021.07.09
html 선수학습(6) (0)	2021.07.08
html 선수학습(4) (0)	2021.07.06
html 선수학습(3) (0)	2021.07.05
html 선수학습(2) (0)	2021.07.01

<!--

목록/항목 태그는 리스트와 메뉴를 저장할 때 사용한다.

목록 태그에는 ul(블릿 목록)과 ol(순서 번호 목록)이 있고 항목 태그는 li 이다.

-->

<!DOCTYPE html>

<html>

<head>

<style>

.apple { margin-left: 500px;}

.bn {margin-left : 500px;}

.box {margin-left: 500px;}]

</style>

</head>

<body>

<ul>

</ul>

</ol>

</body>

</html>

<!--

HTML4에서는 테이블 태그로 웹 사이트의 레이아웃을 배치했지만, HTML5에서는 테이블 태그를 UI 요소로 사용한다.

데이터베이스(MySQL, Oracle, MS-SQL)에서 데이터를 가져와 웹 브라우저에 표시할 때 테이블 태그를 사용한다.

table 태그: 전체를 감싼다. (테이블의 범위를 표시한다)

thead 태그: 테이블의 머리를 표시한다.

tbody 태그: 테이블의 본문을 표시한다.

tr 태그: 테이블의 행을 표시한다.

th 태그와 td 태그: 테이블의 열을 표시한다.

ul과 table 태그의 둘다 레이아웃 태그지만 table태그는 창크기 변화시 프레임 변화가 없음. 표를 만들 때 table태그사용.

-->

<!DOCTYPE html>

<html>

<head>

<style>

*{margin: 0; padding: 0;}

ul{margin-top: 50px;}

ul li {list-style:none; float:left; border: 1px solid #e2e2e2; }

table{border-collapse: collapse;}

td {border: 1px solid #e2e2e2; }

</style>

</head>

<body>

<table>

</tr>

</tr>

</table>

<ul>

</ul>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<td>안녕하세요</td>

</tr>

<td>반갑습니다</td>

</tr>

</tbody>

</table>

</body>

</html>

<!--

※ 박스(태그)의 유형은 블록형과 인라인-블록형, 인라인형으로 나뉜다.

ⓐ블록형 박스: 대부분의 태그는 블록형 박스이다. 박스의 너비값이 100%이며, 줄바꿈을 한다. 레이아웃에 관련된 스타일시트(width, height, margin, padding 등)가 잘 적용된다.

ⓑ인라인-블록형 박스:<img>가 해당된다. 박스의 너비값이 콘텐츠의 너비값과 동일하다. 박스의 배치가 좌에서 우로 배치(박스와 박스 사이에 여백이 발생)된다. 레이아웃에 관련된 스타일시트가 적용된다.

ⓒ인라인형 박스: <strong>, <em>, <mark>, <sup>, <sub>, <address>, <a>, <span> 등은 너비값이 웹 콘텐츠의 너비값과 동일하며, 박스의 배치는 좌에서 우로 배치된다. 레이아웃 관련 스타일시트가 잘 적용되지 않는다.

단 display 속성을 이용하여 박스유형을 바꿀 수 있다.

대부분의 <a>태그는 display: block 속성을 이용해 박스유형을 바꾼다. <span>은 박스유형을 거의 바꾸지않음.

-->

<!DOCTYPE html>

<head>

<style>

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;700&display=swap');

div { height: 100px; background: #fc0;}

span { height: 100px; background: #f00;}

p { font-family: 'Noto Sans KR', sans-serif; font-size:42px; font-weight: 100;}

.h { display:inline; font-weight: 700; background: #fff;}

article {width: 300px; height: 450px; background: #fffcce;}

article h3 { font-size: 30px; color: rgb(158, 77, 29); text-align: center; padding-top: 20px;}

.shiba {background: burlywood;}

article div { width: 90%; height:300px; margin: 0 auto; background: none;}

article div img { width: 100%;}

article div p { font-size: 16px;}

article div p span { color: rgb(126, 61, 35); }

article a {display:block; width:50%; margin:0 auto;padding: 10px; color: white; text-align: center; background: brown;}

</style>

</head>

<body>

<!--

공간 분할 태그: div(블락형), span(인라인형)

과거에는 웹페이지의 공간을 분할하지 않았지만, HTML5에서는 레이아웃을 배치할 때 테이블 태그를 사용하지 못하도록 지침했기 때문에 레이아웃을 구성할 때 다른 방법이 필요했다. 공간을 분할해야 레이아웃을 구성할 수 있기 때문에 웹페이지는 공간 분할 태그를 사용하여 웹페이지를 나눈다.

인라인형 박스는 블록형 박스로 감싸야 한다

.-->

<p>Project <span class="h">HTML5</span></p>

<div>

</div>

</article>

</body>

</html>

'Coding' 카테고리의 다른 글

html 선수학습(6) (0)	2021.07.08
html 선수학습(5) (0)	2021.07.07
html 선수학습(3) (0)	2021.07.05
html 선수학습(2) (0)	2021.07.01
CSS 선수학습 (0)	2021.06.30

Eunice

html 선수학습(6)

'Coding' 카테고리의 다른 글

html 선수학습(5)

'Coding' 카테고리의 다른 글

html 선수학습(4)

'Coding' 카테고리의 다른 글

+ Recent posts

티스토리툴바