• webmini life skin Ver 1.4.1 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기

Front-end116

728x90
[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)는 웹 콘텐츠와 ..
[웹접근성]슬라이더, 프로그레스바에 'aria-valuenow' 속성을 사용하자 aria-valuenow는 ARIA(Accessible Rich Internet Applications) 속성 중 하나로, 접근성 향상을 위해 사용됩니다. 이 속성은 주로 슬라이더, 프로그레스바, 스핀버튼 같은 위젯에서 현재 값을 나타내는 데 사용됩니다. 이는 시각 장애가 있는 사용자들이 화면 읽기 소프트웨어(screen reader)를 통해 위젯의 현재 상태를 이해할 수 있도록 돕습니다. 사용 예제슬라이더 (Slider):프로그레스바 (Progress Bar): 60%관련 ARIA 속성aria-valuemin: 위젯에서 가질 수 있는 최소값을 나타냅니다.aria-valuemax: 위젯에서 가질 수 있는 최대값을 나타냅니다.aria-valuetext: 시각적으로는 값이 아닌 텍스트로 상태를 설명할 ..
[CSS]display:flex; 일때 자식 요소들에 'order'로 좌우측 위치 변경하기 display:flex; 로 감싼 레이아웃에서 좌측(컨텐츠영역), 우측(사이드영역)이 존재할때 CSS만으로 위치를 바꾸는 방법입니다.float 를 사용했을때는 float:left 혹은 float:right 만 변경하면 가능했지만, display:flex; 로 할경우는 다음과 같이 작성해줘야합니다. 레이아웃 예시HTML 사이드메뉴 내용 레이아웃은 위와 같다고 가정했을때입니다. CSS.container { display: flex;}.contents { width: calc(100% - 30%);}.aside { position: sticky; top: 0; right: 0; align-self: flex-start; ..
[CSS]부모요소가 display:flex; 일때 사이드 메뉴에 position:sticky; 를 적용해보자 부모요소가 display:flex; 일때 사이드 메뉴가 sticky 로 동작하게 하는 방법입니다.구조는 다음과 같습니다.HTML 컨텐츠 내용 사이드 메뉴(이부분이 position: sticky; 가 동작할 영역) 스크롤 하면 aside 영역이 sticky 가 될 부분입니다. CSS.container{ display:flex;}.contents{ width:calc(100% - 30%); /* aside 영역 만큼 빼줌 */}.aside{ align-self: flex-start; /* 이부분 추가 */ position: sticky; top: 45px; right: 0; width: 30%;} flex 컨테이너 내에서 자식 요소들은 기본..
[CSS]반응형 사이트 calc() 함수와 예제 및 계산 방법에 대해 알아보기 calc()는 CSS에서 동적인 계산을 가능하게 하는 함수입니다. 이를 통해 길이, 백분율, 수치 등을 혼합하여 스타일을 동적으로 설정할 수 있습니다. calc() 함수는 CSS에서 다양한 상황에 유용하게 사용됩니다.calc() 함수의 사용법calc() 함수의 기본 구문은 다음과 같습니다:property: calc(expression);여기서 expression은 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 등의 산술 연산을 포함할 수 있습니다. 사용 예제1. 너비 계산부모 요소의 너비에서 특정 픽셀 값을 뺀 너비를 설정하고 싶을 때 사용합니다..container { width: 100%;}.content { width: calc(100% - 20px);}이 예제에서 .content 요소..
[SCSS]SCSS 기본 문법과 예시 calc 포함 SCSS(Sass)는 CSS를 더 쉽게 작성하고 관리할 수 있도록 돕는 CSS 전처리기입니다. SCSS는 Sass의 구문 중 하나로, CSS와 매우 유사한 구문을 사용합니다. SCSS의 기본 문법을 몇 가지 예시로 설명하겠습니다.1. 변수 (Variables)변수를 사용하여 재사용 가능한 값을 정의할 수 있습니다.$primary-color: #3498db;$font-stack: Helvetica, sans-serif;body { font-family: $font-stack; color: $primary-color;}2. 중첩 (Nesting)중첩을 사용하여 CSS 선택자를 계층적으로 작성할 수 있습니다.nav { ul { margin: 0; padding: 0; list-style:..
[CSS]input 입력 필드가 자동완성될 때의 스타일을 정의 입력 필드 자동완성이 안나오게 하는 방법과 해당 요소에 스타일 정의하는 방법과 설명입니다. 자동완성 기능을 해제하는 방법 autocomplete='off' 를 넣게 되면, 자동완성 기능이 해제되며, 삭제하면 기본 활성화 됩니다.  자동완성 기능 스타일 정의input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 1000s ease-in-out 0s; -webkit-box-shadow: 0 0 0 30px inset transparent; -webkit-text-fill-color: #00..
[Accessibility]웹접근성 "한국형 웹 콘텐츠 접근성 지침 2.1"과 "한국형 웹 콘텐츠 접근성 지침 2.2" 강화된 항목 한국형 웹 콘텐츠 접근성 지침인 KWCAG (Korean Web Content Accessibility Guidelines)는 시간이 지남에 따라 업데이트되어 개정판이 발표되었습니다. 여기서 "한국형 웹 콘텐츠 접근성 지침 2.1"과 "한국형 웹 콘텐츠 접근성 지침 2.2"의 차이를 요약하면 다음과 같습니다: 최신 웹 표준 및 기술 대응: KWCAG 2.1은 초기 버전으로, 주로 HTML, CSS, JavaScript 등의 기술을 기반으로 합니다. 반면 KWCAG 2.2는 보다 최신의 웹 표준 및 기술에 대응하도록 업데이트되어 있습니다. 예를 들어, 미디어 콘텐츠의 접근성, 동적 콘텐츠의 관리, 사용자 경험의 향상 등에 대한 추가적인 지침이 포함되어 있습니다.기술적 요구사항의 확대: KWCAG 2.2는 ..
반응형