오늘은 그동안 자료구조한다고 쓰지 못했던 html과 css공부를 해보았다. 다음주 목요일날 동기들 앞에서 나에 대해서 발표를 해야하는데, ppt로 준비를 해오라고 했지만.. ㅋㅋ
그래도 웹 개발자가 되기 위해 공부하는데 ppt보다는 웹사이트를 만들어서 발표하는게 공부도 되고 더 나을 것 같아서 웹사이트로 준비를 하려고 한다.
오늘은 기본 구조만 잡았다.
BEM
<div class="testimonial">
<img src ="" alt class="testimonial__avatar">
<div class="testimonial__speech-bubble">
실제로 내가 쓴 코드 중 일부인데, 이번에는 이름을 지을 때 무조건 BEM 방식을 사용했다.
B: block, E: element, M: modifier의 약자로 주로 이름을 쉽게 구분 짓기 위해서 사용된다.
프로젝트를 할 때는 코드가 굉장히 복잡해지기 때문에 처음 이름을 지을 때 막 짓게 되면 나중에 정말 많이 힘들 것이라는 이야기를 듣고 BEM을 연습하기로 했다.
따로 해볼 기회가 없었기 때문에 이번 기회에 연습을 해보았다.
CSS root 변수
그 다음은 css 중에서도 유용하게 쓰이는 root 변수인데, 이것도 알고는 있지만 사용해본적이 없어서 이번 기회에 사용해 보았다.
:root {
--color-blue: #73aace;
--color-yellow: #fff7d1;
--color-orange: #feb546;
--color-black: #000000;
/* Font size */
--font-large: 48px;
--font-medium: 28px;
--font-regular: 18px;
--font-small: 16px;
--font-micro: 14px;
/* Font weight */
--weight-bold: 700;
--weight-semi-bold: 600;
--weight-regular: 400;
/* Size */
--size-border-radius: 4px;
/* Annimation */
--animation-duration: 300ms;
}
위에 코드도 마찬가지로 실제 사용한 코드의 일부를 가져왔다.
이번에 root를 처음 써봤는데 정말 편했다. 앞으로도 꼭 쓸 것 같다.
그동안 자료구조를 하고 Class 생성자 함수를 배우고, node.js 를 배우면서, 이전에 배웠던 기본 개념을 많이 놓친 것 같아서 자기소개를 준비할 겸 html과 css를 공부해보았다.
그동안 까먹은 개념들도 있어서 이 기회에 복습하길 잘 한것 같다!
👊 내일의 TIW(today I Will)
자기소개 준비