[HTML/CSS] 중급모듈(1)

HTML CSS 웹폰트 넣는 법과 안티앨리어싱

---

• font-family
  • inherit 속성: 자동으로 상속
• @font-face: 사이트나 폴더에서 url을 통해 폰트 가져오기
  • 참고: 경로에서 상위폴더는 ../
  • 예시

      @font-face {
          font-family: 'Ownglyph_ParkDaHyun';
          src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2411-3@1.0/Ownglyph_ParkDaHyun.woff2') format('woff2');
          font-weight: normal;
          font-style: normal;
      }
                
      body {
          font-family: 'Ownglyph_ParkDaHyun';
      }
    

  • 한글폰트 사이즈는 상당히 큼. 1-2개 정도만 쓰자
  • 용량 줄이기 위해선 .woff 확장자 사용 (웹용)
  • font-weight 에서 굵은 폰트 등은 따로 등록
• 구글폰트: 폰트파일 호스팅해주는 사이트
• Anti-aliasing
  • 확대했을 때 폰트가 깨지는 경우, 부드러운 처리 위해 글자 회전 transform : rotate(0.04deg);

레이아웃 만들기 3 : 편리한 Flexbox

---

• 가로로 배치: 부모 요소에 display: flex;
  • main.css

      .flex-item {
          width: 100px;
          height: 100px;
          background-color: aquamarine;
          margin: 5px;
      }
    
      .flex-container {
          display: flex;
      }
    

• flex 특징
  • inlin-block, table 합친 것
    • width 설정이 최대한으로 차지하는 크기
• flex 정렬

    .flex-container {
        display : flex;
        justify-content : center;  /* 좌우정렬 */
        align-items : center;  /* 상하정렬 */
        flex-direction : column; /* 세로정렬 (row는 가로정렬)*/
        flex-wrap : wrap;  /* 폭이 넘치는 요소 wrap 처리 (요소가 크면 밑으로 배치) */
    }
    .box {
        flex-grow : 2;  /* 폭이 상대적으로 몇배인지 결정 */
    }
  

• flex-grow: n를 통해 박스 크기를 비율로 설정가능
• flexbox로 nav 메뉴 만들어보기(숙제)
  • layout.html

      <div class="flex-container">
          <div class="flex-item nav-logo">LOGO</div>
          <div class="flex-item nav-blank"></div>
          <div class="flex-item nav-menu1">products</div>
          <div class="flex-item nav-menu2">services</div>
      </div>
    

  • main.css

      .flex-item {
          width: 100px;
          margin: 5px;
          color: whitesmoke;
      }
    
      .flex-container {
          display: flex;
          height: 50px;
          background-color: rgb(53, 48, 185);
          align-items: center;
          text-align: center;
      }
    
      .nav-logo {
          font-weight: 900;
      }
    
      .nav-blank {
          flex-grow: 1;
      }
    

  • img

  

HTML CSS 코드짤 때 유용한 Emmnet 그리고 부가 기능들

---

• vscode 기준
• 코드 우클릭 > Format Document: 코드 정렬
• Emmet: HTML을 쉽게 생성할 수 있는 플러그인
  • HTML 태그 emmet
    • 자식 요소 > div>ul>li
    • 형제 요소 + div>p+span
    • 올라가기 ^ div>ul>li^p+a div>ul>li^^div
    • 반복하기 * div>ul>li*3
    • 그룹화 () div>(header>ul>li*2)+footer
  • HTML 클래스 emmet
    • 클래스 .class div.container
    • 아이디 #id span#hello
    • 속성 [attr] td[title="bye" colspan=5]
    • 넘버링(숫자 순서대로 생성) $ ul>li.item$*5
      • $@: 숫자 시작 위치 설정 ul>li.item$@5*5
    • 텍스트 {} .fruit{banana}
  • CSS emmet
    • 단위 p ⟶ %
    • 단위 e ⟶ em
    • w100 ⟶ width: 100px;
    • w50p ⟶ width: 50%
    • m10p30e5 ⟶ margin: 10% 30em 5px;
    • bg10p ⟶ background: 10%;
• ’!’ 입력후 tab키: html 문서 시작템플릿 바로 생성
• ‘lorem’ 입력후 tab키: 임시글자 무작위 생성
• 태그 속성의 알파벳만 입력 후 tab키: 꺽쇠 괄호 포함된 태그 생성
• 익스텐션에서 ‘Power Mode’ 다운받아 코드 작성할 때 지진 일으키기 가능
• 색상 넣는 자리에 #만 입력하면 위에서 사용했던 색상 힌트를 보여줌

head 태그에 들어갈 내용 정리

---

1. <link> 태그 통해 각종 CSS 파일들 첨부
   • 참고
     • 상대경로: 현재 파일과 같은 경로에 있는 파일
     • 절대경로: 링크가 슬래쉬 기호로 시작. 현재 사이트의 메인 경로부터 시작
2. 스타일 태그. CSS 파일과 유사하게 동작
3. <title> 태그 통해 사이트 제목 설정
4. 여러가지 <meta> 태그
   • charset="UTF-8", description, keywords, viewport 등
5. open graph: og라는 메타 태그. 공유 시 뜨는 박스 수정 가능
6. Favicon: <link> 태그로 첨부