Html&CSS 유용한 방법들

📒 웹 폰트 첨부 방법

✔ 폰트 넣는 방법

body {
  font-family: "gulim", 'dotum';
}

◼ body 태그 안에 있는 모든 글자를 굴림체로 적용한다. 굴림체 적용 시 에러가 발생하면 돋음체가 적용된다.

◼ 클라이언트 컴퓨터에 해당 폰트가 설치되어 있어야 적용된다.

◼ font-family는 inherit 된다. -> 자동 상속

✔ 커스텀 폰트 넣는 방법

@font-face {
    font-family: '폰트 이름';
    src: url(폰트 경로);
}

◼ @font-face: 내가 준비한 폰트 파일을 CSS에서 사용 가능하게 등록한다.

◼ 클라이언트 컴퓨터에 등록한 폰트가 없을 시, url로 지정한 곳에서 다운 받아 사용된다.

◼ 한글 폰트의 사이즈는 매우 크기 때문에, 1~2개만 사용하는 것이 좋다.

💥폰트 여러 개를 사용하고 싶다면, 용량이 적은 .woff 형식(웹용)을 사용하는 것이 좋다.

✔ 폰트를 부드럽게 처리하는 방법

p, h4, h3, h2, h1, span {
    transform: rotate(0.03deg);
}

◼ transform: rotate로 살짝 회전시키면 폰트가 부드럽게 보여진다.

◼ Window 환경에서 큰 효과를 볼 수 있다.

📒 CSS 디버깅 방법

✔ 내가 짠 CSS 코드가 적용되지 않는다면?

◼ CSS 파일부터 원인을 찾아 봐야 한다. -> 너무 많은 시간이 소요 된다.

◼ 크롬 개발자 도구를 사용해서 원인을 찾는다.

◼ 1번을 클릭한 뒤, 원하는 요소를 선택(2번)

◼ 아래 Styles를 클릭하면 해당 요소에 적용되는 스타일을 보여주고(3번) 가장 위에 있을 수록 우선 순위가 높은 스타일이다.

◼ element.style은 태그 요소에 직접 style 속성으로 넣은 부분을 보여준다.

📒 아이콘 사용하기

💥 Font Awesome 라이브러리를 사용한다.

✔ CDN으로 설치하기

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

◼ head 태그에 위 코드를 첨부한다.

◼ 링크 서버가 다운 되면 해당 css 파일을 다운 받아 사용하지 못하는 단점이 존재한다.

✔ 직접 다운로드 하기

https://fontawesome.com/download

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

◼ 해당 사이트에서 다운 받고, 실제 작업하는 css 폴더에 넣고 사용한다.

◼ css, webfont 폴더만 남기고, css 폴더 안에서는 all, all.min만 남기고 전부 삭제해도 된다.

✔ 권한 작성

<script src="https://kit.fontawesome.com/{something} "crossorigin="anonymous"></script>

◼ FontAwesome에서 Free로 회원 가입 한 뒤, 인증 script를 받아 head 태그 안에 넣는다.

✔ 아이콘 넣기

<i class="fa-solid fa-star fa-3x"></i>

◼ FontAwesome 사이트에서 원하는 아이콘을 찾은 뒤, 위 코드를 복사해서 원하는 곳에 붙여 넣는다.

◼ fa-3x 처럼 스타일을 변경할 수 있다.

📒 애니메이션 만들기

❗ONE-WAY 애니메이션

✔ Step

◼ 시작 스타일 만들기

◼ 최종 스타일 만들기

◼ 언제 최종 스타일로 변하는 트리거 설정

◼ transition으로 애니메이션 효과 주기

❗transition -> 스타일이 변하면, 서서히 변경하도록 지정

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s;
  align-items: center;
}

.overlay p {
  font-size: 20px;
  color: red;
}

.overlay:hover {
  opacity: 1;
}

◼ hover 시, opacity 속성을 0에서 1로 1초 동안 서서히 보여주는 애니메이션을 만들 수 있다.

✔ 타 사이트 애니메이션 확인하기

◼ 크롬 개발자 도구에서 Animations를 클릭한 뒤, 애니메이션을 가지고 있는 요소를 hover하면 Animations 탭에 기록되고 어떤 요소가 변경되는지 확인할 수 있다.

📒 BootStrap 사용하기

✔ 사용 이유

◼ HTML CSS 개발 시간 단축

✔ Html 파일에 다음 코드를 붙여 넣는다.

https://getbootstrap.com/docs/5.3/getting-started/introduction/

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

getbootstrap.com

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
  </body>
</html>

✔ BootStrap Docs에서 필요한 무료 Component를 찾아 복사해서 붙여넣어 사용한다.

<button type="button" class="btn btn-primary">Primary</button>

◼ 보통 뼈대용으로 많이 사용한다.

📒 CSS 덮어쓰기

CSS 수정 작업을 진행하다보면, 어느 파일에서 어느 부분이 스타일을 적용하는지 모를 때가 있다. 이럴 때 CSS 덮어쓰기를 사용해서 새로운 것으로 덮어버릴 수 있다.

✔ 같은 Class일 경우

.custom {
  color: red;
}

.custom {
  color: white;
}

◼ main.css 파일에 다음과 같이 작성되어 있고, class="custom"을 사용하면 red 대신 white가 적용된다. 아래에 있는 것일 수록 우선 순위가 높다.

✔ 다른 Class일 경우

<link href="css/main.css" rel="stylesheet" />
<link href="css/main2.css" rel="stylesheet" />

/* main.css */
.custom {
  color: red;
}

/* main2.css */
.custom {
  color: white;
}

◼ 헤더에 link 태그를 사용해서 적용한 css 중 아래에 있는 css 파일이 적용된다. 즉, main2.css 파일의 custom이 적용된다.

✔ CSS 선택자 우선 순위로 덮어쓰기

태그 < .(class) < #(id) < style

✔ 명령어 사용

/* main.css */
.custom {
  color: red; !important
}

/* main2.css */
.custom {
  color: white;
}

◼ !important를 사용하면 최우선적으로 적용된다. (추천하지 않는다.)

📒 복잡한 애니메이션 만들기

❗A -> B -> C, A -> B -> A, A -> 1초 정지 -> B 등 여러 상태로 변경되는 애니메이션 만들기

◼ @keyframes를 사용하면 된다.

◼ transform은 요소의 위치 및 방향 등을 설정, 해당 옵션으로 위치를 설정하면 애니메이션 제작 시 margin보다 더 부드러운 애니메이션을 만들 수 있다.

◼ transform보다 margin 변경이 더 느리다.

✔ 좌우 이동 애니메이션 만들기

.ani-text {
  text-align: center;
}

.ani-text:hover {
  animation-name: 좌우이동;
  animation-duration: 1s;
}

@keyframes 좌우이동 {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(-100px);
  }

  100% {
    transform: translateX(100px);
  }
}

◼ 0%, 50%, 100%는 각 진행 시 적용할 스타일을 명시한다.

◼ 작성한 애니메이션 keyframes를 animation-name 속성에 적용하고, animation-duration으로 애니메이션 시간을 적용한다.

◼ animation-iteration-count: 애니메이션 반복 횟수

◼ animation-delay: 애니메이션 딜레이양

📒 Position: sticky 사용하기

❗ 스크롤을 내렸을 때, 좌측 우측으로 이동하는 법

❗ 스크롤을 내렸을 때, 좌측만 움직이고 우측은 가만히 고정시키는 법

.grey {
  background-color: lightgray;
  height: 2000px;
  margin-top: 500px;
}

.image {
  float: right;
  width: 400px;
  position: sticky;
  top: 10px;
}

.text {
  float: left;
  width: 300px;
}

<body style="background: gray; height: 3000px">
   <div class="grey">
     <div class="image">
       <img src="html_part_1_img.png" width="100%" />
     </div>
     <div class="text">
       position: sticky test position: sticky test position: sticky test
       position: sticky test position: sticky test position: sticky test
       position: sticky test position: sticky test position: sticky test
     </div>
   </div>
</body>

◼ position: sticky는 조건부로 fixed 할 수 있다.

◼ 위와 같은 코드를 적용하면, 스크롤을 내리다가 image를 만나게 되면, 이미지는 고정되고 스크롤을 이어갈 수 있다.

◼ 부모 박스를 넘어가면 조건이 해제되어 고정이 풀리게 된다.

'Web > Html&Css' 카테고리의 다른 글

SASS 사용법 (0)	2023.04.21
반응형 레이아웃 (0)	2023.04.01
Html&CSS 사용하기 (0)	2023.03.31

Dev-Logs

Html&CSS 유용한 방법들

📒 웹 폰트 첨부 방법

✔ 폰트 넣는 방법

✔ 커스텀 폰트 넣는 방법

✔ 폰트를 부드럽게 처리하는 방법

📒 CSS 디버깅 방법

✔ 내가 짠 CSS 코드가 적용되지 않는다면?

📒 아이콘 사용하기

💥 Font Awesome 라이브러리를 사용한다.

✔ CDN으로 설치하기

✔ 직접 다운로드 하기

✔ 권한 작성

✔ 아이콘 넣기

📒 애니메이션 만들기

✔ Step

✔ 타 사이트 애니메이션 확인하기

📒 BootStrap 사용하기

✔ 사용 이유

✔ Html 파일에 다음 코드를 붙여 넣는다.

✔ BootStrap Docs에서 필요한 무료 Component를 찾아 복사해서 붙여넣어 사용한다.

📒 CSS 덮어쓰기

CSS 수정 작업을 진행하다보면, 어느 파일에서 어느 부분이 스타일을 적용하는지 모를 때가 있다. 이럴 때 CSS 덮어쓰기를 사용해서 새로운 것으로 덮어버릴 수 있다.

✔ 같은 Class일 경우

✔ 다른 Class일 경우

✔ CSS 선택자 우선 순위로 덮어쓰기

✔ 명령어 사용

📒 복잡한 애니메이션 만들기

✔ 좌우 이동 애니메이션 만들기

📒 Position: sticky 사용하기

'Web > Html&Css' 카테고리의 다른 글

티스토리툴바

Html&CSS 유용한 방법들

📒 웹 폰트 첨부 방법

✔ 폰트 넣는 방법

✔ 커스텀 폰트 넣는 방법

✔ 폰트를 부드럽게 처리하는 방법

📒 CSS 디버깅 방법

✔ 내가 짠 CSS 코드가 적용되지 않는다면?

📒 아이콘 사용하기

💥 Font Awesome 라이브러리를 사용한다.

✔ CDN으로 설치하기

✔ 직접 다운로드 하기

✔ 권한 작성

✔ 아이콘 넣기

📒 애니메이션 만들기

✔ Step

✔ 타 사이트 애니메이션 확인하기

📒 BootStrap 사용하기

✔ 사용 이유

✔ Html 파일에 다음 코드를 붙여 넣는다.

✔ BootStrap Docs에서 필요한 무료 Component를 찾아 복사해서 붙여넣어 사용한다.

📒 CSS 덮어쓰기

CSS 수정 작업을 진행하다보면, 어느 파일에서 어느 부분이 스타일을 적용하는지 모를 때가 있다. 이럴 때 CSS 덮어쓰기를 사용해서 새로운 것으로 덮어버릴 수 있다.

✔ 같은 Class일 경우

✔ 다른 Class일 경우

✔ CSS 선택자 우선 순위로 덮어쓰기

✔ 명령어 사용

📒 복잡한 애니메이션 만들기

✔ 좌우 이동 애니메이션 만들기

📒 Position: sticky 사용하기

'Web > Html&Css' 카테고리의 다른 글

'Web/Html&Css' Related Articles

티스토리툴바