Front-end103

728x90
[웹접근성]웹접근성을 고려한 탭메뉴 만들기 웹 접근성을 고려한 탭 메뉴는 키보드 사용자, 스크린 리더 사용자 등 다양한 사용자들이 접근할 수 있도록 구성해야 합니다.탭 메뉴 구성 요소탭 컨테이너: 탭 메뉴를 감싸는 컨테이너.탭 리스트: 각 탭 버튼을 포함하는 리스트.탭 버튼: 클릭 또는 키보드로 선택할 수 있는 버튼.탭 패널: 각 탭 버튼이 활성화될 때 보여줄 콘텐츠.접근성을 고려한 HTML 구조다음은 웹 접근성을 고려한 탭 메뉴의 기본 HTML 구조입니다. 탭 1 탭 2 탭 3 탭 1의 내용 탭 2의 내용 탭 3의 내용HTML 구조role="tablist": 탭 버튼들을 감싸는 컨테이너로 역할을 지정합니다.role="tab": 각각의 탭 버튼에 역할을 지정합니다.role="tabpanel": 각각의 탭 패널에 역..
[Git]새로운 브랜치를 기존 브랜치에 merge(병합)하기 앞서 새로운 브랜치를 생성하고 기존 브랜치를 새로운 브랜치에 복제하는 방법을 설명했는데요. https://webmini.tistory.com/482522 [Git]새로운 브랜치(branch)에 다른 브랜치 복제하기기존에 만들어진 브랜치를 그대로 가져와서 새로운 브랜치에 복제하는 방법입니다.브랜치 생성, 복제, 푸시하기먼저 복제당할 브랜치 즉, 기존 브랜치에 체크아웃되어있어야 합니다.이해하기webmini.tistory.com 그 후에 새로운 브랜치에서 작업 후 기존 브랜치에 merge(병합)하는 방법입니다.기존 브랜치에 체크아웃먼저, 기존 브랜치에 체크아웃을 합니다.기존 브랜치 = branchA새로운 브랜치 = branchB위처럼 가정할때, 기존 브랜치(복제당한 브랜치) branchA로 체크아웃합니다.gi..
[Git]새로운 브랜치(branch)에 다른 브랜치 복제하기 기존에 만들어진 브랜치를 그대로 가져와서 새로운 브랜치에 복제하는 방법입니다.브랜치 생성, 복제, 푸시하기먼저 복제당할 브랜치 즉, 기존 브랜치에 체크아웃되어있어야 합니다.이해하기 쉽게 기존 브랜치명을 "branchA"라 하고 새로운 브랜치명을 "branchB"라 하겠습니다. 먼저, 기존 브랜치에 체크아웃합니다. (복제당할 대상)git checkout branchA 그 후에 새로운 브랜치를 생성해 줍니다. (branchA 브랜치의 복제를 받을 대상)git checkout -b branchB 여기서 git checkout -b 명령어에서 -b는 "새 브랜치를 생성하고 그 브랜치로 체크아웃"하라는 의미입니다. 이 명령어를 사용하면 새로운 브랜치를 만들고 동시에 그 브랜치로 이동할 수 있습니다. 마지막으로 로..
[SEO]SEO 검색엔진 최적화 기본문서 SEO(검색 엔진 최적화, Search Engine Optimization)는 웹사이트나 웹페이지를 검색 엔진에서 상위에 노출되도록 최적화하는 과정입니다. SEO의 목적은 검색 엔진 결과 페이지(SERP)에서 더 높은 순위를 차지하여 더 많은 유기적(organic) 트래픽을 얻는 것입니다. SEO는 크게 온페이지 SEO(On-page SEO)와 오프페이지 SEO(Off-page SEO)로 나눌 수 있습니다.주요 SEO 최적화 요소1. 온페이지 SEO(On-page SEO)온페이지 SEO는 웹사이트 내부의 요소를 최적화하는 작업입니다. 주요 요소로는 다음과 같습니다:키워드 리서치(Keywords Research): 사용자들이 검색할 때 사용하는 관련 키워드를 찾고 이를 콘텐츠에 포함시키는 과정입니다.메타 ..
[CSS]게임하면서 CSS(flex,grid) 공부해보자 Flexbox Froggyhttps://flexboxfroggy.com/#ko개구리가 수련잎에 올라가는거 도와주는 게임 Flexbox FroggyA game for learning CSS flexboxflexboxfroggy.comGrid Gardenhttps://cssgridgarden.com/#ko당근밭 가꾸는 게임 Grid GardenA game for learning CSS grid layoutcssgridgarden.comFlexboxDefensehttp://www.flexboxdefense.com/적들을 물리치는 디펜스게임 Flexbox DefenseYour job is to stop the incoming enemies from getting past your defenses. Unlike ..
[HTML]PDF 파일 등을 열리지 않고 다운로드 받게 하는 방법 PDF 파일을 브라우저에서 열지 않고 직접 다운로드 하게 하는 방법입니다.  태그의 href 속성과 download 속성을 사용하여 PDF 파일을 클릭했을 때 다운로드할 수 있도록 설정한 것입니다. 기본 형식은 맞습니다. 다만, 태그를 사용할 때 속성 값 주위에 공백이 있으면 안 됩니다. 올바른 형식은 다음과 같습니다.다운로드 download 속성에 값을 주어 다운로드될 파일명을 지정할 수도 있습니다.다운로드
[웹접근성]한국웹접근성인증평가원이 인증한 사이트 목록 지능정보화기본법 제 47조(장애인.고령자 등의 정보통신접근성 품질인증 등) 및 동법 시행령 제3조등에 의거하여 과학기술정보통신부로부터 공인된 인증기관인 (사)한국장애인단체총연합회 한국웹접근성인증평가원이 인증한 사이트 목록을 보시려면 아래 링크에서 확인가능합니다. http://www.wa.or.kr/board/list.asp?BoardID=0006 WA : 한국웹접근성인증평가원 (목록)" data-og-description="" data-og-host="www.wa.or.kr" data-og-source-url="http://www.wa.or.kr/board/list.asp?BoardID=0006" data-og-url="http://www.wa.or.kr/board/list.asp?BoardID=0006..
[Javascript]현재 페이지의 url값을 가져올 때 한글이 들어가있는 경우 현재 페이지의 url값이 한글일경우 한글을 가져오지 못하고 " %EC%BB%A4%EC%8A%" 이런식으로 깨지게 될경우 decodeURL()로 처리하면 됩니다.// 현재 페이지의 URL을 가져오기let url = window.location.href;// URL 디코딩url = decodeURI(url);// 결과 출력 (선택 사항)console.log(url); 코드 설명let url = window.location.href;window.location.href: 브라우저의 현재 페이지 URL을 나타냅니다. window.location 객체는 현재 문서의 위치(URL)에 대한 정보를 제공하며, href 속성은 전체 URL을 문자열로 반환합니다.이 줄은 현재 페이지의 URL을 url 변수에 저장합니다.예..
[CSS]숫자를 자동으로 증가, 감소시키기 위해 'counters' 사용 CSS 카운터(Counter)는 CSS에서 숫자를 자동으로 증가시키거나 감소시키기 위해 사용하는 기능입니다. 이를 통해 목록 항목이나 페이지 번호와 같은 요소에 번호를 매길 수 있습니다. CSS 카운터는 counter-reset, counter-increment, content 속성을 사용하여 설정하고, 스타일을 적용할 수 있습니다.CSS 카운터 설정 방법counter-reset: 카운터의 초기 값을 설정합니다.counter-increment: 카운터의 값을 증가시킵니다.content: ::before 또는 ::after 의사 요소에서 카운터 값을 표시합니다.예제1. 기본 사용법다음 예제는 번호가 매겨진 목록 항목을 생성합니다. First item Second item Third item 이 예제에..
[CSS]transition 와 animation 차이 CSS에서 transition과 animation은 모두 애니메이션을 만들기 위한 속성들이지만, 각각의 목적과 사용 방식에 있어서 다소 차이가 있습니다.Transition (트랜지션)목적: 요소의 상태 변화를 부드럽게 처리하는 것이 주된 목적입니다. 주로 상호작용에 반응하여 요소의 상태가 변경될 때 효과적으로 사용됩니다. 주요 속성:transition-property: 어떤 CSS 속성에 트랜지션을 적용할지 지정합니다.transition-duration: 트랜지션이 일어나는 시간을 설정합니다.transition-timing-function: 트랜지션의 속도 곡선을 정의합니다.transition-delay: 트랜지션이 시작하기 전에 기다리는 시간을 설정합니다.사용 예시:.box { width: 100..
[CSS]CSS 주요 애니메이션 속성들과 설명 CSS 애니메이션을 구성하는 여러 속성이 있습니다. 각각의 속성은 애니메이션의 동작을 세밀하게 조정하는 데 사용됩니다. 여기서는 주요 애니메이션 관련 속성을 설명합니다. 주요 애니메이션 속성들@keyframes애니메이션의 중간 상태를 정의하는 데 사용됩니다.@keyframes는 애니메이션의 이름과, 각 프레임(0%에서 100%까지)의 스타일을 정의합니다.@keyframes animationName { 0% { /* 시작 상태 */ } 100% { /* 끝 상태 */ }}animation애니메이션을 한 줄로 정의할 수 있는 단축 속성입니다. 여러 개의 개별 애니메이션 속성을 포함할 수 있습니다.예: animation: animationName 2s linear 1s infinite alterna..
[Git]프로젝트 Git 사용시 .gitignore 에 제외할 파일,패턴,폴더 추가하기 Git 사용시 형상관리 저장소에 올리지 말아야 할 패턴이나 폴더, 파일들이 있습니다..gitignore 에 제외 목록을 추가하는 방법입니다.  .gitignore 파일은 일반적으로 Git 저장소의 루트 디렉토리에 위치합니다.이 위치에 두면 프로젝트 전체에 적용됩니다. 그러나 특정 하위 디렉토리에 .gitignore 파일을 두어 해당 디렉토리와 그 하위 디렉토리에만 적용되도록 할 수도 있습니다. 위치에 따른 적용 범위루트 디렉토리에 위치:프로젝트 전체에 적용됩니다.프로젝트의 최상위 디렉토리에 .gitignore 파일을 생성합니다.예: project/.gitignore하위 디렉토리에 위치:해당 디렉토리와 그 하위 디렉토리에만 적용됩니다.특정 폴더 내에 .gitignore 파일을 생성합니다.예: project..
[Vue.js]Vue 프로젝트 설치, 생성 및 파일 구조와 디렉토리 설명 1. Vue 프로젝트 생성Vue CLI를 사용하여 새로운 프로젝트를 생성합니다.# Vue CLI가 설치되어 있지 않다면 먼저 설치합니다.npm install -g @vue/cli# 새로운 Vue 프로젝트를 생성합니다.vue create my-vue-app 프로젝트 생성 시, 기본 설정을 선택하거나 커스텀 설정을 사용할 수 있습니다. 여기서는 기본 설정을 선택한다고 가정하겠습니다.cd my-vue-appnpm run serve npm run serve 명령을 실행하면, 로컬 개발 서버가 시작되고 기본적으로 http://localhost:8080에서 애플리케이션을 확인할 수 있습니다. 2. 프로젝트 구조프로젝트 폴더 구조는 다음과 같습니다.my-vue-app/├── node_modules/├── public..
[CSS]CSS에서 사용되는 용어들 기본 용어속성 (Property)스타일링에 사용되는 구체적인 스타일 옵션입니다.예: color, font-size, margin, padding값 (Value)속성에 적용되는 실제 스타일 값입니다.예: red, 16px, 10px, auto선택자 (Selector)스타일을 적용할 HTML 요소를 선택하는 구문입니다.예: div, .class, #id, *고급 선택자속성 선택자 (Attribute Selector)특정 속성을 가진 요소를 선택합니다.예: [type="text"], [href*="example"]가상 클래스 (Pseudo-class)요소의 특정 상태를 스타일링합니다.예: :hover, :focus, :nth-child(2)가상 요소 (Pseudo-element)요소의 특정 부분을 스타일링합니..
[CSS]속성 선택자[class*="string"] 종류 및 예제 속성 선택자(attribute selector)는 HTML 요소의 속성 값을 기준으로 요소를 선택하는 방법을 제공합니다. [class*="string"] 선택자는 이러한 속성 선택자 중 하나로, 특정 부분 문자열을 포함하는 클래스 속성을 가진 요소를 선택합니다. 속성 선택자의 종류와 예제를 좀 더 자세히 설명하겠습니다.속성 선택자 종류 및 예제부분 문자열 포함 선택자 ([attr*="value"])속성 값에 특정 문자열이 포함된 요소를 선택합니다.구문: [attr*="value"]예제:div class="intro-heading">div>div class="main-heading">div>div class="footer-heading">div>div class="content">div>style> [c..
[CSS]@media쿼리와 @container container-type의 차이점 container-type와 @media는 각각 CSS에서 반응형 디자인을 구현하는 데 사용되는 방법들이지만, 이 둘은 서로 다른 용도로 사용됩니다. 아래에서 두 가지의 차이점과 사용 예시를 설명하겠습니다.@media@media는 미디어 쿼리로, 뷰포트(브라우저 창)의 크기나 기기의 특성에 따라 스타일을 적용하는 데 사용됩니다. 뷰포트 너비, 높이, 해상도, 방향 등의 특성에 따라 다른 스타일을 적용할 수 있습니다.주요 특징:뷰포트나 기기의 특성을 기준으로 스타일을 적용합니다.전체 페이지 또는 특정 요소의 스타일을 변경할 수 있습니다.예시:/* 기본 스타일 */body { background-color: white;}/* 뷰포트 너비가 600px 이상일 때 스타일 */@media (min-width..
[CSS]:is와 :where 가상클래스 알아보기 :is() 및 :where() 가상 클래스는 CSS Selectors Level 4 사양의 일부로 도입되었습니다. 이들 가상 클래스는 셀렉터를 보다 간결하게 작성하고, 특정성(특이성) 문제를 해결하는 데 유용합니다.도입 시기:is() 및 :where() 가상 클래스는 2019년경 W3C에 의해 CSS Selectors Level 4 사양의 일부로 처음 제안되었고, 이후 다양한 브라우저에 점진적으로 지원되었습니다.브라우저 호환성이 가상 클래스는 현대 웹 브라우저 대부분에서 지원됩니다. 다음은 주요 브라우저의 지원 정보입니다.Chrome: 88 이상Firefox: 78 이상Safari: 14 이상Edge: 88 이상Opera: 74 이상사용 예시이 가상 클래스는 현대 웹 브라우저 대부분에서 지원됩니다. 다음..
[웹접근성]table 웹접근성 예시와 설명(scope) 웹 접근성은 다양한 사용자, 특히 장애가 있는 사용자가 웹 콘텐츠에 접근하고 사용할 수 있도록 하는 것을 의미합니다. 표(table)를 사용할 때 웹 접근성을 높이기 위해 다음과 같은 예시와 지침을 따를 수 있습니다.다음 표는 2024년 각 분기별 매출 현황을 보여줍니다. 매출액과 성장률이 포함되어 있습니다. /* 표 설명 */ 2024년도 분기별 매출 현황 /* 표 제목 */ 분기 매출액 (백만 달러) 성장률 (%) 1분기 10 5% 2분기 12 20% 3분기 15 25% 4분기 20 33% ..
[웹접근성]html 기본태그에도 역할 속성 (role)을 사용해야할까? role 속성을 명시적으로 추가해야 하는 경우를 살펴보겠습니다. 기본적으로 HTML 요소들은 자신의 태그에 따라 적절한 역할(role)을 가지고 있기 때문에 대부분의 경우에는 별도로 role 속성을 지정할 필요가 없습니다. 하지만 몇 가지 상황에서는 추가적인 role 속성을 사용하여 요소의 역할을 명확히 할 수 있습니다. 결론을 먼저 말하자면, 기본적인 태그에 똑같이 role 을 지정할 필요는 없습니다.1. button 요소사용 예시: 확인추가 고려 사항: 요소는 기본적으로 버튼 역할을 가지므로 일반적으로 별도의 role="button"을 지정할 필요는 없습니다. 단, 특정 상황에서 role 속성을 사용하여 추가적인 의미를 전달할 필요가 있을 수 있습니다 (예: 사용자 정의 버튼 디자인).2. inpu..
[웹접근성]웹 접근성을 높이기 위한 주요 HTML 속성과 ARIA 속성 주요 HTML 속성alt: 이미지의 대체 텍스트를 제공합니다.title: 요소에 대한 추가 정보나 설명을 제공합니다 (툴팁으로 표시될 수 있음).href: 링크의 목적지 URL을 지정합니다.src: 이미지, 오디오, 비디오 등의 자원의 경로를 지정합니다.id: 요소의 고유 식별자를 제공합니다.class: 요소를 스타일링하기 위한 클래스 이름을 지정합니다.style: 요소에 인라인 스타일을 지정합니다.tabindex: 요소의 탭 순서를 명시적으로 지정합니다.type: input 요소의 타입을 지정합니다 (예: text, checkbox, radio 등).name: input 요소의 이름을 지정합니다.ARIA 속성ARIA (Accessible Rich Internet Applications)는 웹 콘텐츠와 ..
반응형