[Html/Css] 중급 정리

 

 

font-family 설정
body {
  font-family : 'gulim', 'gothic'
}

 

폰트를 여러개 나열하면 차례대로 적용하며 없다면 그 다음 폰트를 적용한다.

 

 

* @font-face

@font-face {
    font-family: '고딕';
    src: url(../font/gothic.ttf);
}

 

폰트가 사용자의 컴퓨터에 저장이 되어 있지 않으면 적용이 되지 않기때문에 해당 스타일을 사용한다. (url 경로에 있는 폰트 파일을 가져온다.)

 

 

* ttf, woff

 - 폰트 파일 중 확장자가 .ttf인 파일은 대체로 용량이 크기 때문에, woff 파일을 쓰면 용량도 적고 서버에서 성능도 챙길 수 있음.

 

 

* IE의 낮은 버전에서 폰트사용하기

@font-face { 
  font-family: 'Gothic'; 
  font-weight: 400; 
  src: url(GothicR.eot); 
  src: url(GothicR.eot?#iefix) format('embedded-opentype'), 
      url(GothicR.woff) format('woff'), 
      url(GothicR.ttf) format('truetype'); 
}

 

 

* 구글 폰트 사용하기

 

fonts.google.com

 

Google Fonts

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

fonts.google.com

 

해당 사이트의 폰트에 들어가서 link(html)나 @import(css)로 복붙하고 사용하면 된다.

 

 

* Anti-aliasing (윈도우에 한함)

 

 - 폰트가 비트맵 이미지 마냥 살짝 깨져보이는 현상

transform : rotate(0.03deg);

 

기울기를 살짝 돌려주면 글자가 매끈해 보인다.

 

 

 

Flexbox
<div class="flex-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
.flex-container {
  display : flex;
  justify-content : center;  /* 좌우정렬 */
  align-items : center;  /* 상하정렬 */
  flex-direction : column; /* 세로정렬 */
  flex-wrap : wrap;  /* 폭이 넘치는 요소 wrap 처리 */
}
.box {
  flex-grow : 2;  /* 폭이 상대적으로 몇배인지 결정 (중간에 삽입하면 크기가 큰 박스가 생김)*/
}

 

메뉴 만들 때, 왼쪽에 로고 오른 쪽에 메뉴 정렬을 하고싶다면

<div class="flex-container">
  <div class="box"></div>
  <div class="box" style="flex-grow : 1"></div>
  <div class="box"></div>
</div>

위와 같은 방법으로 임시로 만든 div에 flex-grow로 크기를 키워준 박스를 삽입한다.

 

 

 

 

head 태그

- CSS 파일

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

1. css/main.css (상대경로: 현재 파일의 경로부터 시작)

2. /css/main.css (절대경로: 현재 사이트에 메인(root) 경로부터 시작)

 

 

- style 태그

<head>
  <style>
    .main {
      
    }
  </style>
</head>

html은 코드 진행이 위에서 아래이기 때문에 body보다 head에 넣는 편이 낫다.

 

 

- 제목

<head>
  <title>페이지 제목</title>
</head>

 

 

- meta 태그

<head>
  <meta charset="UTF-8">
  <meta name="description" content="검색 시 제목으로 뜨는 부분">
  <meta name="keywords" content="검색에 도움을 주는 키워드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

1. UTF-8: 캐릭터셋 인코딩

2. description: 구글 등의 브라우저에서 검색 시 화면에 뜨는 글

3. keywords: 검색에 도움을 주는 키워드

4. viewport: 화면 시작 시 렌더링 하는 부분 (width=device-width: 장치 기기의 실제 폭으로 렌더링, initial-scale: 화면 줌 레벨)

5. open graph

<head>
  <meta property="og:image" content="/이미지경로.jpg">
  <meta property="og:description" content="사이트설명">
  <meta property="og:title" content="사이트제목">
</head>

페이스북에서 만든 메타태그로 커스터마이징 하여 사용 가능

 

 

 

- Favicon

<head>
  <link rel="icon" href="아이콘경로.ico" type="image/x-icon">
</head>

ico, png 등 파일 가능, 호환성은 ico가 제일 좋으며 사이즈는 32 x 32로 사용한다.

 

 

 

반응형 레이아웃

- 웹의 단위

.box {
  width : 16px; /* 기본 px 단위 */
  width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */
  width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */
  width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */
  width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */
}

typography 디자인 할 때, rem을 사용하긴 함. (18px = 1.2rem, 22px = 1.4rem)

 

 

- viewport 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">

태블릿이나 모바일 등에서 반응형을 하기 위함.

 

 

- media query

@media screen and (max-width : 1200px) { 
  .box {   
  } 
  
  .box2 {   
  } 
} 

@media screen and (max-width : 768px) { 
  .box { 
    font-size : 30px; 
  } 
}

css 파일의 최하단에서 사용함. 설정한 css에 중복이 발생하면 더 밑에 있는 스타일을 적용한다. 크기는 대체로 (1200px / 992px / 768px / 576px) 사이즈를 권장함. 1200 / 768 or 992 / 576 등으로 사용한다.

 

 

 

개발자 도구 디버깅 및 IE 호환성

- Ctrl + Shift + C 를 누르거나 f12 누르면 원하는 요소의 디버깅이 가능하다. style을 보면 해당 요소에 적용 되어있는 모든 css를 확인할 수 있음.

 

- IE 11 버전 이하에서는 적용되지 않는 요소들이 많은데 조건부로 style을 적용할 수 있다.

<!--[if lt IE 10]>
  <link rel="stylesheet" type="text/css" href="ie/main.css" />
<![endif]-->

해당 조건부로 첨부하면 인터넷 익스플로러 10 미만에서 스타일이 적용된다. (link 태그는 중요할 수록 밑으로 보내는게 좋다.)

 

 

 

Font awesome

- download

https://fontawesome.com/start

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

 

zip파일 다운로드 후 사용

 

 

- cdn

https://cdnjs.com/libraries/font-awesome

 

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make

cdnjs.com

 

url 긁어와서 사용

 

 

fontawesome에선 주로 아이콘을 많이 사용한다.

 

 

 

Transition css 애니메이션
.box {
  opacity : 0; /*투명도 (1: 불투명, 0: 투명)*/
  transition : all 1s; /*1초 동안 모든 스타일 중 하나가 변할 때 동작*/
}
.box {
  transition-delay: 1s; /* 시작 전 딜레이 */
  transition-duration: 0.5s; /* transition 작동 속도 */
  transition-property: opacity; /* 어떤 속성에 transition 입힐건지 */
  transition-timing-function: ease-in; /* 동작 속도 그래프조정 */
}

 

- 애니메이션 만드는 순서

1. 시작 스타일 정하기

2. 최종 스타일 정하기

3. 언제 최종스타일로 변할지 트리거 주기 (대부분 hover)

4. transition으로 서서히 동작하게 하기

 

 

* Tip

<div style="position: relative;">
  <div class="overlay-wrap"> <!-- 회색화면 추가 동작을 위해 한번 더 감싼다. -->
    <div class="overlay-black"> <!-- 회색화면 -->
      <span>$60</span>
    </div>
  </div>
  <img src="img/product1.jpg"> <!-- 이미지 -->
</div>

 

 

 

 

Bootstrap

https://getbootstrap.com/docs/5.1/getting-started/download/

 

Download

Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.

getbootstrap.com

 

ex)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

 

 

- Bootstrap Grid

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>
  • row : 행(row)을 뜻함
  • col : 열(column)을 뜻함
  • md : 반응형을 위한 크기지정 (sm : 576px, md : 768px, lg : 992px, xl : 1200px)
  • 숫자 : 한 row를 12분할 했을 때, 가져 갈 크기 비율

 

 

 

CSS 덮어쓰기

- 하나의 CSS 파일

.box {
  background : red;
}

.box {
  background : blue; /* 하단의 스타일이 우선 적용 */
}
<link href="css/main.css" rel="stylesheet">
<link href="css/main2.css" rel="stylesheet"> <!-- 하단이 css가 우선 적용 -->

 

 

- 우선 순위 적용

.div {
  background : red !important; /* 우선 순위 10000 */
}

#div {
  background : blue; /* 우선 순위 100 */
}

.div {
  background : blue; /* 우선 순위 10 */
}

div{
  background : blue; /* 우선 순위 1 */
}

 

 

- Specificity(구체성 점수) 적용

div.container div.box { /* 22점 */
  color : red;
}

div.container .box { /* 21점 */
  color : blue;
}

 

 

 

 

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

[Html/Css] 고급 정리 (SASS)  (0) 2021.11.17
[Html/Css] 기초 정리  (0) 2021.11.05

+ Recent posts

티스토리툴바