👩‍🎤 프론트엔드

[Javascript][Node.js] Github actions를 이용해서 README 자동 업데이트하기

프로그래머스 코딩 테스트 문제를 풀고 깃허브 레포지토리에 풀이를 올리는 스터디를 진행하고 있었다. 스터디는 아래와 같이 진행된다. 1. 문제를 풀고 통과한다. 2. 통과된 풀이를 [레벨/문제명.js] 파일 형식으로 푸시한다. 3. README에 풀이 링크를 추가한다. 매일 하루에 한 문제 이상을 푸는 것을 목표로 했고 위와 같은 행동이 반복되던 찰나 .. 어쩐지 엄청난 귀찮다🤔 2번만 수행하면 3번 과정이 자동으로 수행될 수 없을까? README를 작성하는 방식은 아래와 같다 README 작성하기 무작정 풀이 파일을 올리게 되면 문제 개수가 많기 때문에 나중에 다시 찾아보기가 어렵다. README에 테이블로 정리해놓으면 어느 문제인지 + 어떻게 풀이했는지를 쉽게 확인할 수 있다. - 번호 - 문제 개수를..

[CSS] Negative margin (음수 마진)

Negative Margin (음수 마진) 1. static인 경우 1. top, left에 음수 마진을 적용한 경우 See the Pen Untitled by Minkyung Shin (@minkyung00) on CodePen. top 또는 left 방향으로 해당 요소가 이동한다 첫번째 요소에 margin-top: -50px를 하면 두번째, 세번째 요소도 함께 top 방향으로 50px만큼 이동한다 2. right, bottom에 음수 마진을 적용한 경우 See the Pen Untitled by Minkyung Shin (@minkyung00) on CodePen. 다음 요소를 right 또는 bottom만큼 이동시킨다. 즉, 해당 요소와 다음 요소가 겹치게 된다 첫번째(top에 음수마진)과는 달리 ..

display, position, float 속성 간의 관계

Normal flow (일반적인 흐름으로 배치되는 경우) Normal flow란 순차적으로 박스가 배치가 되는 경우다 Normal flow에서 박스들은 formatting context를 따릅니다. CSS 2.2 에서는 table, block, inline이 해당된다 블록 레벨의 박스는 block formatting에 속하고 인라인 레벨의 박스는 inline formatting에 속하고 table formatting은 https://www.w3.org/TR/CSS22/tables.html 여기에 작성되어 있다 Block formatting context float, position이 absolute인 요소, 블록 박스는 아니지만 inline-block, table-cell, table-caption과 같..

웹 접근성을 고려하여 콘텐츠 숨기기 - sr-only / off-screen / a11yHidden

sr-only 스크린리더에서는 읽을 수 있지만 화면에서는 보이지 않게 하는 방법이다. 주로 부트스트랩 클래스명으로 사용된다. 왜 사용할까? sr-only는 screen reader-only라는 뜻으로 주로 부트스트랩 클래스명으로 사용된다 부트스트랩 공식문서에 따르면, 스크린 리더는 우리가 모든 input 요소에 label을 포함하지 않는다면 어려움을 겪을 것이다. 이러한 인라인 폼들을 위해 우리는 .sr-only 클래스를 사용함으로써 label을 감출 수 있다. 우리는 항상 스크린 리더를 고려하여 웹 접근성을 신경써야하기 때문에 label을 아예 지우는 것보다 이러한 클래스를 사용하여 label을 감추는 방법을 사용해야한다. 즉, 우리는 접근성을 위해 스크린리더가 읽을 수 있도록 콘텐츠를 숨겨야한다 어떻..

<main> / <section> vs <article>

주요 컨텐츠를 나타낸다 👆주의 main태그는 말 그대로 중심이 되는 내용을 의미하기 때문에 한 번만 사용하는 것을 허용한다 을 여러개 사용하는 경우, DOM에는 main이 하나여야한다 나머지는 hidden 속성을 사용해야한다 구조적으로 옳은 main 요소를 사용해야한다 ✌️구조적으로 옳은 main 요소란? 조상 요소가 html, body, div, 접근가능한 이름이 없는 form, autonomous custom 요소으로 제한된다. 더보기 A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous c..

HTML5의 콘텐츠 모델(Content Models)

HTML5의 콘텐츠 모델이란? 인라인 요소, 블록 요소로 구분했던 태그를 각 태그별로 비슷한 성격끼리 그룹화한 것이다 콘텐츠 모델은 자식 요소에 들어올 수 있는 태그가 제한되어있다 1. Sectioning Root 계층구조로 구분되지 않고 독립적인 콘텐츠로 분리된다 계층구조: , 아웃라인에 영향을 주지 않는다 , , , , , 2. Metadata 문서의 정보를 나타내는 메타데이터, 스타일 요소, 스크립트 요소를 나타낸다 웹 브라우저에 직접적으로 표시되지 않는다 문서와 문서간의 관계를 설정한다 , , , , , , 3. Flow 에 들어가는 대부분에 요소가 해당된다 , , , ( 요소의 자손인 경우), , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,..