HTML5, CSS3/HTML5, CSS3

23-02-17 CSS3

모건이삼촌 2023. 2. 17. 17:02

※ 복습

네이밍 규칙

class :  'camel을 사용하지 않는다' 라는 점을 꼭 기억해두자

(형태)(의미)(순서)_(상태) 순으로 작성

Block, Element, Modifier

 

css우선순위

 

※

1. font-family 스타일

 - 텍스트의 글꼴모음

 1-1) 사용방법

 - 글꼴 이름이 두 단어 이상이면 "" 따옴표로 묶어야 한다.

 - 둘 이상의 글꼴을 사용하고자 할 경우 쉼표로 구분합니다.

 - 적용한 폰트가 없을경우 기본폰트가 적용됨

  * 웹폰트

     1. .eot : ms 전용(표준에 가까움)

     2.  woff : 비ms

 - 구글폰트 사용 : https://fonts.google.com/?subset=korean&noto.script=Kore 

 - 

 

Google Fonts

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

fonts.google.com

 

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Dongle&family=Noto+Sans+KR&display=swap" rel="stylesheet">
  <style>
    @font-face {
      font-family: "D2coding";
      src: url(../fonts/Diablo-Light.woff);
    }
    h2 {text-align: center;}
    #text-wrap {width: 90%; margin: 0 auto; font-size: 14px; color: #444;}
    .text-font1{font-family: "verdana", "sans-serif", 굴림;}
    .text-font2{font-family: "맑은 고딕"; font-size: 11px;}
    .text-font3{font-family: "D2coding"; font-size: 3em;}
    .text-font4{font-family: "Dongle"; font-size: 3em; font-weight: 900;}
    .text-font5{font-family: "Noto+Sans+KR"; font-size: 3em;}

  </style>
</head>
<body>
  <h2>@font-face 및 font-family 설정</h2> 
  <div id="text-wrap">
    <p class="text-font1">공무원의 신분과 정치적 중립성은 법률이 정하는 바에 의하여 보장된다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.대통령의 임기연장 또는 중임변경을 위한 헌법개정은 그 헌법개정 제안 당시의 대통령에 대하여는 효력이 없다. 공공필요에 의한 재산권의 수용·사용 또는 제한 및 그에 대한 보상은 법률로써 하되, 정당한 보상을 지급하여야 한다.</p>
    <p class="text-font1"> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <p> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <p class="text-font2">정당은 그 목적·조직과 활동이 민주적이어야 하며, 국민의 정치적 의사형성에 참여하는데 필요한 조직을 가져야 한다. 법관은 탄핵 또는 금고 이상의 형의 선고에 의하지 아니하고는 파면되지 아니하며, 징계처분에 의하지 아니하고는 정직·감봉 기타 불리한 처분을 받지 아니한다.</p>
    <p class="text-font3">정당은 그 목적·조직과 활동이 민주적이어야 하며, 국민의 정치적 의사형성에 참여하는데 필요한 조직을 가져야 한다. 법관은 탄핵 또는 금고 이상의 형의 선고에 의하지 아니하고는 파면되지 아니하며, 징계처분에 의하지 아니하고는 정직·감봉 기타 불리한 처분을 받지 아니한다.</p>
    <p class="text-font3">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <p class="text-font4">정당은 그 목적·조직과 활동이 민주적이어야 하며, 국민의 정치적 의사형성에 참여하는데 필요한 조직을 가져야 한다. 법관은 탄핵 또는 금고 이상의 형의 선고에 의하지 아니하고는 파면되지 아니하며, 징계처분에 의하지 아니하고는 정직·감봉 기타 불리한 처분을 받지 아니한다.</p>
    <p class="text-font5">정당은 그 목적·조직과 활동이 민주적이어야 하며, 국민의 정치적 의사형성에 참여하는데 필요한 조직을 가져야 한다. 법관은 탄핵 또는 금고 이상의 형의 선고에 의하지 아니하고는 파면되지 아니하며, 징계처분에 의하지 아니하고는 정직·감봉 기타 불리한 처분을 받지 아니한다.</p>
  </div>
</body>
</html>

 2. font-style 스타일

  - italic oblique, normal

 

 3. font-weight

  - bold, normal만 사용

 

 4. line-height 스타일

 - margin과 padding으로 관리하는게 더 편함 

 

5. text-decoration 스타일 (자주사용)

 - 글자에 대한 꾸밈 (선 / 밑줄, 취소선, 윗줄)

 

6. text-shadow 스타일

 - 텍스트에 그림자 효과를 넣음, 그림자 기본값은 우측 아래 방향으로 설정

 - 쓸수 있는 속성값 : x축, y축, 크기(번짐정도), 색상

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
 <style>
  h1{font-size: 4em;}
  h1:nth-child(1){text-shadow: 10px 10px 10px gray;}
  h1:nth-child(2){text-shadow: 0 0 10px gray ; text-transform: capitalize;}
  h1:nth-child(3){text-transform: uppercase; background-color: black;
    padding: 50px;
    text-shadow: 
      0 0 30px white,
      0 -10px 10px #ffa,   
      0 -20px 20px #ff0,
      0 -40px 25px #fa0,   
      0 -50px 30px #f00;   
    }
  
 </style>
</head>
<body>
  <h1>WEB PUBLISHER</h1>  
  <h1>javascript</h1>  
  <h1>css</h1>  
</body>
</html>

 7. text-indent 스타일 (대체 텍스트 용도로 많이 사용함)

  - 들여쓰기, 내어쓰기

 

 8. background

p.270 표 삽입 필요

 - repeat - 배경화면 바둑판식이랑 비슷함

 8-1) gradiant

 - 선형:

 - 원형 

 - 인자 : 1. 방향(각도 / 문자로도 사용가능), 색상

 - 

 

 

※ 이미지 스프라이트 위치조정 쉽게 하는법

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    body{text-align: center;}
    .logo {display: block;
      background: url(https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png);
      height: 62px;
      background-repeat: no-repeat;
      width: 63px;
      background-position: -90px -60px;
      text-indent: -9999px;
     }
     .logo.a{
      height: 62px;
     background-repeat: no-repeat;
     width: 63px;
     background-position: -140px -75px;
     }
  </style>
</head>
<body>
  <a href="https://www.daum.net" class="logo d">다음</a>
  <a href="https://www.daum.net" class="logo a">다음</a>
</body>
</html>

 

요소에서 해당 이미지 선택 후 위치 조정

위치조정

마우스 클릭 후 마우스 휠 + Shift, Ctrl, Alt로 미세조정 한 뒤 코드에 복붙하면 됨

'HTML5, CSS3 > HTML5, CSS3' 카테고리의 다른 글

23-02-21 CSS3 (position, transition, transform, FlexBox, 미디어 쿼리, seletor)  (0) 2023.02.21
23-02-20 css3  (0) 2023.02.20
23-02-16 HTML5  (0) 2023.02.16
23-02-15 HTML5  (0) 2023.02.15
23-02-14 HTML5, CSS3  (0) 2023.02.14

'HTML5, CSS3/HTML5, CSS3'의 다른글

  • 현재글23-02-17 CSS3

관련글

댓글

티스토리툴바