2022.04.14

BEM(Block Elemnet Modifire)

  • .block__element--modifier
  • -(하이픈 한개): 일반적인 이름 연결 toggle-btn
  • --(하이픈 두개): 요소의 상태를 표시
      <div class="btn--success">
  <div class="btn--error">
  • __(언더스코어 두개): 요소의 일부분을 표시 
      <div class="item">
        <div class="item__name"></div>
  </div>

'프론트엔드 > HTML' 카테고리의 다른 글

구글 폰트, 구글 머티리얼 아이콘 적용방법  (0) 2022.04.14
파비콘(favicon), 오픈그래프(Open Graph Protocol) 적용방법  (0) 2022.04.14
HTML 시멘틱태그(sementic tag)  (0) 2022.04.05
HTML  (0) 2022.04.05
특수 문자 용어  (0) 2022.04.05

2022.04.14

구글 폰트(Google font)

  • 구글 폰트는 라이선스에서 자유로운 글꼴 라이브러리이자 글꼴을 편하게 사용할 수 있도록 라이브러리와 ☞API를 둘러보기 위한 상호작용 웹 디렉터리

구글 폰트(Google font) 사용방법

  1. https://fonts.google.com/ 로 이동한다
  2. 원하는 폰트를 고른다
  3. '+ Select this style' 클릭을 한 후 'selected familiy' 클릭
  4. Use on th web에 link를 복사해서 html head부분에 붙여넣는다
    <html>
<head>
<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=Roboto:wght@100&display=swap" rel="stylesheet">
</head>
</html>
  5. 다시 구글폰트 사이트로 들어와 CSS rules to specify families 에 있는 내용을 복사 한 후 css에 붙여넣는다
    body {
 font-family: 'Roboto', sans-serif;
}
  6. font잘 적용됐나 확인 방법
    1. 페이지 검사
    2. 적용된 부 분 클릭
    3. computed 누르기
    4. font-family

구글 머티리얼 아이콘(Google Material Icons)

  • 구글에서 무료로 제공하고 있는 폰트형식으로 된 아이콘으로
    material아이콘의 기본크기는 font-size: 24px; 폰트사이즈로 조절

구글 머티리얼 아이콘(Google Material icons)적용방법

  1. https://developers.google.com/fonts/docs/material_icons#icon_font_for_the_web 로 이동한다
  2. Setup Method 1. Using via Google Fonts 부분에 있는 링크를 복사한다
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
   rel="stylesheet">
  3. 복사한 링크를 html head 부분에 붙여넣는다
  4. 아래 아이콘이 잘 적용됐다면 성공
    <span class="material-icons md-18">face</span>
  5. https://fonts.google.com/icons 로 이동해서 원하는 아이콘을 찾아서 적용

'프론트엔드 > HTML' 카테고리의 다른 글

HTML 클래스 속성 작명법  (0) 2022.04.14
파비콘(favicon), 오픈그래프(Open Graph Protocol) 적용방법  (0) 2022.04.14
HTML 시멘틱태그(sementic tag)  (0) 2022.04.05
HTML  (0) 2022.04.05
특수 문자 용어  (0) 2022.04.05

2022.04.14

파비콘(favicon)

  • 즐겨찾기(Favorites) + 아이콘(Icon)의 합성어
  • 웹페이지 접속시 상단 탭에 보여지는 아이콘으로 웹사이트를 대표하는 로고(logo)와 비슷한 개념

파비콘 설정

  • 일반적으로 파비콘 이미지는 16px X 16px 으로 설정해주면 됨
    아이콘 파일로 변경해 주는 사이트 ►click
  • 원하는 이미지이름을 favicon.ico로 변경 후 폴더안에 favicon.ico 파일을 넣으면 설정 완료
    ->파비콘을 링크태그로 따로 제공하지 않아도 프로젝트의 경로에서 ico파일을 자동으로 찾아서 설정됨
  • 좀 더 고행상도의 파비콘을 제공하고 싶다면 favico.png파일을 만들어서 링크태그에 입력해주면된다
    <link rel="icon" href="이미지이름" />

    홈페이지 파비콘 추출방법

  1. 네이버 파비콘을 추출하기 위해 https://www.naver.com/ 로 접속

  2. 뒤에 /favicon.ico 를 작성해준다


  3. 새로 창이 뜨는데 마우스 우클릭 후 '다른이름으로 저장' 눌러주면 끝

오픈그래프(Open Graph Protocol)

  • 링크를 붙여넣기 했을때 노출되는 이미지, 제목, 설명글
  • 오픈그래프 프로토콜은 페이스북에서 처음 만든 메타태그기술
    구성태그
<meta property="og:type" content=" 웹인지 앱인지 타입 지정 " /> 
<meta property="og:site_name" content=" 사이트 이름 “/> 
<meta property="og:title" content=" 해당 링크의 제목 " /> 
<meta property="og:description" content=" 설명. 너무길지않고 간략하게 " /> 
<meta property="og:image" content=" 썸네일 이미지 " /> 
<meta property="og:url" content="  링크될 url “/>

'프론트엔드 > HTML' 카테고리의 다른 글

HTML 클래스 속성 작명법  (0) 2022.04.14
구글 폰트, 구글 머티리얼 아이콘 적용방법  (0) 2022.04.14
HTML 시멘틱태그(sementic tag)  (0) 2022.04.05
HTML  (0) 2022.04.05
특수 문자 용어  (0) 2022.04.05

2022.04.05

시멘틱태그(sementic tag)?

HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써
사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그

시멘틱태그를 사용하면 좋은점

1. SEO 최적화에 유리
2. 웹 접근성에 효율적
3. 유지보수의 용이성

시멘틱태그의 종류

<header>: 머리글, 헤더
<nav>: 네비게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간 위주로 표현
<aside>: 좌측, 우측 사이드 위치의 공간을 의미. 본문 외 부수적인 내용
<section>: 카테고리 별로 섹션을 구분하는 용도의 태그. 같은 테마를 가진 여러개의 콘텐츠의 그룹화
<article>: 기사, 블로그 등 텍스트 위주의 페이지 구성할때 주로 표현
<footer>: 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현
<address>: 작성자나 사이트 소유자의 정보를 부가적으로 담는 기능
<main>: 문서의 중심 주제, 주요 내용
<details>: 주변 문맥에서 표시된 구절의 관련성이나 중요성을 참조 또는 표기 목적으로 표시되거나 강조된 텍스트
<figure>: 이미지, 사진 등 독립적인 컨텐츠
<figcaption>: <figure>요소 설명
<mark>: 현재 맥락에 관련이 깊거나 중요나 부분 강조

'프론트엔드 > HTML' 카테고리의 다른 글

HTML 클래스 속성 작명법  (0) 2022.04.14
구글 폰트, 구글 머티리얼 아이콘 적용방법  (0) 2022.04.14
파비콘(favicon), 오픈그래프(Open Graph Protocol) 적용방법  (0) 2022.04.14
HTML  (0) 2022.04.05
특수 문자 용어  (0) 2022.04.05

2020.04.04

HTML

  • HTML DOCTYPE선언

    <!DOCTYPE html>

  • 문자셋(character set)선언

    <meta charset="UTF-8">

  • 상위(조상)요소: 나를 포함하고 있는 모든 요소로 부모요소도 포함

  • 하위(후손)요소: 나를 기준으로 내가 감싸고 있는 모든 요소

  • 블록(block)타입의 요소

      display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 
해당 라인의 모든 너비를 차지함
  block요소 안에 block, inline 넣을 수 있음
  p, div, h, ul, ol, form 요소는 display 속성값이 블록인 대표적인 요소

  • 인라인(inline)타입의 요소

      display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않음
  요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지
  가로, 세로 사이즈 지정 불가능, 좌우 여백을 적용되지만 위아래 여백은 안됨
  inline요소 안에 block 요소 못넣음
  span, a, img 요소는 display 속성값이 인라인인 대표적인 요소

'프론트엔드 > HTML' 카테고리의 다른 글

HTML 클래스 속성 작명법  (0) 2022.04.14
구글 폰트, 구글 머티리얼 아이콘 적용방법  (0) 2022.04.14
파비콘(favicon), 오픈그래프(Open Graph Protocol) 적용방법  (0) 2022.04.14
HTML 시멘틱태그(sementic tag)  (0) 2022.04.05
특수 문자 용어  (0) 2022.04.05

2022.04.04

* backtick, grave: `
* tilde(틸드): ~
* Exclamation mark(익스클러메이션, 느낌표): !
* At sign(앳, 골뱅이): @
* Sharp, number sign(샵, 넘버, 우물 정): # 
* Dollar sign(달러): $
* Percent sign(퍼센트): %
* Caret(캐럿): ^ (무엇인가의 이상을 가르킬때 주로 사용한다)
* ampersand(엠퍼센드): &
* Asterisk(에스터리스크, 별표): *
* Hyphen, dash(하이픈, 대시, 마이너스): -
* Underscore, low dash(언더스코어, 로대시, 밑줄): _
* Equals sign(이퀄, 동등): =
* Quotation mark(퀘테이션, 큰 따옴표): “
* Apostrophe(아포스트로피, 작은 따음표): ‘
* clone(콜론): :
* semicolin(세미콜론): ;
* comma(콤마, 쉼표): ,
* Period, dot(피리어드, 닷, 점, 마침표): .
* Question mark(퀘스천, 물음표): ?
* slash(슬래시): / (오른쪽 상단에서 왼쪽 하단으로 끝남)
* Vertical bar (버티컬바) : |
* Backslash(백슬래시, 역 슬래시): \ (왼쪽 상단에서 오른쪽 하단으로 끝남)
* Parenthesis(퍼렌서시스, 소괄호, 괄호): ()
* brace(브레이스, 중괄호): {}
* bracket(브래킷): []
* Angle bracket(앵글 브래킷, 꺽쇠괄호): <>

'프론트엔드 > HTML' 카테고리의 다른 글

HTML 클래스 속성 작명법  (0) 2022.04.14
구글 폰트, 구글 머티리얼 아이콘 적용방법  (0) 2022.04.14
파비콘(favicon), 오픈그래프(Open Graph Protocol) 적용방법  (0) 2022.04.14
HTML 시멘틱태그(sementic tag)  (0) 2022.04.05
HTML  (0) 2022.04.05

+ Recent posts

티스토리툴바