멋사 D+5 Git + HTML + CSS

 

 

Git Branch CLI

git branch flex 브랜치 생성
git branch 브랜치 확인 
git switch flex 브랜치 변경 (flex)
git checkout main 브랜치 변경 (main)
git branch -d flex 브랜치 삭제 (flex)
git checkout -b flex 브랜치 생성+변경 한번에 (flex)

 

ctrl+shift+k 행 삭제

단축키 참고!!

https://demun.github.io/vscode-tutorial/shortcuts/

 

1. 논리적인 마크업

1. 로고 2. 텍스트링크모음 3. 메인메뉴 순서로 마크업하기로 결정 (중요도 순서로)

텍스트링크를 이미지로 쓰면 이슈가 생기니 되도록이면 텍스트로 할 것

왼쪽에 로그인을 저런식으로 설계하면 아이디를 입력하고 다음으로 넘어가면 비밀번호칸이 아니라 로그인버튼으로 넘어감쓰~

 

2. 시맨틱마크업

로고, 텍스트 링크 모음

3. 네이밍

aria-hidden="true"를 설정하면 스크린리더(음성으로 읽기)사용했을 때 콜론을 읽지 않는다.

사용자 접근성에 유의하는 습관을 들이자!

 

Web developer로 Validation 확인 (img태그에서 alt속성을 삭제했을 때)

 

 

 

emmet을 이용하여 빠르게 태그 작성하기

ul.member>li*5>span[aria-hidden="true"]{:}+a[href="/"]

 <ul class="member">
  <li><span aria-hidden="true">:</span><a href="/"></a></li>
  <li><span aria-hidden="true">:</span><a href="/"></a></li>
  <li><span aria-hidden="true">:</span><a href="/"></a></li>
  <li><span aria-hidden="true">:</span><a href="/"></a></li>
  <li><span aria-hidden="true">:</span><a href="/"></a></li>
 </ul>

 

실습 예제 페이지를 보고 대략적으로 css를 어떻게 만들어야 하는지 틀을 잡아준다.

 

 

 

상위 컨테이닝 블록 기준: position:static이 아닌 경우

 

인라인블록:흐름은 인라인, 성격은 블록

 

flex

inline, inline-block 
justify content
position relative absoulte 

reflow repaint

더 공부해서 정리하자..!

 

 

https://fern-metatarsal-954.notion.site/2022_12_02-5-9dcf681707ea4f2bb33c3b09127552f3