2024/0639

728x90
[잡담]웹퍼블리셔(Web Publisher)와 프론트엔드 개발자(Front-End Developer)의 역할 - 과거와 현재 이야기를 하기에 앞서 과거를 거슬러 올라갈 필요가 있다.여기서 과거란 웹퍼블리셔라는 말(직종)이 생기기 전후를 말한다. 과거에 비해 현재는 분명하게 IT직군에 웹퍼블리셔라는 직종이 뚜렷해졌지만, 아직도 Front-end 개발자와 헷갈려하시는 분들이 있어 정의가 필요할듯하다. 어떤 분야에서 어떤 일을 하던 본인이 해야 할 일은 알고 있어야 할 것이 아니던가. 웹디자이너를 시작으로 현재까지 웹퍼블리셔로 일하면서 그동안의 경험담을 적어보고자한다. (과거 개인적인 이야기가 있어서 꼰대 느낌이 날 수도 있으니 감안하고 읽어주길 바란다. 할 얘기가 많아서 내용이 상당할 것이다.)웹디자이너의 역할그렇다.웹퍼블리셔가 생기기 전에는 웹디자이너가 웹퍼블리셔의 역할을 했었다.그때 당시 모뎀에서 인터넷으로 넘어가는 세대이기에..
[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..
[사이트]사이트 제작시 필요한 도구 모음 제공 사이트 'sitero' 사이트 제작시나 편리한 도구 모음을 제공해주는 곳이 있어 소개하고자 합니다.https://sitero.co.kr/ 사이트로(SITERO)필요한 도구를 가장 편리하게 개발하여 사이트로 만들었습니다.sitero.co.kr  서비스되고 있는 도구백분율 계산기 색상 코드 변환 폰트 단위 변환 웹접근성 명도 대비 검사 CSS로 삼각형 만들기 CSS 애니메이션 만들기 퇴직금 계산기 연차 계산기 사이트 제작시 자주 사용하는 것들과 회사생활에 궁금한 (퇴직금계산,연차계산기)등을 제공하는데 UI도 편리하게 정리되어있습니다.
[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..
[운영일지]웹미니 블로그 Ver10.0 코드 및 CSS정리 웹미니 블로그 Ver10.0로 업데이트 완료. 업데이트 내역1. 사용하지 않는 코드 정리 및 수정 (접근성 일부추가)2. CSS (float -> display:flex) 형태로 변경3. 기본폰트스타일 변경('Noto Sans DemiLight' --> Pretendard)4. 전체적인 스타일 미세하게 변경(색상,여백등..)  레이아웃 코드 변경- float로 되어있던 속성을 display:flex;로 변경
[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; ..
반응형