요모조모

🍰 진도 급발진...🍴 아이콘 삽입하기1. web font 사용https://fontawesome.com/start Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com2. 로 이미지 삽입회원가입 3. background로 삽입🍴 그림자 효과box-shadow값 두 개: offset-x(가로축 수평 거리), offset-y(세로축 수직 거리). 요소 박스로부터 그림자의 거리 지정.값 세 번째: blur-radius - 흐림 효과 지정. 값이 높을 수록 커짐(넓어..

🍰 CSS 진도. 천천히 나가 주세요...🍴 숨김 콘텐츠 - overflow, clip-path: 숨겨 놓지만 스크린 리더와 같은 보조 기기에서는 접근 가능(a11y-hidden같은 class명 추천)display: none은 존재하지 않는 것. DOM 트리 상에도 존재하지 않아서 스크린 리더도 읽지 못함.그럼 언제 사용? => 영구적인 none 이 아닐 때. 특정 조건이 활성화 됐을 때 읽을 수 있는 상태로 만들 때.overflow - 요소의 콘텐츠가 너무 커서 블록 서식 맥락(BFC)에 맞출 수 없을 때의 처리법 지정overflow 속성이 효력 가지려면 block level container의 height 설정하거나 white-space를 nowrap으로 설정visible(기본값)hidden: 콘..

🍰 CSS 진도, 과제 리뷰.🍴 텍스트 및 글꼴단위 : 절대 단위 px(픽셀)지정 안했을 때 기본 글자 크기 - 16px글자 크기가 항상 지정된 픽셀로 고정됨: 상대 단위 em, rem, vw, %em - 부모로부터 상속. ex) 2em은 부모 요소 폰트 크기의 두 배rem - html 요소(루트) 기준으로 계산. vw(Viewport Width), vh(Viewport Height) - viewport 기준으로 계산. ex) 50vw는 화면의 절반 차지. 화면을 줄이면 같이 줄어듦.% - 부모 요소에 대한 상대적 크기. font-size, padding, margin에 따라 계산 방법 달라짐.: 넘버(number) 단위숫자만을 값으로 가지는 상대적인 단위.line-height에서 주로 사용 - 줄의..

🍰 CSS 진도를 나갔고 첫 과제를 했다. 총 11시간 정도 걸린 것 같다... 내 이해력 어떡하니... 과제하면서 울고 싶었다. 앞으로 나올 숙제 중 가장 쉬운 걸 텐데.뭘 어째 연습해야지 🍴가상 요소(Pseudo-elements)선택자에 추가하는 키워드선택한 요소의 일부분에만 스타일 입히기 가능::before선택한 요소의 첫 번째 자식 요소로 삽입됨선택한 요소의 시작 부분에 콘텐츠 추가::after선택한 요소의 마지막 자식 요소로 삽입선택한 요소의 끝부분에 콘텐츠 추가 🍴 box-sizing박스 모델에서 요소의 크기 계산 방법 결정하는 속성기본 - content + padding + border + marginbox-sizing 속성에 따라 어떤 부분 포함하는 지 결정 box-sizing: co..

🍰 CSS 진도를 나갔다. 🍴 Web Fonts(웹 폰트)웹 페이지에서 사용되는 폰트컴퓨터에 미리 설치된 기본 폰트 이외의 글꼴 사용 시 웹 서버에서 로드하여 사용해야 함🍴 font-familyHTML에 적용되는 폰트 제어웹 브라우저 표시 시 브라우저는 실행 중인 시스템에서 사용 가능한 폰트 찾을 때까지 font-family 값 목록을 살펴봄body{ font-family: "Noto Sans KR", sans-serif; }🍴 SOP(Same Origin Policy)다른 출처의 리소스 사용을 제한하는 보안 방식🍴  CORS(Cross Origin Resource Sharing)애플리케이션 통합을 위한 메커니즘한 도메인에서 로드 되어 다른 도메인에 있는 리소스와 상호 작용하는 클라이언트 웹 애..

🍰 Figma 특강을 들었다.🍴 디자인에서 중요한 것형태 조합색상 조합 - 60 30 10 RULE(primary, secondary, accent)이 두 가지의 배경 - 강조/비강조 🍴 Figma를 알아야 하는 이유현업에서 링크만 주는 경우 있음디자이너의 의도 파악에 유리 🍴 UI 설계비즈니스 별 서비스 품질일관된 서비스 브랜딩(ex. 이건 누가 봐도 카카오 제품임을 알 수 있게) 🍴 프론트 엔드 개발자는?복잡성 낮추기테스트 코드 구현코드 문서화 작업일관된 UX/UI 구현 🍴 WorkFlow기획자 -> 디자이너 -> 프론트 엔드 개발자 -> 고객개발자가 고객과 가장 가까운 위치 🍴 Figma?2016 ~ 코로나로 급부상강력한 UI 드로잉자바스크립트 기반의 툴웹에 자동저장, 시스템 충돌 ↓ ..

어제 설문조사 내용을 잠깐 볼 수 있었는데, 진도가 너무 느리다는 분들이 계셨어서 그런지 오늘 진도가 정말 정말 빨랐다. 한 챕터를 채 이해하기도 전에 넘어가서 그걸 붙잡고 있으면 다음 것도 놓칠 것 같아서 "일단 보류" 상태의 챕터가 쌓였다. 오늘 회고조 회의를 했는데, 이제부터 TIL을 작성해서 서로 공유하기로 했다. 그래서 그 정리는 일단 노션에 올리고, 거기서 핵심만 뽑아서 블로그에 정리를 할까 한다.   내가 학교 수업 때 HTML/CSS를 들었고, 따로 인터넷 강의도 들었음에도 나에게 생소한 태그들을 많이 알게 되었다. 내가 그 동안 배웠던 건 그냥 모방에 불과했음을 알게 되고... 접근성을 고려한 코드를 항상 고민해야함을 되새긴다.   내일은 특강날이라 피그마를 배운다는데, 한 번도 배워본 ..

한 주가 끝나고 새 월요일이 시작됐다. 오늘부터 스프린트 회고 시간이 생겼다. 동준님이 두 시간동안 이끌어가셨는데, 오늘 한 팀을 뽑으셔서 그 팀원들에게 질문을 몇 개 던지셨다. 근데 들으면서 그 질문에 대한 내 답변들을 생각해봤는데 어찌나 어렵던지... 특히 60여명이 있는 줌에서 공개적으로 답변하려면 식은땀 잔뜩 났을 것 같다. 잘 모르겠어요 만 반복하다 끝났을지도 모른다. 아마 오늘부터 회고조끼리 무언가 규칙을 만들어 시작하거나 하는 시기인 것 같다. 우리 팀은 자습시간에 각자 할 일 하다가 끝무렵에 뒤늦게 내일 회의를 통해 규칙을 정하기로 했다. 회고조가 생기면 다양한 스터디도 해보고 싶었고 다 같이 TIL 공유하기, 각자 공부 어떻게 하는지도 묻고 싶었다. 드디어 내일 그걸 정한다! \^^/  ..

드디어 5일차를 맞이했다. 확실히 8, 9시에 일어나다가 7시에 일어나다 보니 피곤함이 쌓이는 느낌이다. 그래도 규칙적인 생활을 하니까 (의자에 장시간 앉아있다는 점 빼고) 건강한 생활을 하는 것 같아 뿌듯하다. 이번 주에는 중요한 일이 있었다. 바로~~~ 회고조 발표! 나 포함해서 여섯 명이 한 팀이었다. 한 분은 오티날 임시로 짠 팀에서 만났던 분이라 약간 반가웠다. 이 회고조는 앞으로 과정이 끝날 때까지 바뀌지 않는다고 한다. 내가 사교성이 좋은 편은 아니다 보니 많이 걱정되지만 친해졌으면 좋겠다!  🍮 좋았던 것(Liked)학교에서는 실습 위주의 수업이었던 것에 반해, 이 과정은 실습과 더불어 HTML을 바라보는 시각을 넓혀주는 수업이었다. 드디어 회고조가 정해진 것!🍰 배운 것(Learned..

오늘은 드디어 HTML/CSS 진도를 시작하는 날이다. Git으로 한 일주일을 배워도 난 미숙할 것 같은데... ㅠㅠ 심지어 아직 push, pull 부분도 완벽하게 정복하지 못했다. 그리고 한 번 공부했던 파트라 편하게 들을 수 있을 줄 알았더니, 전혀 아니었다. 일반적으로 웹 수업에서 들었던 것과 달리 웹에 대해 더 깊은 설명을 들을 수 있었다.  🍮 좋았던 것(Liked)웹 접근성이나 웹의 역사 등 내가 신경쓰지 않았던 부분의 설명들을 해주셔서 매우 흥미진진했다. 책도 추천 받았는데, 도서관에 없길래 당장 신청했다!git에서 echo 명령어를 이용해 내용을 입력했을 때 개행문자 \n이 그대로 출력되는 일이 있었는데, 다른 수강생 분들 세 분 정도가 같은 일이 발생해서 그 분들께 설명할 때 같이 들..