CSS

CSS Advanced: border 속성, google font, fontawesome 사용법

carrot62 2020. 7. 24. 15:31

Rounded Corners

  • border-radius
    • 4가지 값을 가질 수 있다
      1. top-left-radius
      2. top-right-radius
      3. bottom-right-radius
      4. bottom-left-radius
<!DOCTYPE html>
<html>
<head>
<style> 
	p.blues{
    	background-color: skyblue;
        padding: 40px;
        width: 50px;
    }
    p.first{
    	border-radius: 10px 30px 30px 5px;
    }
    p.second{
    	border-radius: 10px 30px 30px;
    }
    p.third{
    	border-radius: 10px 30px;
    }
    p.fourth{
    	border-radius: 10px;
    }

</style>
</head>
<body>

<p class="blues first">1</p>
<p class="blues second">2</p>
<p class="blues third">3</p>
<p class="blues fourth">4</p>

</body>
</html>

Border Images

  • border-image
        border: 10px solid transparent; (border 설정을 꼭 해야 스타일이 적용된다)
border-image: url('https://www.w3schools.com/css/border.png') 50 round;
<!--url 다음에 나오는 수치는 이미지를 어느크기로 splice할 것인지를 의미한다-->

Multiple Backgrounds

  • background-image를 이용해서 여러개의 이미지 url를 쉼표로 구분해서 나열한다
  • background-size
    • contain: background 크기 안에 알맞게 이미지가 들어가는 것
    • cover: background 전체를 이미지로 덮는 것
  • background-origin: 배경 이미지가 어디에 위치하는지 설정하는 것
    • border-box
    • padding-box
    • content-box
  • background-clip
    • border-box
    • padding-box
    • content-box

차례대로 border-box, padding-box, content-box이다

CSS Gradients

두 종류가 있다: Lineart gradient와 Radial gradient

Linear Gradients

  • linear-gradient
  • 그라데이션 방향:
    • top to bottom(기본값)
    • to right: left right
    • to bottom, to top, to left, to bottom right 등...

기본 문법은 다음과 같다:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

linear-gradient(to top left, red, yellow, pink, green)

  • Using angles:
        예) 위의 문법 direction 부분에 0deg, 90deg, 090deg 등을 적는다
  • gradient 반복하기:
    • repeating-linear-gradient(color1, color2, ...);

Radial Gradients

기본 문법은 다음과 같다:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
  • radial-gradient
    • 안의 그라데이션 모양을 완벽한 원(타원이 아닌)으로 하고 싶다면 circle 옵션을 사용하면 된다

radial-gradient(circle, red, yellow, green);

CSS 그림자 효과

Text shadow

  • text-shadow
    • 여러개의 그림자를 추가하고 싶을때는 comma로 구분해서 추가한다
h1 {
  text-shadow: 2px 2px;
}
  • 그림자에 색 입히기
h1 {
  text-shadow: 2px 2px red;
}
  • 그림자에 blur effect 입히기
h1 {
  text-shadow: 2px 2px 5px red;
}
  • 그림자에 네온 효과 입히기
h1 {
  text-shadow: 0 0 3px #FF0000;
}

  • 테두리 있는 글씨
    • -1px 0, 0 1px, 1px 0, 0 -1px
      여기 px의 크기를 늘리면 테두리가 두꺼워 진다
h1 {
  color: lightblue;
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

Box shadow

  • box-shadow
    • 그림자 기본 색은 검정색이다
div {
  box-shadow: 10px 10px;
}
<!-- 3번째 숫자를 추가하게 되면 blur effect를 주게 된다-->

카드 만들기

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

예) 달력 카드

<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
  background-color: #fa9576;
  color: white;
  padding: 10px;
  font-size: 40px;
}

div.container {
  padding: 10px;
}
</style>
<!-- -->
<body>
<div class="card">
        <div class="header">
            <h1>1</h1>
        </div>

        <div class="container">
            <p>July 24, 2020</p>
        </div>
        </div>
</body>

예) 포스터

<style> 
	div.card1 {
      width: 250px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      text-align: center;
      margin: 20px;
	}

	div.header1 {
      background-image: url('https://cdn.pixabay.com/photo/2019/03/02/19/32/republic-of-korea-4030532__340.jpg');
      background-size: cover;
      padding: 100px;
	}

	div.container1 {
  		padding: 10px;
	}
</style>
<body>
<div class="card">
	<div class="header">
	</div>
	<div class="container">
		<p>Pohang, Korea</p>
	</div>
</div>
</body>

CSS Text Overflow

  • text-overflow
    • clip(잘려서 보인다), ellipsis(...으로 보인다)
    • overflow: hidden/visible
p.test1{
    	white-space: nowrap;
    	border: 2px solid black;
        width: 140px;
        overflow: hidden; <!--width를 넘어간 글자가 숨겨져서 나타난다-->
        text-overflow: clip;
}
p.test2{
    	white-space: nowrap;
    	border: 2px solid black;
        width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
}

p.test1:hover {
  overflow: visible; <!--마우스를 갖다댈때 overflow된 텍스트가 나타난다-->
}

overflow text

CSS Word Wrapping

  • word-wrap: 너무 긴 글은 다음 행에서 시작하도록 설정한다 (엑셀시트에서 "자동 줄 바꿈" 기능과 같은 역할을 한다)
        사용 예) word-wrap: break-word;

before word-wrap
after word-wrap

CSS Word Breaking

  • word-break: 넘어서는 글을 새로운 줄에서 시작하게 할때 정하는 규칙
    • keep-all, break-all;

CSS Writing Mode

  • writing-mode: 글자를 수평 또는 수직으로 나열할지 정해준다
    • horizontal-tb, vertical-rl

CSS Web Fonts

Google fonts 사용하는 법

사용 방법 2가지

  1. font를 다운 받아서 우리 서버에 올린 후 font를 적용시킨다
  2. embed link를 그대로 사용해서 적용시킨다
    • <link href="fonturl" rel="stylesheet">
    • font-family

방법 2:

  1. 사용하고 싶은 font 찾기: https://fonts.google.com/
  2. link와 font-family를 복사해서 link는 <head>태그 안에, font-family는 <style>태그 안에 그대로 붙여놓기 한다
 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

맘에 드는 font를 고른 후 google font 창의 모습, 여기서 link와 font-family를 복사해가면 된다 

적용 예시)

<!DOCTYPE html>
<html>
<head>

<link href="https://fonts.googleapis.com/css2?family=Recursive:wght@300&display=swap" rel="stylesheet">

<style> 

*{
   font-family: 'Recursive', sans-serif;
}

</style>
</head>
<body>

<h1>Using Google Fonts</h1>

<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>

</body>
</html>

font가 적용된 이후의 모습

Font Awesome 사용하는 법

키보드에 있는 문자 외에 특수 문자나 icon을 삽입할 수 있도록 설정하는 방법이다.
Font awesome에서 icon을 사용하는 데에 앞서서 주의할 점 2가지:

  • 내가 사용하는 버전은 몇인가? (버전에 따라 CDN 작업을 다르게 해줘야 하기 때문)
  • 내가 사용하는 버전이 무료인가?

사용방법:

  1. cdnjs 사이트에서 font awesome의 버전에 맞은 링크를 복사해서 <head> 태그 안에 붙여넣기 한다.
    링크: https://cdnjs.com/libraries/font-awesome/4.7.0

  2. fontawesome 페이지에서 맘에 드는 icon을 찾는다
    • fontawesome에 많은 버전이 나와 있지만 4.7.0 버전에 무료로 제공되는 icon이 많기 때문에 사용하길 추천한다. 링크: https://fontawesome.com/v4.7.0/icons/
  3. 사이트에서 icon의 <i> 태그를 복사해 온 후 HTML문서에서 원하는 부분에 복사 붙여넣기 하면 된다
 

Font Awesome Icons

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

 

font-awesome - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

font-awesome - The iconic SVG, font, and CSS toolkit - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

cdnjs.com

버전을 확인한후 링크 복사
<i> 태그 복사

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<!--cdjn 사이트에서 font awesome 버전에 맞는 cdn 링크를 가져온다-->
<style> 

#iconbluetooth{
	color:green;
    font-size: 50px;
}

</style>
</head>
<body>

<div class="fonta">
<h1>Using font awesome</h1>

<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>
<p>This is a bluetooth icon using font awesome: <br>
<i id="iconbluetooth" class="fa fa-bluetooth" aria-hidden="true"></i>
<!-- icon을 넣고자 하는 부분에 font awesome에서 복사해온 코드를 복사 붙여넣기 하면 된다-->
</p>
</div>

</body>
</html>

icon을 적용한 후의 모습

Icon finder

Font Awesome과 마찬가지로 무료인지 반드시 확인할 수 사용하도록 하자. 참고링크: https://www.iconfinder.com/

 

4,650,000+ free and premium vector icons in SVG, PNG, CSH and AI format.

Iconfinder is the leading search engine and market place for vector icons in SVG, PNG, CSH and AI format.

www.iconfinder.com

CSS 2D Transforms

  • transform
    • translate(): 현재 위치에서 주어진 x,y 좌표만큼 이동한다
          예) translate(50px, 100px);
    • rotate()
          예) rotate(20deg);
          -negative values will rotate the element counter-clockwise
    • scaleX()
    • scaleY()
    • scale()
          예) scale(2, 3); 차례대로 width의 2배, height의 3배
          0.5: 원래 크기의 반
    • skewX()
    • skewY()
    • skew(): 기울임 효과
    • matrix(): 모든 효과를 모아놓은 것
          matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

CSS 3D Transforms

  • transform
    • rotateX(): x축에 따라 회전한다
           예) rotate(150deg);
    • rotateY()

rotateZ()CSS Transitions

스타일이 서서히 바뀌는 효과를 제공한다. Transition effect를 사용하려면 2가지를 명시해놔야 한다. 

  1. 효과를 넣고자 하는 CSS property
  2. 효과가 지속되는 시간(duration)
  • transition
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s; <!--width, height, background, transform의 duration을 정의 할 수 있다-->
}

div:hover {
  width: 300px;
}
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
    • ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)
  • shorthand으로도 작성할 수 있다
    • 대신 각 property 사이에는 쉼표를 넣지 말 것, 맨 마지막에 semi-colon만 오면 된다
div {
  transition: width 2s linear 1s;
}

CSS Animations

한 element가 하나의 스타일에서 다른 스타일로 서서히 변환하는 효과를 제공한다. CSS animation을 사용하려면 우선 animation을 위한 keyframe을 정의해야 한다. Keyframe은 element가 각 특정 시간마다 어떤 스타일을 적용 받을지 지정해준다.

  • @keyframes
    • 참고) animation이 끝나고 나면 처음의 스타일로 돌아간다
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example; <!--animation 이름을 지정해준다-->
  animation-duration: 4s;
}

@keyframes example {	<!--keyframe에서 animation의 style을 정의한다-->
  from {background-color: red;}
  to {background-color: yellow;}
  
  <!--keyframe에서 시간은 from~to로 정의할 수 있고, 0%, 25% ...등으로도 정의할 수 있다-->
}
  • animation-name
  • animation-durtion
  • animation-delay
  • animation-iteration-count: animation을 몇번 반복할지 정의한다
    • 숫자 또는 infinite
  • animation-direction
    • normal, reverse, alternate, alternate-reverse
  • animation-timing-function
  • animation-fill-mode
  • animation
  • shorthand으로도 작성 할 수 있다
div {
  animation: example 5s linear 2s infinite alternate;
}

CSS Tooltip

마우스 커서를 갖다 댈때 문구가 뜨게 하는 것. 

  • tooltip class 를 추가할 것
  • tooltip 안에 들어갈 문구는 <span> 같은 inline element 안에 class="tooltiptext"를 선언한다
  • tooltip:hover
<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>	<!--tooltip에 나타날 문구-->
</div>

</body>
</html>

말풍선 처럼 아래에 화살표가 있는 tooltip 만들기

  • content: " "; (비운 상태로 놔두기)
  • .tooltip .tooltiptext::after

CSS Styling Images

  • border-radius: 모서리를 둥글게 할 때 사용한다
    px 또는 % 으로 정의 가능하다

border-radius: 5px;
border-radius: 50%;

  • thumbnail image (액자처럼 테두리가 있는 이미지)
img{
	border-radius: 5px;
    border: 1px solid #ddd;	<!--테두리를 얇고 연한 색으로 하는 것이 포인트!-->
    padding: 10px;
}
  • responsive images: 화면 크기에 맞게 알아서 조정해준다
img {
  max-width: 100%;
  height: auto;
}
  • 언제나 이미지가 가운데에 있도록 설정하기:
img {
  display: block;	<!--이미지는 inline element이기 때문에 block element으로 바꿔줘야 한다-->
  margin-left: auto;
  margin-right: auto;
}
  • opacity
  • 이미지 위에 텍스트 삽입하기
    • 우선 텍스트와 이미지를 하나의 container (예를 들어서 <div>) 안에 묶어넣고 시작하기
    • top, left로 위치를 조절하고 position:absolute 로 텍스트의 위치를 고정시킨다
      1. top: 숫자가 커질수록 텍스트가 아래로 이동
      2. left: 숫자가 커질수록 텍스트가 오른쪽으로 이동
      3. position: absolute;
  • image filters
    • filter
    • blur, brightness, contrast, grayscale, rotate, sepia 등...
  • image hover overlay