Front-end Dev.
-
TIL 04. 레이아웃 구현 프로젝트Front-end Dev./HTML_CSS 2021. 11. 14. 23:39
조.미.진 개발 공부를 시작한 지 2주 차 되다. 멋사 프론트엔드 스쿨 레이아웃 과제를 통해 마크업 구현과 CSS 연습을 했다. 간단한 레이아웃 구현을 하면서 생긴 질문들과 배운 것들을 적어보려고 한다! 아직 손이 너무 느리고 개발 머리가 빠릿빠릿하게 돌아가지 않아서 잘 따라가지 못할까 봐 두려운 마음이 있지만! 부정적인 생각에서 벗어나 내 주변에 감사할 일에 집중하려고 노력하고 있다! 같은 목적을 갖고 불철주야로 서로 힘써서 도와주는 동료들과 함께하니 지금 하는 과정이 정말 너무 좋고 같이 공부할 수 있어서 감사하다💛 1. 시맨틱 한 코드를 위해✨ 1) 이번 과제는 독립적인 콘텐츠를 나타내는 article 태그로 전체 박스 구조를 잡아야 한다. 이번에 div를 최대한 안 쓰려고 main, section..
-
TIL. CSS 설계 기법Front-end Dev./HTML_CSS 2021. 11. 13. 01:51
기대하고 기대하던 CSS 설계 기법을 학습했다. 저 이제 class명 고민 그만할래요..✋ 마크업에서 기준없이 class명을 정하다보니 오래 걸리는 것과 기억하기 힘든 것이 문제였다. CSS 설계 기법으로 BEM을 알게 되어서 이제 좀 더 클린한 마크업이 되길 기대하고 있다. ✅ 우선 방법론에는 크게 3가지가 있다. 1. OOCSS 2.SMACSS 3.BEM 그 중에 3번째 방법론인 BEM에 대해 먼저 정리를 한 후 나머지 2가지 방법론을 다뤄보겠다. BEM (Block Element Modifier) - 러시아에 있는 얀덱스(Yandex)사가 만든 설계방법이다. - HTML, CSS의 클래스의 설계 규칙이다. - OOCSS와 같은 모듈기반의 방법을 뿌리로 한다. ✅ 기본규칙 ▶ 원활한 가중치 계산을 위..