Front-end Dev./HTML_CSS
-
Select 태그 내 아이콘 선택이 안될 때Front-end Dev./HTML_CSS 2022. 4. 4. 22:09
👉 CSS 이벤트 제어 속성을 사용하자 pointer-events : none; ... .select-group { position: relative; } .select-group .ic-caret { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); ... } ic-caret(아이콘)는 position: absoulute를 줬지만 select 태그는 positon 속성을 주지 않아서 static 상태이다. ic-caret이 select 태그를 덮어버린 상황이여서 아이콘을 아무리 클릭해도 select를 인식하지 않았다. pointer-events : none; cursor 포인터의 pointer 누르는 것과 관계없는 아이콘에 적..
-
2일차 - 퍼블리싱 스터디 기록Front-end Dev./HTML_CSS 2022. 1. 2. 23:16
은정 멘토님이 진행하시는 퍼블리싱 스터디에 참여하게 되었다. 배우면서 헷갈리는 것과 피드백받은 내용 위주로 기록하려고 한다! 2일 차에는 네이버 홈페이지, 회원가입, 가입정보 입력 페이지 마크업 연습 코드 리뷰 위주로 스터디가 진행되었다. 배운 내용을 잘 정리해서 올리고 싶지만 우선 기록이라도 하는 것에 목표를 두고 있다! nav 태그 한 사이트에 편하게 이동할 수 있게 만들어줌 사이트 내 탐색하는 버튼으로 nav를 사용 외부 링크로 이동할 때 묶는 방법으로 사용 X ex) 쥬니어네이버, 해피빈은 같은 회사지만 다른 서비스, 외부 링크 main 태그 안에 nav 태그가 들어가지 않음 시각적으로만 바라봐선 안됨 label 태그 사용하지 않을 경우 접근성이 확 떨어짐 1) 시각적으로 텍스트 클릭이 안됨 2)..
-
TIL 05. CSS 단위 (em, rem, px) 정리Front-end Dev./HTML_CSS 2021. 11. 15. 23:32
평소 헷갈리던 단위 개념인 rem, em, px 단위를 정리해보려 한다. CSS 공부를 하면서 어떤 상황이든 px을 사용하곤 했는데, 디자인 의도에 따라 단위의 사용 목적이 바뀐다는 것을 알게 되었다. 오늘은 상대적 단위인 rem, em에 대해서 더 알아보고자 한다. 1. rem (root em) : 루트 요소(html)의 폰트 크기를 기준으로 사용하는 단위. font-size를 조절하는데 유용하게 사용된다. 사용자가 브라우저 폰트 크기를 설정한 경우 rem도 영향을 받는다. 루트 요소의 폰트 크기를 62.5%로 지정한 후 rem을 사용하는 방법은 1 rem = 10px이 되어 계산하기 편하다. 계산을 편하게 하기 위해서 Html에서 font-size를 10px으로 설정한 후, 모든 요소에 1 rem =..
-
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와 같은 모듈기반의 방법을 뿌리로 한다. ✅ 기본규칙 ▶ 원활한 가중치 계산을 위..