전체 글 93

웹 접근성(Web Accessibility)과 WAI-ARIA

🍰웹 접근성(Web Accessibility)🍴 모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것.  신체적 조건 - 장애인, 고령자 등을 포함한 모든 사용자 환경적 조건 - 다양한 기기(운영체제, 웹 브라우저 등) 🍰웹 접근성 가이드라인(WCAG) 🍴 Web Content Accessibility Guidelines, 웹 사이트/애플리케이션에서 충족해야 하는 기준 정의.인식 가능하고(perceivable) - ex) img의 alt속성 사용조작 가능하며(operable) - ex) div 사용 시 tabindex="0"이해 할 수 있고(understandable) - ex) 사용 견고 해야 함(robust) - ex) 사용자가 이용하는 모든 기기 및 브..

HTML & CSS 2024.04.30

[멋쟁이 사자처럼 프론트엔드 스쿨] 7일차 4L - HTML, CSS

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

[멋쟁이 사자처럼 프론트엔드 스쿨] 6일차 4L - HTML

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

[멋쟁이 사자처럼 프론트엔드 스쿨] 5일차 4L - git stash, WAI-ARIA

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

[멋쟁이 사자처럼 프론트엔드 스쿨] 4일차 4L - 웹 접근성, HTML의 역사

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

[멋쟁이 사자처럼 프론트엔드 스쿨] 3일차 4L - merge, push, pull

오늘은 3일차! 아침 6시 45분 기상 후 아침 먹고 수업 시작 전 한 시간 동안 어제 헷갈렸던 git 실습들을 진행했다. 두 세 번 하니까 이제야 머릿속에서 정리되는 느낌! 이었건만! 곧바로 헷갈리는 개념들이 다시 주입되었다... 주륵 블로그 쓰고 다시 복습을 하러 가야한다... 🍮 좋았던 것(Liked)수강생 분들이 질문을 많이 하시는데, 강사님께서 해결해주시는 과정을 우리에게 공유해주셔서 나는 두 번 세 번 더 복습하는 효과를 볼 수 있었다.수업 종료 후 7시에 강사님께서 헷갈리는 개념을 한 번 더 설명해주셨다! 그저 빛...첫 스터디 모임! 언제 몇 시에 모일 지 정했다! 내일부터 시작한다! 스터디 처음 해봐서 너무 설렌다...!🍰 배운 것(Learned)CLI 명령어들branch, reset..

[멋쟁이 사자처럼 프론트엔드 스쿨] 2일차 4L - Git CLI

이제 이틀 차인데 벌써 일주일은 된 것 같은 피로... 하루종일 모니터 화면만 들여다보고 있어서 눈도 피로하고... 오늘은 특히나 여러가지 툴을 설치하는데 각자의 실습 환경이 다르다 보니 여기저기서 발생하는 에러를 봐주다 보니 자습시간 없이 9시부터 6시까지 풀로 수업을 진행하였다.  🍮 좋았던 것(Liked)Git 사용법을 언젠가 해야지 해야지 하다가 수업 개강을 맞이했는데 드디어 사용법을 알게 되었다사소한 질문 하나하나 놓치지 않고 챙겨주셔서 질문하는 데 부담없는 환경이었다.이전에 리눅스 시스템 수업을 들었을 때 배운 커널 명령어들이 나름 기억에 남아 있어서 오늘 수업에 도움이 되었다. 🍰 배운 것(Learned)CLI 명령어들Git의 CLI들을 아주아주 많이 배웠다. git init, git a..

[멋쟁이 사자처럼 프론트엔드 스쿨] 1일차 4L - HTML

드디어 멋쟁이 사자처럼 프론트 엔드 스쿨 10기 오리엔테이션 날이 왔다. 열심히 다른 후기들을 뒤져가며 첫 날을 맞이했는데, 듣기론 첫 날 팀을 짜서 무슨 발표를 한다고 들어서 주말부터 긴장하고 있었다.  출석은 8시 50분쯤부터 시작되었다. 수강생이 해야하는 출석은 총 두 종류, QR 출석과 멋사 내의 zoom 출석이었다. HRD-net 어플을 다운받아서 수업 시작 전 띄워주는 QR을 찍어서 입실하고, 중간중간 몇 번의 zoom 출석이 있었다. 그리고 대강 출결, 멋사 소개, 수업 태도 등 공지사항을 듣고 조를 배정받았다.   간단하게 자기소개하고 팀장 정하고 총 10개의 조가 돌아가면서 발표를 하는 것으로 그 날의 오리엔테이션은 끝났다. 3시부터는 HTML/CSS VOD시청으로, 이두희님의 강의였다...

margin/padding/border

CSS 박스 모델에서의 margin과 padding, border란 무엇인가? border - 박스의 테두리 border 생성: 1px solid black 너비, 스타일 색상 순서 border는 block과 inline 모두에 적용 margin - 박스의 경계 바깥의 공간 순서: 위 - 오른쪽 - 아래 - 왼쪽 margin: 5px; /* 상하좌우 모두 적용 */ margin: 5px 10px; /* 위아래 5px10px, 좌우 */ margin: 5px 10px 15px; /* 위 5px, 좌우 10px, 아래 15px */ margin: 5px 10px 15px 20px; /* 위, 오른쪽, 아래, 왼쪽(시계방향) */ padding - 박스의 경계로부터 안쪽의 공간 margin과 마찬가지로 위, ..

HTML & CSS 2024.02.01

Block & Inline

block 다른 요소가 옆에 오지 못 함 inline 다른 요소가 옆에 올 수 있음 같은 줄에 위치할 수 있음(in the same line) block이 inline과 다른 특징 너비와 높이를 가질 수 있음 margin - 박스의 border(경계) 바깥에 있는 공간 padding border block -> inline, inline -> block으로 변경은 어떻게? inline -> block display 속성 변경(기본값은 inline) span { display: block; } block -> inline div { display: inline; }

HTML & CSS 2024.02.01