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

유동균·2023년 5월 29일
TIL멋쟁이 사자처럼
0

프론트엔드 스쿨 6기

목록 보기
5/44
post-thumbnail
post-custom-banner

📚 공부한 내용

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)
&nbsp; - non-breaking space (빈칸)
&amp; - ampersand (&)
&quot; - double quote (")
&apos; - single quote (')
&lt; - less-than sign (<)
&gt; - greater-than sign (>)
&copy; - 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>
profile
유동균
다음 포스트

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

post-custom-banner

0개의 댓글