멋사 프론트엔드 스쿨 3기 Day 2

✅ 오늘 기억에 남는 것

일일커밋 하자! 코드의 질 ? 양이 많아지면 자연스럽게 질이 높아진다 - 호준님
남들과 비교하기 때문에 불안감이 생기는 것이다
동기는 재산이다! 😎
HTML cheat sheet -> 인쇄해서 보기

✅ 오늘 배운 것

- VSCode 단축키

나도 맨날맨날 보면서 맥 단축키 마스터해야지!

- emmet 문법

HTML 작성 시 빠르고 편하게 작성할 수 있도록 도와주는 자동완성 기능의 플러그인
VSCode에는 기본적으로 emmet이 내장되어 있음!

나는 에밋을 알고는 있었지만, 엄청 잘 활용하는 편은 아니었다. 처음 배울 때, 정말 쓱- 배우고 지나갔어서 그런가? 몇 개 빼고는 '편하겠다' 는 생각보다 '좀 복잡하다'는 생각이 먼저 들었었다. 지금 생각하면 바보! 오늘 다시 배우니까, 굉장히 매력적이라는 생각이 든다! 에밋,, 너는 참 똑똑하구나? 긴~ 친구는 익숙해지는 데 시간이 좀 걸리겠지만... 훨씬 빠르고 편하니까... 최대한 눈에 발라버려야지 🔥

<!-- h1#one -->
<h1 id="one"></h1> 

<!-- h1.one -->
<h1 class="one"></h1> 

<!-- #one -->
<div id="one"></div> 

<!-- .one -->
<div class="one"></div> 

<!-- h1#one.two.three.four -->
<h1 id="one" class="two three four"></h1>

<!-- h$*6 -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<!-- h${hello}*6 -->    
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
    
<!-- div.container-$.row*6 -->
<div class="container-1"></div>
<div class="container-2"></div>
<div class="container-3"></div>
<div class="container-4"></div>
<div class="container-5"></div>
<div class="container-6"></div>

<!-- div.container-$.row-$*6-->
<div class="container-1 row-1"></div>
<div class="container-2 row-2"></div>
<div class="container-3 row-3"></div>
<div class="container-4 row-4"></div>
<div class="container-5 row-5"></div>
<div class="container-6 row-6"></div>

<!-- table>(thead>tr>th{제목}*2)+(tbody>tr*2>td{내용}*3)+tfoot>td*2 -->    
    <table>
        <thead>
            <tr>
                <th>제목</th>
                <th>제목</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
            </tr>
            <tr>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
            </tr>
        </tbody>
        <tfoot>
            <td></td>
            <td></td>
        </tfoot>
    </table>

 

- 마크업, 마크다운

✍🏻마크업 언어 : 무언가를 기록하고 설명하는 언어. 태그 <> 를 이용해 문서를 작성할 수 있게 도와줌.
✍🏻마크다운 : 텍스트 기반의 마크업 언어로, 쉽게 쓰고 읽을 수 있고 HTML로 변환이 가능. GitHub README 파일이나 노션 등에서 사용. README.md 파일의 .md 가 마크다운이었어!?

# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6

난 이때까지... 노션 쓸 때 /제목1 이렇게 직접 쳐서 썼었는데... 정말 바보 그 잡채... 바로 노션 켜서 ### 까지 연습 갈기고 왔다... 후

- <meta>

해당 문서의 메타데이터를 나타내는 요소

- charset : 문서의 문자 인코딩 상태를 의미함. 보통 UTF-8 로 설정해서 모든 언어를 지원하도록 함.
- name="author" : 페이지를 작성한 개발자의 이름을 나타냄.
- name="description" : 페이지에 대한 설명 정보를 나타냄. 검색 결과에 표시되는 문자를 지정함.
- name="viewport" : 모바일 사용자 화면의 사이즈에 대한 값을 설정.
필수는 아니지만 모바일로 접속하는 경우가 많기 때문에 반드시 넣어주는게 좋음. 아.. 내 티스토리 고쳐야 하는데...
- http-equiv="X-UA-Compatible” : 프라그마 지시문이라고도 함. 브라우저에 어떤 행동을 지시하려는 목적.
X-UA-Compatible 속성값은 IE브라우저에서 페이지를 어떤 형식으로 랜더링할지 지정할 수 있음.
- content='IE=edge' : IE8 버전 이상에서 항상 표준모드로 랜더링 되도록 함.

 

---

오늘 아침에는 모처럼 컨디션이 좋다가, 갑자기 점심 쯤 열이 팍 올라서 급하게 공결 신청했다... 내일 격리 막날인데 왜 안 나아..?
공결 신청은 했지만... 수업은 빠지기 싫어서 카메라 끄고 약 먹고 쿨패치 붙이고 수업 들었다 크크
내일까지는 좀 쉬엄쉬엄... 쉬어가야지...! 앞으로의 여정을 위해서 🔥

그리고 어쩌다 보니 모든 스터디에 다 들어가고 있다... 🤣
기록 | 운동 | 자스 스터디라 별로 부담은 없다! 오히려 좋아!
이대로라면... [모든 동료 분들과 친해지기] 조만간 이룰 것 같다...! 오히려 좋아! 💗


아 맞다 오늘의 기쁜 일!

기다리고 기다리던 회고팀이 생겼다!
나는 뭐든 혼자 보다는 같이 를 좋아하기 때문에... 넘 좋아... 💗