[🦁 TIL 5일차] 5월 30일

근듀·2023년 5월 29일

FE 6기 TIL

프론트엔드스쿨 TIL

목록 보기

5/30

1. Git branch

✔️ 전체 브랜치 조회

git branch -r

✔️ 로컬 저장소 브랜치까지 전부 조회
git branch -a

✔️ 원격저장소에 있는 브랜치, 로컬저장소로 가져오기
git checkout -t 원격저장소명/브랜치명

✔️ 원격저장소 별칭 변경하기
git remote rename 현재별칭(origin) 새로운별칭

✔️ 새로운 원격저장소 등록하기
git remote add origin 원격저장소주소

✔️ 현재 설정된 원격 저장소 나열하기
git remote -v

✔️ 원격 저장소 업데이트 하기
git remote update

✔️ 브랜치 병합 취소
git merge -abort

2. HTML

⭐ HTML 표준 3가지 -> HTML 5, HTML 4.01 , XHTML 1.0

✔️ 선언하는 방식이 다르다.

XHTML <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
HTML 4.01 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5 <meta charset="UTF-8"/>

✔️ DTD(Document Type Difinition) 문서 타입 정의

<!DOCTYPE html>

버전이 명시 되어 있지 않은 이유는 5 버전부터는 DTD가 변하지 않기 때문이다.
그래서 해당 선언은 '최신 버전의 html 문서다' 라는 선언이다.

✔️ html의 콘텐츠 모델

Velog 정리본

🔻

<a href="#">
	멋쟁이사자처럼
	<button>바로가기<button>
</a>

문법적으로 맞을까? ❌
디자인적으로는 랜더링이 가능하지만 콘텐츠 모델 문법적으로 틀린 것이다.
a, button 모두 둘다 Click 요소로 Interactive 모델이라서 중첩되서 사용해서는 안된다.

🔻

<ul>
	<h1>heading</h1>
	<li>item</li>
	<li>item</li>
	<li>item</li>
	<li>item</li>
</ul>

문법적으로 맞을까? ❌
ul태그는 li만 자식으로 인정한다.

✔️ 아웃라인 알고리즘

HTML5에서는 정보 구조를 명확할 수 있도록 '아웃라인 알고리즘(Outline Algorithm)이라는 개념이 도입되었다.
아웃 라인 알고리즘은 웹 페이지의 정보 구조를 판별할 수 있는 개념으로 책의 목차와 비슷

✔️ API

다양한 API(Application Programming Interface)의 추가
자바스크립트 기술을 좀 더 편리하게 이용할 수 있도록 다양한 API를 지원하고 있다.
ex) Web Storage, Web SQL Database , Application Cache ...

❓API = 프로그램들이 서로 상호작용 하는 것을 도와주는 매개체

✔️ HTML 마크업

태그 (Tag)
* 시작태그와 종료태그로 나누어져있다.
- 종료태그를 가지지 않는 요소는 'Empty element'라고 한다.
속성 (Attribute)
* 시작태그는 필요에 따라 속성을 가질 수 있다.
- 여러 개의 속성을 선언할 수 있는데 속성과 속성은 공백으로 구분한다.
- 값을 가지지 않는 속성은 '논리 속성'이라고 한다.
요소 (Element)
* 시작태그와 종료태그 모두를 포함하여 'Element'라고 한다.

✔️ 코딩 컨벤션

NHN 코딩 컨벤션

마크업 개발을 잘 해야 모든 브라우저에서 콘텐츠를 손실 없이 빠르고 쉽게 사용자에게 전달할 수 있다.
이러한 조건을 만족시키기 위해 마크업 개발자가 지켜야할 표준을 제시한다.

✔️ 검색 엔진 최적화(SEO)

Open Graph Protocol

웹 사이트와 웹 페이지를 검색엔진이 쉽게 발견하고 읽어가서 색인하고 상위노출시켜 사용자들에게 많이 노출 될 수 있게 해주는 작업

발견(Discovery) 읽다(Crawling) 색인(Indexing) 상위노출(Ranking)

3. Meta 데이터 관련 요소

✔️ meta태그 설정

영어 외에 다른 언어도 존재한다는 것을 명시

<meta charset="UTF-8" />
반응형 디자인을 위한 viewport, meta tag 선언
<meta name="viewport" content="width=device-width, initial-scale=1" />
설정한 시간이 지나면 새로고침을 해달라고 선언
<meta http-equiv="refresh" content="5">
MS IE 의 호환성 보기 설정
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

✔️ base 태그 설정

기준 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 태그 설정

HTML 문서 제목 설정
head에서 가장 중요한 태그
타이틀은 유니크하게 지어야 한다.

<title>메타 데이터</title>

✔️ style 태그 설정

별도 CSS파일이 아닌 html 문서 내에서 선언 가능하다.

  <style>
    body {
      background-color: #000;
      color: #fff;
    }
  </style>

4. Section 관련

✔️ 제목과 단락

태그는 계층구조를 꼭 지켜야한다.

<h1> <p>

✔️ 순차, 비순차 목록

<ol> <ul> <li>

✔️ 이미지와 피규어

<img> <fiqure> <figcaption>

✔️ 섹션

<section>

✔️ 컨테이너

요소를 묶어주는 것
의미를 가지지 않는 컨테이너 요소
<div> <span>

5. 회고

와 진도를 갑자기 엄청 많~이 나갔다. 다행히 놓친 부분은 없지만 필기하면서 들으려니 조금 빠듯했다. 나름 여유롭게 이듬 강의도 시청해서 여유로울 줄 알았는데 전혀 아니다. 진짜 잠 줄여가면서 공부해야하는 시기가 시작된 것 같다ㅠㅠ😭😭 많은 진도를 나가다보니 저번주보다 머리에 들어온 내용이 별로 없다. 배우면 배울 수록 느끼는거지만 HTML은 정말 어려운 것 같다. 쉽다고 생각했던 과거의 나 반성해... 🩹

그리고 수업시간 중간에 질문하는 것들이 많아졌다. 다행히 아직까지는 질문을 받은 적이 없지만 정신 똑바로 차리고 강의를 들어야 한다. 완전 흘려서 말씀하시는 것도 마지막 복습시간에 물어보시니 진짜 집중해야된다. 그리고 나중에 면접을 위해서 말끝을 흐리지말고 틀리더라도 자신감있게 대답하는 습관을 길러야겠다. 다른 사람에게 내 의견을 말하거나 글을 적을 때 '~인 것 같다.' 라는 식의 말을 자주 사용하는데 안좋은 습관이다. 이미 알고있었지만 고쳐지지 않는다. 현실판 주기자🤐

수업받으면서 가장 많이 느낀 점은 따져야 할 문법이 정말 많다는 것이다. 웹 접근성을 가장 중요시 생각하며 잊어먹으면 안되는 속성들이 너무 많다.. 그리고 강의 중간중간 도움이 되는 말을 많이 해주셨다.

"프론트엔드스쿨 4개월은 완성이 아닌 성장의 방향성을 잡아줄 수 있는 기간이다"
"다각도로 생각하는 개발자가 되야한다"
"기본기의 근육을 다져놔야 한다."

힘들 때마다 되새기면서 공부하자. 그리고 가장 큰 고민!!
공부할 시간이 너무 부족하다. 배우는 내용이 8이라면 공부할 시간은 2밖에 안되는 느낌..
고민해서 최대한 시간을 활용할 수 있는 방법을 찾아보자
수업 초반에 전 시간 내용을 복습하는 시간 짧게라도 가지니 그 시간도 잘 활용해보자

근듀

프론트엔드 개발자 취준생입니다.

이전 포스트

[🦁 TIL 4일차] 5월 27일

다음 포스트