기존의 전역 스타일링 적용 방식 웹 브라우저의 기본 스타일값을 제거하고 통일성있는 CSS 스타일 적용을 위해 reset.css 파일을 생성하고 index.js에 해당 css를 import 하는 방식으로 사용했다. 하지만 Styled Components라는 CSS-in-JS를 사용하고 있으니 사용 중인 라이브러리를 최대한 활용해서 쓰는 것이 더 효율적일 것이라는 생각이 들었다. 따라서 별도의 css 파일이 아닌 Styled Components에서 제공하는 GlobalStyleds라는 전역 스타일링 방법을 사용했다. Global Style 적용하기프로젝트를 아우르거나 공통적으로 들어가야 할 스타일을 적용할 때 전역적(Globally)으로 스타일을 지정할 수 있는데, 이때 쓰는 방법이 전역 스타일링이다...
1. Extension 설치VS Code에서 ESLint, Prettier Extension을 설치한다. 2. yarn config 설치airbnb 스타일 가이드의 코드 규칙을 적용할 수 있는 yarn config를 설치한다.이때, 패키지가 의존하고 있는 다른 패키지들도 함께 설치해야 하므로 다음의 명령어를 사용해 의존성 패키지들을 확인한다. yarn info eslint-config-airbnb peerDependencies 3. eslint 설치위의 의존성 패키지들과 함께 eslint-config-airbnb를 설치한다. yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-pl..
Textarea📌 멀티라인 일반 텍스트 편집 컨트롤을 나타낸다. cf. 는 간단한 한 단락의 글만 가능하다. 속성autocomplete컨트롤 값이 브라우저에 자동으로 완성될 수 있는지의 여부를 나타낸다. (on/off)autofocus페이지가 로드됐을 때, 포커스를 오버라이드(ex. 사용자가 다른 컨트롤 폼에 타이핑)하지 않는다면, 폼 컨트롤이 입력 포커싱될지 지정한다. 이때, 문서에서 오직 하나의 폼 관련 요소만 이 속성이 지정될 수 있다.cols / rowstextarea의 너비/높이를 지정한다. (CSS에서 height, width로 더 손쉽게 지정 가능)disabled사용자가 컨트롤과 상호작용할 수 없도록 한다.maxlength / minlength사용자가 입력할 수 있는 문자(Unicod..
Radio📌 임의의 그룹 내에서는 여러 값 중 단 하나만 선택할 수 있다. 👉 name : name의 값이 같은 것 중 하나를 선택한다. 👉 value : 선택했을 때 전달될 값을 나타낸다. 👉 checked : 해당 버튼을 선택된 상태로 만든다.radio 버튼은 체크박스 버튼과 달리 선택을 해제할 수 없다. Checkbox📌 사용자가 여러 선택 사항 중에서 하나 이상의 값을 선택할 수 있게 한다. 👉 name : 전달할 값의 이름을 나타낸다. 👉 value : 전달할 값을 나타낸다. value 속성이 생략된 경우 기본 값은 on이다. 👉 checked : 해당 버튼을 선택된 상태로 만든다. Select📌 과 연결해 접근성 향상)"> 특성multiple : 다수의 항목을 ..
기본 구조📌 사용자로부터 인풋(Input)을 받기 위한 태그form 요소 스타일링 시 모든 elements의 유효성을 나타내는 CSS의 :valid와 :invalid 의사 클래스를 사용할 수 있다. 1) action (필수)📌 action="API 주소"해당 form을 처리할 로직이 있는 API의 서버 쪽에 접근 가능한 URL을 명시한다., , 요소의 formaction 특성으로 재정의할 수 있다. [참고] formaction이 제출 버튼인 경우, 제출한 정보를 처리할 URL을 명시한다.URL을 지정한 경우, 버튼의 양식 소유자가 가진 action 특성보다 우선한다.양식 소유자가 존재하지 않으면 영향을 주지 않는다. 2) method (필수)📌 method="GET | POST"양식을 제출..
blockquote📌 인용 내용 어떤 문단이나 내용 전체가 하나의 인용문일 경우 사용한다.q보다 더 많이 사용하는 편이다.주로 들여쓰기를 한 것으로 그려진다.인용문의 출처 URL은 cite 특성으로 나타낸다. q📌 문장 내에 작게 들어가는 인용문이 있을 경우 (별도 블록을 쓰지 않아도 될 짧은 인용문) 사용한다.대부분의 브라우저에서 앞과 뒤에 따옴표를 붙여 표현된다.인용문의 출처 문서나 메시지, URL은 cite 특성으로 나타낸다. [참고] cite📌 저작물의 출처를 표기할 때 사용한다.보통 브라우저에서 기울임꼴로 그려진다. 인용 및 출처 표기 예시 전체가 하나의 인용문으로 로 감싸준다. 태그를 이용해 문단 별로 나눠준다.문서 내 짧은 인용문은 태그를 통해 나타낸다.👉🏼 큰 따옴..
정의 목록을 사용하는 경우 1. 용어를 정의할 때 2. key-value로 정보를 제공할 때 Coffee Black hot drink Milk White cold drink 정의 목록을 사용하는 이유 단순히 용어 정의 시 사용할 수도 있지만 key-value 형태의 정보를 전달 할 때 , 보다 훨씬 더 풍부한 의미를 전달할 수 있기도 하다. 보통 손으로 필기할 때, 어떤 용어에 대한 정의를 나타내는 경우 콜론(:)이나 세미콜론(;)을 사용하곤 한다. 하지만 HTML 문서를 작성할 때는 콜론이나 세미콜론으로 나타낸다고 해서 브라우저가 용어에 대한 정의라고 이해하지 않는다. 그렇기 때문에 브라우저가 이해할 수 있도록 아래의 태그를 사용하여 용어에 대한 정의를 하고 있음을 나타내는 것이다. dl == desc..
ol 📌 Finishing places of contestants not in the winners’ circle: Speedwalk Stu Saunterin’ Sam Slowpoke Rodriguez == ordered list 순서가 중요한 목록 (ex. 요리법, 실시간 목록 등...) 보통 숫자 목록으로 표현된다. 특성 reserved : 내부에 지정한 항목이 역순으로 배열된 것인지 나타낸다. start : 항목을 셀 때 몇 번째 항목부터 시작할 것인지 나타낸다. type : 항목을 셀 때 사용할 카운터 유형을 나타낸다. 👉🏼 a, A, i, l, 1 (기본값) ul 📌 first item second item second item first subitem second item second subi..
이미지 📌 src(source) 이미지 링크 alt(alternative text) 스크린 리더 등을 이용하는 사용자 또는 이미지를 제대로 이해하지 못하는 검색 엔진을 위한 대체 텍스트이다. 해당 이미지를 묘사해주는 내용이 150자 이내로 들어가야 한다. 텍스트 이미지의 경우 해당 텍스트를 반드시 포함해야 한다. 리스트 앞에 나오는 불릿같이 아무 의미 없이 꾸미는 이미지일 경우, 오히려 alt의 속성 값을 비워두는 것이 좋다. 이때, alt의 속성 자체를 사용하지 않으면 비 표준이다! 이미지 alt값이 이미 나온 텍스트와 완전히 동일한 텍스트를 넣는 것은 지양해야 한다. 스크린 리더로 읽을 때 이전 텍스트와 같은 말을 반복하기 때문이다. title 속성은 절대 alt 속성을 대체할 수 없다. title은..
