9. 그래픽 fin ~ 유지보수-link와 import

룰루루 2021. 4. 13. 15:19

2021. 4. 13. 15:19

그래픽

5) SVG

: 직접적인 그래픽과 상관은 없지만, SVG파일도 CSS에서 효과를 주는 대상이기 때문에 있는 챕터.

1. SVG파일이란?

Vector file로, 기존의 bitmap 이미지와 비교할 때 차이가 있다.

bitmap : 작은 점으로 이미지를 표현. 확대하면 계단 효과 등 깨짐 발생 -> png

vector : 이미지를 선과 점의 연결로 표현. 확대해도 깨짐 발생 X -> svg

2. SVG / PNG 파일 다운받아서 CSS에 불러 오기

1. SVG / PNG 이미지 다운받기:

thenounproject.com/ 여기서 이미지 아이콘 무료 다운로드 가능!

2. <img> 태그를 사용해서 나타낸다. 확장자만 다르다.

<img src="파일이름.svg" alt="">

<!doctype HTML>
<html>
<head>
   <meta charset="utf-8">
    <style>
        img{
            width:200px ; margin : 20px ;
        }
    </style>
</head>
<body>
    <h1>SVG:Vector</h1>
    <img src="people1.svg" alt="five of us">
    <h1>PNG:Bitmap</h1>
    <img src="people2.png" alt="five of us">
</body>
</html>

전혀 차이 없는 두 개의 이미지가 만들어지지만, 확대를 한다면 PNG 파일만 깨짐이 발생한다.

+ SVG / PNG 파일의 장점

: background에서 color과 image가 충돌하지 않는다.

<!doctype HTML>
<html>
<head>
    <style>
        body{
            background-image : url('people1.svg') ;
            height : 300px ;
            background-size : contain ; 
            background-color : lightgreen ;
            background-repeat : repeat ;
            }
    </style>
</head>
<body>
</body>
</html>

3. SVG 이미지 직접 만들기

1. 기존 SVG 파일을 bracket 등 html editor에 나타내보면 <svg> 태그가 있는데, 이를 그대로 복사한다.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 64 80" enable-background="new 0 0 64 64" xml:space="preserve">
	</svg>

해당 코드에는 복잡한 요소가 많은데, 다 지우고 width와 height 속성만으로도 svg 이미지를 나타낼 수 있다.

<svg width="210" height="210">
    <rect x="5" y="5" width="200" height="200" style="stroke:red ; fill:blue ; stroke-width:10px"></rect>
    </svg>

각 svg 태그 안 코드의 의미:

<svg width="210" height="210"> </svg>	: svg 이미지의 너비=210, 높이=210 (여기서는 이미지의 '총 영역'을 의미. 사각형의 너비/높이와 무관.)
<rect> </rect>	: rectangular. 직사각형을 만드는 태그.
x="5" y="5"	: 직사각형의 시작점을 의미. 좌상단 위치의 점이 (0,0) 이라면, 이 위치에서 오른쪽으로 5칸, 아래로 5칸 떨어진 점에서 시작한다는 의미.
width="200" height="200"	: 사각형의 너비=200, 높이=200 이라는 의미. '사각형 실제'의 너비/높이 의미.
style="stroke : red ; fill : blue ; stroke-width : 10px"	: stroke는 테두리나 영역, fill은 채운다는 의미, stroke-width는 테두리의 두께.

+ 유용한 사이트 소개

1) SVG를 심화학습하고 싶다면?

tutorials.jenkov.com/svg/index.html

SVG Tutorial

This tutorial series goes through the majority of SVG's (Scalable Vector Graphics) features.

tutorials.jenkov.com

2) SVG를 배워서 어디다 쓰는지 알고 싶다면?

codepen.io/search/pens? 여기에서 'SVG' 검색하기

CodePen Search

codepen.io

오랜 Project : Bracket 에서 디렉토리 외부의 이미지파일을 img태그로 불러오는 방법

모션그래픽

: CSS 코드로 그래픽/애니메이션 작업을 하는 방법

(물론 전문적 작업을 위해서 포토샵 등 다양한 tool을 쓰는 것도 좋음)

* transform 속성은 이 속성이 적용되는 element의 display 상태가 block 또는 inline-block 일 때만 적용된다.

transition

1) transition 이란?

: 효과를 부드럽게 적용할 수 있는 속성.

이 속성만 적용해도 간단한 변환 효과를 애니메이션처럼 보이게 할 수 있다.

ex) 어떤 효과를 1초간 적용 -> 해당 효과가 연속상으로 이어지는 것 처럼 보임

<!doctype HTML>
<html>
<head>
    <style>
        a{
            font-size:3rem ; 
            display:inline-block ; 
            transition:property : all ; 
            transition-duration : 1s ;
        }
        a:hover{
            transform:translate(20px, 20px) ;
            font-size : 2rem
            color : lightgreen ;
        }
    </style>
</head>
<body>
    <a href="#">Click</a>
</body>
</html>

+ <a href="#"> : 해당 a 링크/태그를 클릭해도 어떤 웹사이트로 이동하지 않게 함.

2) transition 세부사항

developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions 여기에 자세한 설명있음!

1. transition-property

: 어떤 element, 요소에 transition 효과를 적용할지

2. transition-duration

: transition 효과를 얼마(초/분)동안 지정할지

3. transition-delay

: transition 효과를 얼마(초/분) 후 부터 나타나게 할지

4. transition-timing-function

: www.w3schools.com/cssref/css3_pr_transition-timing-function.asp 에 세부설명 있음.

ex) ease-in : 초반에 느린 transition 효과 적용 / ease-out : 후반에 느린 transition 효과 적용

step(n, start/end) : transition 효과를 초반/후반에 n단계로 적용

5. transition : 위 모든 속성들을 한 번에 나타내기

적용할 element {

property(적용대상) duration(적용시간) delay(지연시간) timing-function(함수효과적용)

}

**transition 효과를 사용해서 작은 효과를 구현해 봄.

<!doctype HTML>
<html>
<head>
    <style>
        .rainbow{
            margin : 10px ; width : 100% ; justify-content : center ; height : 100px ; font-size : 2rem ; font-weight : bold ;
            align-items : stretch ;
            display : flex ;
            transition : all 2s ;
            
        }
        #one:hover{height : 50px ; background-color : red ; font-size : 3rem }
        #two:hover{height : 100px ; background-color : orange ; font-size : 3rem}
        #three:hover{height : 150px ; background-color : yellow ; font-size : 3rem }
        #four:hover{height : 200px ; background-color : lawngreen ; font-size : 3rem }
        #five:hover{height : 250px ; background-color : lightcyan ; font-size : 3rem }
        #six:hover{height : 300px ; background-color : deepskyblue ; font-size : 3rem }
        #seven:hover{height : 350px ; background-color : mediumpurple ; font-size : 3rem }
    </style>
</head>
<body>
    <div class="rainbow">
        <div id="one" class="rainbow">Red</div>
        <div id="two" class="rainbow">Orange</div>
        <div id="three" class="rainbow">Yellow</div>
        <div id="four" class="rainbow">Green</div>
        <div id="five" class="rainbow">Skyblue</div>
        <div id="six" class="rainbow">Navy</div>
        <div id="seven" class="rainbow">Purple</div>
    </div>
</body>
</html>

유지보수

1. link & import

좋은 코드를 만드는 방법 중 하나 : 중복을 제거하는 것!

중복을 제거하면서 코드를 효율적으로 수정할 수 있는 방법이 link 와 import 이다.

사용하는 방법

여러 개의 웹페이지의 디자인/스타일에서 겹치는 코드만 복사해서 새 페이지에 복사한다.

후에 이 디자인 서식을 사용한다면 이 새 페이지에서 끌어와서 사용할 것이다.

* 이때, 디자인서식이 들어있는 새 페이지의 확장자는 .css 이다!

/*  스타일 적용하는 파일  */
h1{
    background-color : black ; color : limegreen ;
    transition : all 1s ;
}
h1:hover{
    background-color : white ; color : orangered ; text-align : right ;
}

<!-- 1페이지 -->
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="index1.css">    
</head>
<body>
    <h1>page1</h1>
</body>
</html>

<!-- 2페이지 -->
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="index1.css">
</head>
<body>
    <h1>page2</h1>
</body>
</html>

2가지의 방법

어떤 양식으로 코드를 끌어오는지에 따라서, 방법이 두 가지로 나뉜다: (결과는 같다)

2-1) link

: HTML 태그를 사용할 때. <head> 태그 안에 사용한다.

<head>
    <link rel="stylesheet" href="index1.css">    
</head>

2-2) import

: style 태그 안에 사용할 때. css 형식을 따를 때. <head> 태그 안 <style> 태그 안에 사용한다.

    <style>
        @import url('index1.css')
    </style>

'front-side > CSS' 카테고리의 다른 글

Semantic UI : 소개 ~ js가 필요한 컴포넌트의 사용법 (0)	2021.05.31
10. 코드 경량화(minify) ~ CSS 뛰어넘기(preprocessor) (0)	2021.05.18
8. 그래픽 (0)	2021.04.12
7. 레이아웃 (0)	2021.04.07
6. 레이아웃 추가(심화)내용 (0)	2021.04.05

아스