프론트엔드스쿨_1day TIL

Don't forget the code for your dream! ·2021년 11월 1일

&&CSS front end html tag 개발자 멋쟁이사자처럼 부트캠프 어흥 프론트엔드스쿨

멋쟁이사자처럼_ 프론트엔드스쿨_ TIL ✏️

목록 보기

3/30

첫 수업이 시작되었다!

기대 이상이었다.

금일 수업은 주식회사 위니브 대표이자 제주코딩베이스캠프의 운영진인 이호준 대표님이 진행하셨다.

아주아주아주 친절하게
아주아주 쉽게
아주아주 천천히 진행하셨다.

백여명을 그렇게 끌고 가기가 절대 쉽진 않을 것이다.
그 인고의 시간과 쪼개고 쪼개 세밀하게 알려주는 모습이 존경스러웠다.

물론 그 시간동안 중급자 이상들이 견뎌내야할 고민도 있었을 테지만,
~~진정한 부트캠프라는 생각이 들었다.~~

나 역시 HTML 과 CSS를 독학하며,
수 많은 어려움들에 부딪혔었다.

동기들이 질문을 할 때,
어떻게 해야 쉽게 대답해주지?
고민을 하고도 최대한 어렵게 대답하고 있다는 사실을 깨달아 버렸다. 😅

쉽게 설명하지 못하면, 제대로 알고 있다고 보기 어려운데 .. 🦁
이번 기회에 질문에 대해 대답을 계속 해보는 연습을 해야겠다!

(~~다들 타자를 엄청 빨리쳐서 맘속으루만,,,하게된다~~ 😅)

집단지성의 힘으로

따듯한 시간이었다.

저마다 기술 공부를 한 이력이 천차만별이다 보니 걱정이 되었는데, 서로 밀어주고 끌어주고 위로하고 응원하고 따듯한 시간이었다.

~~정말 좋은 프로그램이야..~~

멋사의 대표 Notion을 쭈욱 보는데,
운영진 분들이 얼마나 고생하고 애를 써서 과정을 기획했을지가 훤히 보인다.

이 프론트엔드 스쿨에 들어온 게 감개무량할 정도로.

그래서 오늘 뭐 배웠냐면

HTML Living Standard 배웠어.

마지막 페이지 따라 만드는 Mission 수행할 때 알았지.
여전히 article 과 section 을 먼저 나누지 않는 나의 습관을.
복습하러 다시 가보자! ☀︎

1day

Information

1) GitHub

. button누르면 GitHub dev 나와서 웹에서 바로 VSC페이지로 수정 가능 !

2) VSC

user snippets : en -> ko 설정하면 매번 언어 설정 바꿀 필요 없다!

3) Emmit & 글자 tag

<body>
    <h1></h1>

    <!-- **h1{hello world}** -->
    <h1>hello world</h1>

    <!-- **h1+p** -->
    <h1></h1>
    <p></p>

    <!-- **h1{hello}*10** -->
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1 id="one"></h1>
    <h1 class="one"></h1>

<!-- **table>(tr>(td*4))*3!** -->
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<!--**lorem/ lorem*5/ lorem3-**->
Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Omnis animi autem, 
<hr>
provident, molestias earum unde et tempora illum 
cupiditate <br>
magnam atque totam nemo! <br>
Totam earum temporibus laboriosam error nam. 
Deleniti!

<!--**img:z**-->
<img src="" alt="" sizes="" srcset="">

<!-- **anchor a[href='www.naver.com'**]-->
<a href="www.naver.com"></a>

<!-- **p[a='value1' b='value2' c=1]**-->
<p a="value1" b="value2" c="1"></p>

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

<!-- **h$*6 / h$*6{hello world}** -->
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
<!-- **Move to site** -->
<a href="#three">click</a>
    <a href="./test.png" download>click</a>
    <p id="one">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem hic quis labore impedit porro, voluptatem obcaecati error, laborum velit explicabo ad unde sint culpa rerum similique aliquam maxime facilis vero.s fuga tempore.</p>
    <p id="two">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem hic quis labore impedit porro, voluptatem obcaecati error, laborum velit explicabo ad unde sint culpa rerum similique aliquam maxime facilis vero.</p>
    <p id="three">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem hic quis labore impedit porro, obcaecati quasi suscipit magni perspiciatis fuga tempore.</p>

<!-- **Quotes/ cite : 출처** -->
<blockquote>
    <p>제발 그만해.. </p>
    <cite> 비밀의 화원 </cite>
</blockquote>

<p><q>제발 그만해.그만!</q>라고 맹이 소리쳤습니다.<p>

<!-- **있는 그대로 표현해줌 code에 사용 / <code>도 사용** -->

<pre> 
   def hello():
      print('hello world)'
   hello()
</pre>

</body>

들여쓰기 내어쓰기 crl+[ ctrl+]
보통 ID가 붙어있는 요소로 이동하는것: a 태그
스크립트를 이용하는것은 ID가 붙어있지않은 요소로 이동하거나 스크롤에 이벤트를 달아주고 싶을때 사용
Semantic tag 권장하는 이유 1
SEO 고려한 HTML 작성하기
발표자료를 HTML JS로 만드네 쥑이네🦁

4) Contents group tag

<!-- **ol>li*4 내용 입력 시 tab key 누르면 바로 이동!** -->
     <ol>
        <li>html</li>
        <li>css</li>
        <li>JavaScript</li>
        <li>bootstrap</li>
        <li>node & react</li>
      </ol>
<!-- ol Alpabet으로 -->
<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javacript</li>
    <li>Jquery</li>
    <li>Bootsrap</li>
</ol>

<!-- **dl / dt/ dd** * div로 감싸면 안됩니다!-->
<dl>
    <dt>HTML</dt>
    <dd>마크업 언어입니다.</dd>
</dl>

shift +화살표 : 문장 드레그

option + 화살표 : 위아래 문장 전체 이동

ctrl+ / : 전체 주석

alt + click : 여러개 클릭

ctrl + alt+ 방향키 : 한번에 작성

5) Media tag

/* add to file img */
<img src="img/a.jpg" alt="img">   

/* add to website img */
 <img src="https://www.paullab.co.kr/images/ceo.png" alt="img">

/* size */
<img width="1000px" height="auto" img src="./canada.jpg" alt="Canada img">

/* ifram_ youtube copy to source code 또는 공유하기 -> embaded   */
<iframe width="1280" height="720" src="https://www.youtube.com/embed/qMwzWk81tVM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
    <iframe width="1000px" height="720" src="http://www.paullab.co.kr"></iframe>