220830 TIL

들어봤다-> 배웠다->해봤다->다르게 해봤다

VSC 단축키 공부하기

cmd+n -> 새 파일 생성
cmd+s -> 파일 저장
htmlko

각종 단축어

**alt + w  => 문장 드래그하기**
cmd + \ => 토글 보이기(화면 분할)
cmd + o => 파일 열기
cmd + p => 프로젝트 검색
cmd + f => 열려있는 파일 내에서 찾기
cmd + shift + f => 열려있는 전체 프로젝트 내에서 검색
cmd + , : settings
cmd + del => 해당 라인 다 지우기
cmd + 클릭 => 여러줄 입력 
tab + shift => 들여쓰기 취소

그외 단축어들도 공부할 것.
마우스 클릭하면서 시간낭비라고 느끼는 순간 바보임

더 많은 단축어 공부하기
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

emmit 문법

emmit 문법 정리해놓은 사이트

		h1+h1+p -> 태그 3개
        
        h$*6 -> h1부터 h6까지
        
        div.container-$*6 -> container-n 이라는 이름의 케이스 6까지
        div.container-$.row-$*3 
        

        
        div#one.c1.c2.c3 -> ID, class 같이 
        
        ul>li.item$*5 -> ul안에 .item 이라는 li 5개
        
        a{텍스트} -> 텍스트에 a태그 바로 주기
        
        p[a="value1" b="value2"]
        [a='value1' b="value2" c=1]
        
        한글입숨
        <!-- lorem*5는 5개의 문장 -->
        lorem*5
        <!-- lorem5는 5개의 단어 -->
        lorem5
        
        
        table 태그 활용 방법 -> table 태그 어려워서 다시한번 보기
        table>(tr>td{hello}*2)*3
        table>tr*5>tb*2
        table>(thead>tr>th{제목}*5)+(tbody>tr*3>td{내용}*5)+tfoot>tr>td*5
        (div>table>(tr>(td*2))*3)+(footer>p) 

css emmit

 <style>
        p{
            pos -> position
            pos:a -> absolute
            
            t -
            r 
            b
            l
            
            d -> display
            d:f -> flex
            v -> visibility
            
            m -> margin
            matop
            mbot
            mle
            mri
            
            c -> color
        }
    </style>
    </head>

HTML

태그 빈도 사이트 찾아보고, 내가 모르는 태그 있는지 공부해보기

http는 80번이 기본 포트
https는 443번이 기본 포트

<h1></h1> 열기/닫기 태그 있어야 markup!
# markdown 벨로그나 노션에서도 사용함.** 나중에 시간 내서 공부해보기**

확장자 ->
해당 파일을 어떤 소프트웨어와 연결해줄것인가?

시멘틱한 Html을 작성하도록 하기!!
(강사님이 div 남발하지 말라고 하심. 지금까지 내가 만든 수많은 div 밭이 생각남..)

브라우저에서 h1 태그는 한번만 사용함 (왼쪽 상단 로고)

<aside> -> 페이지 주요 내용과 관련 없는 항목 (광고 등)
<section> -> 연관성 있는 문서의 구획을 나누고자 할 때
<article> -> 요소를 직접적으로 감싸고 있을때

<dt> <dd> 태그도 공부해보기

section 태그와 article 태그는 항상 헷갈릴 수 있는 요소.
다음 시간에 다시 말씀 해주신다고 하심

유명 홈페이지 박스로 나눠보고, 어떤 태그 이용했는지 알아보자