수업
Emmet
p*5 하면 p태그가 다섯개가 생긴다.
(li>a)*7하면 밑에 a 태그가 있는 li태그가 7개 생긴다.
이 것 말고도 단축키도 배웠는데 확실히 생산성이 높아질 듯하다.
table
th th th <- tr
td td td <- tr
td td td <- tr
table>(tr>th*3)+(tr>td*3)*3
밑으로 쓰지만 값은 우측으로 들어간다.
border-collapse: collapse;
-> 충돌되는 구간은 하나로 합쳐주라는 뜻이다. border값을 줄 때, 전체 테이블과, 그 안에 요소들도 다 border값이 들어가는데 그 때 겹치는 부분을 하나로 통합해준다.
table 태그를 쓸 때에는 thead, tbody, tfoot를 생략하지 말고 꼭 써줘야한다.
지금은 안 쓸지라도, JS를 배우게 되면 그 때 사용하게 될 것이다.
블록레벨요소와 인라인 요소
블록 레벨 요소: 욕심쟁이
내 부모가 가진 넓이의 최대넓이를 갖는다.
ex)article, header, nav, section, div...
인라인 요소: 자기 컨텐츠의 넓이 만큼 차지함
ex)span, strong
요소의 레벨 변경
span(인라인) 요소의 display를 block으로 지정해도 그 안에 div를 넣을 수 없음
블록요소 안에는 블록+인라인 모두 가능하다.(다만, 블록요소 안에 블록는 권고되지 않는다.)
인라인요소는 인라인끼리만 중첩 가능하다.
점수계산
id > class > tag 순으로 style 적용된다.
- id : id 선택자는 100점의 가중치를 가진다.
- class, 가상클래스 선택자 : class, 가상클래스 선택자는 10점의 가중치를 가진다.
- 요소, 가상요소 선택자 : 요소, 가상요소 선택자는 1점의 가중치를 가진다.
h1 {color: red}
.yellowgreen {color: yellowgreen}
#four {color: skyblue}
<h1>h1의 첫번째</h1>
<h1 id='two' class='yellowgreen'>h1의 두번째</h1>
<h1 id='three' class='yellowgreen'>h1의 세번째</h1>
<h1 id='four' class='yellowgreen'>h1의 네번째</h1>style 순서에 상관없이!
물론 그렇다고, class 10개가 id 하나와 동일하지는 않다.
"!important"는 쓰지 말자.
생각
내 생산성을 높일 방법을 좀 찾아봐야겠다. 단축키를 좀 외운다거나..!
점수계산은 사이트도 따로 있다는데, 그래도 혼자 어느정도 계산이 될 때까지는 스스로 해봐야지.
느낀점
프론트엔드 개발자는 세세한 부분도 생각하고, 코드를 짜는구나.
동의하지 않습니다에 미리 체크가 되어있어서
동의합니다를 직접 누를수 있게 하기!사용자의 입장에서, 생각할 줄 알아야 할 것 같다.
계획
내가 사용하는 사이트, 서비스에서 프론트엔드 개발자가 생각해야할 부분이나, 생각한 것 같은 부분을 확인하고 기록해봐야겠다.
손코딩을 해보자. 그러면 코드가 좀더 오래 기억 남을 것 같다.
피드백
- 손코딩 후기: 정말정말 효과가 좋다. 내가 막연하게 알고 있는지, 확실하게 알고 있는지도 알게 되고, 복습에도 효과가 좋다. 손으로 써본 코드는 더 잘 기억이난다. 앞으로도 손코딩으로 복습해봐야겠다.
