\(@^0^@)/

- 제로베이스 HTML/CSS 과제 드디어 끝냈다! 1-2군데 거슬리는 부분이 있지만, 어떻게해야 좋을지 잘 모르겠어서 우선은 그냥 제출하기로 결정ㅠ 다음에 다른분들은 어떻게 했는지 물어보자! - 유데미 알고리즘 Sliding Window 문제풀이 - 프로그래머스 JS스터디 과제 export default function component ({ initialState, $target }) { const $element = document.createElement('div'); $target.appendChild($element); this.state = initialState; this.render = () => {}; this.setState = (nextState) => { this.state = n..

💥 Icon Font 란? SVG 기반의 Vector 그래픽을 Font 파일화 하여 CSS를 통해서 Icon을 사용하는 방식으로, 수많은 이미지 아이콘을 관리해야 하는 방법과 다르게 단순히 Font 파일과 CSS만 관리하면 된다. 대표적으로는 Material-Icon, FontAwesome 이 있으며, 그 외 여러 프레임워크에서 자체 Icon Font를 지원하기도 함. 지난 5년 동안 FontAwesome의 관심도가 Material-Icon보다 더 높은 것을 볼 수 있음. 👍 Icon Font 장점 1. 하나의 글꼴 파일에 다양한 아이콘을 넣어두고 사용 2. CSS로 확장하여 모든 작업이 가능 3. Vector Graphic이기 때문에 크기 변형에 제한이 없음 4. Unicode 또는 Ligature 사..

- 제로베이스 HTML/CSS 과제 js와 연결해서 active 해주는 코드가 ul을 중첩으로 3 depth까지 넣는 구조라서.... 코드가 한번 꼬이니까 걷잡을 수 없어서 하루 종일 헤맸다ㅠㅠ 역시 이럴 땐 그냥 다 지우고 다시 하는 게 빠른 것 같다. 괜히 붙잡고 있다가 시간만 낭비했어!! 어느 정도 끝나서, 저녁 먹고 또 하면, 계획대로 오늘 안에 끝낼 수 있을 것 같다. 파이팅! 아 근데 카테고리 ul을 중첩으로 넣어, 3 depth까지 스타일링하는 부분에서 js와 연결이 잘 되게 구조화하면 자꾸 html 문법 검사에서 ul 요소는 ul을 자식으로 허용하지 않는다는데ㅠ.. 그렇다고 html 문법에 맞게 수정하면 console에 error throw 하게 구현된 과제라서.. 우선은 문법 검사에서 오..

- 프로그래머스 JS스터디 과제 + 회고 노션에 회고하였음! 간단하게 이번 과제를 통해 배운 것을 적자면 파일 끝에는 항상 개행을 해야 한다. 컴포넌트 구조화 Event Delegate Local Storage - 유데미 알고리즘 Sliding Window 문제풀이 - 제로베이스 HTML/CSS 과제 https://triplexlab.tistory.com/52 Icon Font 정리 🤟 Icon Font 정리 안녕하세요 TriplexLab입니다. 오늘은 벡터 이미지를 Icon Font로 만들어보는 것을 정리해 보겠습니다. figma, Illustrator, sketch 등등의 벡터 이미지를 추출할 수 있는 디자인 툴을 사용하 triplexlab.tistory.com https://icomoon.io/ap..

- 프로그래머스 JS스터디 과제 LocalStorage를 사용할 때 주의점. 한번 래핑 해서 사용! 해당 파일에서 바로 사용하는 것이 아니라, Storage 파일을 생성하여 그 안에 get, set 코드들을 추가. 항상 문제가 생길 수 있는 지점들을 이해하고 주의! 예를 들어 JSON String형태가 아닌 경우 JSON.stringify( ) 메서드를 사용하여 JS 개체 또는 값을 JSON 문자열로 변환. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify 17:50 오후 회고 스터디 (만족도 : 5) 후반에 집중력이 매우 좋지 않았다. 휴대폰을 봐버려서... 반성! - 프로그래머스 ..

- leetcode 배열 알고리즘 복습 + 유데미 알고리즘 다중 포인터 연습 leetcode에서 지난번에 어려웠던 find pivot index 문제를 풀었는데, 이번에도 어려웠다ㅠ 솔루션을 찾아보는데 다들 너무 어렵게 접근해서 코드들이 이해가 안 되고, 쉬운 코드는 reduce를 사용하더라. reduce가 아직 낯설다 보니, 코딩을 할 때 reduce를 써야겠단 생각이 나질 않는다. reduce와 친하게 지내지 내고 reduce라는 메서드가 있다는 것을 항상 염두에 두자! https://leetcode.com/problems/find-pivot-index/discuss/138027/javascript-solution%3A-beats-100.00-runtime-76ms javascript solution..

3일 오후부터 4, 5일까지 재미나게 놀았으니 다시 해보자! - 제로베이스 HTML/CSS 과제 고민한 부분들 웹 접근성을 위한 텍스트 숨김 처리 TIL 작성 https://dev-minju.tistory.com/229 [TIL] 웹 접근성을 위한 텍스트 숨김 처리 h1에 텍스트 마크업은 하지만 화면에는 보이지 않고, 스크린리더에서만 읽을 수 있게 스타일링하고, 화면에는 텍스트 대신 이미지를 배경으로 설정하여야 한다. 이렇게 구현해야 되는 이유를 정 dev-minju.tistory.com 17:50 오후 회고 스터디 (만족도 : 6) 후반부에 조금 집중을 못했고, TIL을 작성하면서 과제를 하다 보니 생각보다 시간이 많이 흘러서 계획한 것들을 다 달성하지 못하고, 몇개를 내일로 미뤄야 했다ㅠ 근데 내가 ..

h1에 텍스트 마크업은 하지만 화면에는 보이지 않고, 스크린리더에서만 읽을 수 있게 스타일링하고, 화면에는 텍스트 대신 이미지를 배경으로 설정하여야 한다. 이렇게 구현해야 되는 이유를 정확히는 모르겠지만, 아마도 스크린리더로 웹 접근성을 준수하고 싶지만, 화면에는 이미 만들어진 svg를 넣어주는 것이 더 효율적이라는 생각 때문인 것 같다. 이미지를 넣고 스타일링으로 디테일을 잡아주는 부분들은 수월했지만, 막상 텍스트를 없애려니 어떻게 없애는 것이 좋은 방법일지 모르겠어서 찾아보니, 생각보다 많은 사람들이 "웹 접근성을 위한 텍스트 숨김 처리"를 고민하고 있었구나..!! 시도해본 방법들 1. display: none 혹은 visibility: hidden 보통 제일 생각해보기 쉬운 게 display: no..

- 제로베이스 HTML/CSS 과제 하이퍼링크에서 새 탭으로 브라우저를 열도록 target="_blank" 할 경우, 오프닝 사이트에게 부분적인 액세스를 제공하여 해당 페이지에 다음 액세스를 허용하고 변경하므로, 자바스크립트를 통해 악성 코드 또는 피싱 사이트에 노출될 수 있으므로 보안에 매우 취약함. 따라서 링크에 rel="noopener"를 추가하여 객체가 window.opener 요청을 함께 보내지 않도록 해야 한다. Firefox는 noopener를 지원하지 않으므로 noreferrer를 추가해야 함. 결론적으로는 rel="noopener noreferrer" https://learntutorials.net/ko/html/topic/254/%EC%95%B5%EC%BB%A4-%EB%B0%8F-%ED..

- 제로베이스 HTML/CSS 과제 미션 3, 85% 구현, 기본적인 것들은 다 구현했는데 캐러셀과 가운데로 배치가 관건인 것 같다. 미션 1, 2에서는 가운데 배치해도 위에 헤더와 타이틀 부분이 왼쪽으로 움직였는데 어째선지 이번 스타일링에선 가운데에서 꼼짝도 하지 않는다. 구조를 다시 한번 뜯어보고 원인을 파악해보자! 17:50 오후 회고 스터디 (만족도 : 7) 몇몇 마크업 하는 부분들이 헷갈리고, 스타일링 flex부분도 조금 애를 먹어서 진도는 예상했던 것보다 많이 못하였지만 그래도 집중도는 괜찮았어서 7점으로 하겠음. - 제로베이스 HTML/CSS 과제 85% 구현한 줄 알았는데, 알고 보니 오후에 한 70% 했었나 보다 ^^ 이제야 90% 정도 구현한 것 같다. 아직 가운데 배치와 캐러셀은 해결..