007_HTML, CSS (7/5 - 6)

2주차는 다음 기회에..

  저번 주에는 정말 어마어마한 난이도를 자랑했던 알고리즘과 자료 구조 수업을 들었다. 듣긴 들었는데.. 엘리스 측에서도 이야기를 했지만 절대 1주일 안에 그 내용들을 내 것으로 온전히 체득할 수 없는 수준이라 블로그에 쓸 수가 없었다 😭  Today I learned 가 아닌 Today I listened 였기에 2주차 내용은 나중에 공부를 좀 더 하고 적어볼까 한다. 우선은 힘든 2주차가 지나가고 잠시 쉬어가는 주간이 왔다! HTML, CSS, JS는 그래도 엘리스에 들어오기 전에 공부를 조금 해둬서인지 조금은 수월할 것 같다 🚀  여유가 있을 때 미리 예습을 해야지!!

---

🚀  이번 내용은 내가 강의를 들으며 새롭게 알게 된 부분만을 정리하고자 한다.

 

• 선택자에 의한 케스케이딩  :  style > id > class > type  순으로 우선순위가 높다.

• background-repeat  & background-position

• <article> 태그

Emmet

• 강력한 자동완성 기능. HTML 작성 속도를 크게 향상시켜주는 플러그인
• VSCode에서는 기본으로 기능을 제공한다.

    <!-- div*3 -->
    <div></div>
    <div></div>
    <div></div>

 * 를 사용해 같은 태그를 여러개 만들 수 있다.

    <!-- div.box 또는 .box-->
    <div class="box"></div>

 . 을 붙이면 클래스, #을 붙이면 id가 생성된다.

    <!-- div.box.container -->
    <div class="box container"></div>

 여러 클래스를 만들 때 뒤에 .클래스명 을 입력하면 된다.

    <!-- div[attr1="속성1값" attr2="속성2값"] -->
    <div attr1="속성1값" attr2="속성2값"></div>

    <!-- div{Hello, World}*3 -->
    <div>Hello, World</div>
    <div>Hello, World</div>
    <div>Hello, World</div>

 태그 안에 글자를 넣고 싶다면 중괄호를 만들면 된다.

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

 $는 1부터 시작되며 곱해지는 숫자만큼 차례차례 번호와 태그가 생성된다.

    <!-- div{$번 입니다} -->
    <div>1번 입니다</div>
    <div>2번 입니다</div>
    <div>3번 입니다</div>

    <!-- div{$@-번 입니다.}*4 -->
    <div>4번 입니다.</div>
    <div>3번 입니다.</div>
    <div>2번 입니다.</div>
    <div>1번 입니다.</div>

 번호를 내림차순으로 생성하고 싶을 때 이렇게 쓰면 된다.

    <!-- div>span+a -->
    <div><span></span><a href=""></a></div>