[프론트엔드 스쿨 6기] 🗓️ 5월 30일

유동균·2023년 5월 29일

TIL 멋쟁이 사자처럼

프론트엔드 스쿨 6기

목록 보기

5/44

📚 공부한 내용

Git

원격 저장소 가져오기

# 리모트 저장소 클론
git clone https://github.com/seulbinim/basic-html-css.git

# 리모트 저장소 조회
> git branch -r
  origin/HEAD -> origin/main
  origin/complete
  origin/main
  origin/teacher
  origin/training

# 모든 브랜치 조회
> git branch -a
* main
  remotes/origin/HEAD -> origin/main
  remotes/origin/complete
  remotes/origin/main
  remotes/origin/teacher
  remotes/origin/training

# 리모트 저장소 브랜치 가져오기
# git checkout -t <리모트 저장소 이름>
> git checkout -t origin/training
branch 'training' set up to track 'origin/training'.
Switched to a new branch 'training'

원격 저장소 별칭 변경

# remote 저장소 별칭 변경
> git remote -v
origin  https://github.com/seulbinim/basic-html-css.git (fetch)
origin  https://github.com/seulbinim/basic-html-css.git (push)
> git remote rename origin upstream
Renaming remote references: 100% (6/6), done.
> git remote -v
upstream        https://github.com/seulbinim/basic-html-css.git (fetch)
upstream        https://github.com/seulbinim/basic-html-css.git (push)
# remote 저장소 추가
> git remote add origin https://github.com/ryudg/basic-html-css.git
origin  https://github.com/ryudg/basic-html-css.git (fetch)
origin  https://github.com/ryudg/basic-html-css.git (push)
upstream        https://github.com/seulbinim/basic-html-css.git (fetch)
upstream        https://github.com/seulbinim/basic-html-css.git (push)

push

git status
git add .
git commit -m "commit message"

# push 저장소 별칭 확인!!!
git push origin training

pull

# pull 저장소 별칭 확인
git pull upstream teacher

HTML

Semantic Markup

시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것이다.

검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 SEO에 유리하다.
웹 접근성 측면에서, 스크린 리더를 이용하는 시각장애 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있게 해준다.
단순한 <div> , <span> 으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 더 좋다.

meta 태그

새로운 표준의 HTML

HTML4.01, XHTML1.0 과 HTML5 의 차이점

새롭게 등장한 콘텐츠 모델
콘텐츠 모델의 카테고리

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html> <!-- 버전에 대한 명시가 없다. WHATWG HTML Living Standard -->

웹페이지의 정보를 설명하는 데 사용되는 태그.
메타 태그는 브라우저나 검색 엔진과 같은 웹 서비스에 의해 사용된다.
<base>, <link>, <script>, <style>, <title>, <base>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.

...

  <head>
    <!-- 기존 방식 (HTML 4.01, XHTML1.0) -->
    <!-- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> -->
    <!-- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> -->
    <!-- HTML5 charset 설정 방식 -->
    <meta charset="utf-8" />

    <!-- 
      Internet Explorer 브라우저가 웹 페이지를 표시하는 방식을 지정 
      IE=edge 값은 Internet Explorer 브라우저가 최신 버전의 렌더링 엔진을 사용하여 웹 페이지를 표시하도록 지시
      이 값을 지정하면 Internet Explorer 브라우저가 이전 버전의 렌더링 엔진을 사용하여 웹 페이지를 표시하는 데 발생할 수 있는 호환성 문제를 방지할 수 있다.
    -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    <!-- 반응형 디자인을 위한 viewport meta tag 선언 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- SEO를 위한 제작자, 키워드, 설명 등 정보를 명시  -->
    <meta name="author" content="작성자" />
    <meta name="keywords" content="문서의 키워드" />
    <meta name="description" content="문서의 설명" />

    <!-- 3초 후 새로고침 시도 -->
    <!-- <meta http-equiv="refresh" content="3" /> -->

    <!-- Naver 블로그, 카카오톡 미리보기 설정 -->
    <!-- 오픈그래프 Open Graph, 웹 페이지의 정보를 소셜 미디어 플랫폼에 제공하는 데 사용되는 태그 -->
    <meta property="og:title" content="콘텐츠 제목" />
    <meta property="og:url" content="웹페이지 URL" />
    <meta property="og:type" content="웹페이지 타입(blog, website 등)" />
    <meta property="og:image" content="표시되는 이미지" />
    <meta property="og:title" content="웹사이트 이름" />
    <meta property="og:description" content="웹페이지 설명" />

    <!-- 기준 URL 설정 및 파비콘 설정 -->
    <base target="_blank" href="./favicon/" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="icon" type="image/png" href="favicon.png" />

    <!-- 문서의 제목 -->
    <title>메타데이터</title>

    <!-- 스타일(Embedded Style) -->
    <style>
      body {
        background: #000;
        color: #fff;
      }
    </style>
  </head>

...

SEO(Search Engine Optimization)
검색 엔진 최적화 즉, 검색 엔진에서 특정 키워드로 검색했을 때 내 웹사이트가 상위에 노출되도록 하는 작업이다.
SEO를 잘하면 내 웹사이트에 유입되는 트래픽이 많아져서 마케팅 효과를 얻을 수 있는 장점이 있다.

SEO를 잘 하기 위해서는
1. 키워드 연구: 검색 엔진 사용자들이 사용하는 키워드를 분석하고, 해당 키워드를 포함한 적절한 콘텐츠를 작성한다.
2. 메타 태그 최적화: 웹페이지의 메타 태그(제목, 설명, 키워드 등)를 최적화한다.
3. 모바일 최적화: 모바일 기기에서 웹사이트가 효과적으로 표시되고 사용할 수 있도록 최적화한다.

OG(Open Graph)

https://ogp.me/

Open Graph(OG)는 웹 페이지의 정보를 소셜 미디어 플랫폼에 제공하는 데 사용되는 태그다.
OG 태그를 사용하면 소셜 미디어 플랫폼에서 웹 페이지의 제목, 설명, 이미지 등이 올바르게 표시된다.

HTML Entity
HTML 예약어(reserved characters)
  - non-breaking space (빈칸)
& - ampersand (&)
" - double quote (")
' - single quote (')
< - less-than sign (<)
> - greater-than sign (>)
© - copyright (©)

제목과 문단

제목
HTML에서 이미지나 텍스트를 제목의 의미로 제공하고자 할 경우 <h1> ~ <h6>요소를 사용할 수 있으며 <h1> 요소가 가장 높은 수준의 제목을 의미하며 <h6>으로 갈 수록 개요 수준이 낮아진다.

문단
문단의 경우 <p> 요소를 사용하며 텍스트, 이미지, 입력 서식 등 연관성이 있는 콘텐츠로 구성할 수 있

html 숨김 컨텐츠
HTML 숨김 컨텐츠는 사용자에게 보이지 않도록 숨겨진 HTML 요소

숨김 컨텐츠는 다양한 목적으로 사용될 수 있는데 예를 들어,

숨김 컨텐츠는 검색 엔진에 의해 인덱싱되지 않도록 숨겨진 텍스트를 포함하거나
스크린 리더를 사용하는 사용자에게만 표시되는 텍스트를 포함하거나
사용자가 특정 조건을 충족할 때까지 표시되지 않는 텍스트를 포함할 수 있다.

이미지와 피규어

대체 텍스트를 잘 쓰기

<img src="./images/webcafe-logo.png" alt="web naver" />

naver는 없는 영단어이기 때문에 스크린리더가 네이버라고 읽을것 이라고 장담할 수 없다.
따라서 대체 텍스트를 작성할때 영어로 표현할 수 없다면 한글로 표현한다.
또한 불필요한 특수문자는 사용하지 않도록 한다.

figure & figcaption

<div>
  <img src="./images/likelion-black.png" alt="" />
  <span>Like Lion</span>
</div>

<figure>
  <img src="./images/likelion-black.png" alt="" />
  <figcaption>Like Lion</figcaption>
</figure>

figure 태그는 이미지와 이미지에 대한 설명을 포함하는 데 사용된다.
따라서 위의 div로 묶는 대신 figure 사용하면 이미지에 대한 설명을 제공할 수 있다.
이는 검색 엔진이 이미지를 이해하는 데 도움이 되고, 사용자에게 이미지에 대한 정보를 제공하는 데에도 도움이 된다.

스프라이트 기법

여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법

서버로의 요청 횟수를 줄여 사이트 로딩 속도를 줄여준다.
많은 이미지 파일을 관리하는 대신 하나의 스프라이트 이미지 파일만 관리하면 된다.
일부 이미지, 로고의 수정이 필요한 경우 유지 보수가 까다롭다

비순차 목록(Unordered List)

순차 목록(Ordered List)

...
<body>
    <h1>카페 W</h1>

    <h2>카페 W 카드</h2>
    <p>소중한 사람에게 마음을 전하는 가장 좋은 방법</p>
    <ul>
      <li>카페 W만의 특별함을 경험할 수 있는 최상의 선택 음료</li>
      <li>카페 W 커피와 완벽한 어울림을 자랑하는 푸드</li>
      <li>사용한 시도와 디자인으로 가치를 더하는 상품</li>
    </ul>

    <h2>카페 W 인기 강좌</h2>
    <ol>
      <li>UI 구조 & 디자인</li>
      <li>모바일 웹 UI 제작 실습</li>
      <li>UI 인터랙션 주니어</li>
      <li>React 프로그래밍</li>
    </ol>
  </body>
...

섹션 관련 요소 / 메인 요소

...
  <body>
    <!-- 네이티브 요소 -->
    <header>본문 헤더</header>
    <nav>내비게이션</nav>
    <main>
      <section>
        <header>섹션 헤더</header>
        <footer>섹션 푸터</footer>
      </section>
      <article>
        <header>섹션 헤더</header>
        <footer>섹션 푸터</footer>
      </article>
    </main>
    <aside>부가 콘텐츠</aside>
    <footer>본문 푸터</footer>

    <!-- 컨테이너 요소 -->
    <!-- WAI-ARIA의 role 요소를 이용 -->
    <div role="banner">본문 헤더</div>
    <div role="navigation">내비게이션</div>
    <div role="main"></div>
    <div role="contentinfo">본문 푸터</div>
  </body>
...

Landmark
랜드마크 역할은 스크린 리더와 같은 보조기술 사용자에게 웹페이지의 구조를 명확히 식별하기 위해 사용될 수 있으며,
보조기술 사용자에게 랜드마크 역할을 통해 효과적인 키보드 탐색을 지원하여 웹 페이지의 탐색 경험을 향상시킬 수 있다.

role은 ARIA 속성 중 하나이며 요소의 역할을 명시해주는 속성이다.

컨테이너 요소

HTML 요소를 묶어주는 컨테이너(의미를 가지지는 않음) 요소로 <div>, <span> 요소가 있다.

블록 컨테이너 요소 <div>
인라인 컨테이너 요소 <span>

<div>
  <span>L</span> <span>I</span> <span>O</span> <span>N</span>
</div>

유동균

다음 포스트

[프론트엔드 스쿨 6기] 🗓️ 5월 30일