eunyo의 it이야기

자바스크립트(Javascript) 소개 자바스크립트란 객체 기반의 스크립트 언어로, 웹 브라우저에서 동작되는 스크립트 언어입니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트(JavaScript)는 동적인 기능을 표현하는 언어입니다. 모든 브라우저에서 지원하며, 다양한 라이브러리 지원되는 언어입니다. 자바스크립트의 요소 ECMAScript ECMA스크립트, 혹은 ES란 ECMA-262의 기술 규격에 따라 표준화된 스크립트 프로그래밍 언어를 말합니다. ECMA는 자바스크립트를 표준화시키기 위해 만들어졌습니다. ECMA는 버전이 여러가지가 있습니다. 현재 ES11까지 나왔으나, 기업에서 가장 선호하는 건 ES6 입니다. * 이유는 react.js와 Vue.js가 ES6 기반으로 만들어졌기 때문입니다..

2021 웹 퍼블리셔 포트폴리오 정리 안녕하세요. 오늘은 어워드 수상작 및 후보분들의 포트폴리오 사이트를 보고, 참고할만한 포트폴리오 사이트를 정리해봤습니다. 1. www.danielspatzek.com/degenesis css 애니메이션 기술이 많이 들어간 사이트. 이펙트가 많이 들어가서 화려해 보입니다. 2. undersight.co/ 퍼블리셔보다는 웹디자이너 포트폴리오용으로 참고하면 좋을 만한 사이트 인 것 같습니다. 사실 이력서에서 충분히 확인 가능한 '자기소개' 같은 것들은 과감히 빼고 작업물만 올리는게 깔끔하고 좋아보입니다. 3. www.4por4.pt/ 페이지 스크롤 효과가 인상적인 포트폴리오 사이트입니다. 애니메이션 기능이 많이 들어가서 화려해보이네요. 애니메이션 기능이 많아서 정신없어 보..

jQuery 요소의 표시와 숨김 jQuery의 show(), hide(), toggle() 함수를 사용해, 선택한 요소를 숨기고, 보여줍니다. 간단하게 이야기하면 요소의 상태값을 display:block, display:none 처리해주는 효과입니다. .show() 선택한 요소를 보여줍니다. 정의 .show()는 선택한 요소를 보여줍니다. .show("시간")은 선택한 요소를 해당하는 시간동안 보여줍니다. 시간은 초 단위로 설정합니다. (숫자로 표현) 시간은 문자(slow, fast)로도 표현 할 수 있습니다. 문법 $("선택자").show(); $("선택자").show("시간"); $("선택자").show("시간", 함수); 예제 $(".btn1").on("click", function(e){ $("...

display 여부에 따라 show, hide jquery를 통해 display block, none에 따라 보여질지 숨길지 여부를 결정하는 방법입니다. 방법 1 if ($("div").css("display") == "none") { $("div").show(); //display :none 일떄 } else { $("div").hide(); //display :block 일떄 } 방법 2 if ($('div').is(':visible') == false) { alert('안보이는 상태 '); } else { alert('보이는 상태 '); } 방법 3 (자바스크립트) var div = document.getElementById('div'); if (div.style.display === 'none')..

if문을 통한 class 존재 여부 확인 하는법 웹에서 jQuery를 통해 html의 객체를 제어하는 경우가 많습니다. 이때, 특정한 상황에서의 이벤트가 필요한 순간이 있는데요. 그때 바로 if, else 조건문을 통한 방법으로 처리해주어야 합니다. 다음은 class 존재 여부를 확인 하는 3가지 방법에 대해 알려드리겠습니다. 1. is 함수 if($("#div").hasClass("active") === true) { // class가 존재함. } else { // class가 존재하지 않음 } 2. hasClass 함수 if($("#div").hasClass("active") === true) { // class가 존재함 } else { // class가 존재하지않음 } 3 .legnth 속성 체크 ..

퍼블리셔 연봉안녕하세요. 저는 이제 2년차 퍼블리셔인 은요입니다.저도 그렇고, 주변에도 그렇고 직종을 바꿀 때 웹디자인/웹퍼블리셔 과정에 많이 관심을 갖더라구요 :)직종을 바꾸시는 분들은 많이 고민이 될 내용 중 하나인 연봉에 대해 알려드리겠습니다. 그리고 이직할 때, 다른사람은 어느정도 받나? 많이 궁금하잖아요.그래서 구글에서 찾아본 실제 웹 퍼블리셔분들이 받는 연봉과, 제가 받았던 연봉에 대해 설명해드리겠습니다.우선 제가 받았던 연봉에 대해 알려드리겠습니다. 1. 신입첫 직장은 '웹 에이전시'였는데 사실상 스타트업과 마찬가지였던 회사였어요.규모가 작고, 자본금도 매우 적던 회사라 이때는 2018년 최저임금이였던 7530원을 기준으로 157만원을 받았습니다.연봉으로 환산하면 약 1887만원이 되겠네요...

스크롤바 CSS로 스타일 변경하는 방법 브라우저의 높이보다 콘텐츠가 길어질때, 브라우저 내에서 스크롤바가 생성됩니다. 이때 생기는 스크롤바의 스타일을 변경하는 방법에 대해 알려드리겠습니다. 하지만, 크롬이 아닌 타 브라우저에서는 최소한의 수준에서 스타일 변경이 가능한 점 참고부탁드립니다. 사이트 전체 스크롤 css 수정하기 ::-webkit-scrollbar { width: 5px; /*스크롤바의 너비*/ } ::-webkit-scrollbar-thumb { background-color: black; /*스크롤바의 색상*/ } ::-webkit-scrollbar-track { background-color: yellow; /*스크롤바 트랙 색상*/ } 실행화면 원하는 영역에 스크롤 css 수정하기 di..

웹 접근성 검사 사이트웹 접근성 마크를 획득하기 위해서는 꽤 많은 비용이 듭니다.* 20페이지 이하 기준으로 120만원재심사의 경우 60% 감면해준다고 하지만 그래도 많은 돈이죠. 그렇기 때문에 웹접근성 신청 하기 전, 웹 접근성에 준수하는 마크업인지 확인작업이 필수적입니다.웹 접근성을 검사, 진단할 수 있는 사이트를 모아봤으니 참고하세요. 1. Open-WAX (chrome.google.com/webstore) 크롬이나 파이어폭스에서 사용하는 플러그인을 다운로드를 통해 사용가능합니다. 사용 방법은, 다운로드 후 퍼즐모양의 아이콘을 누른 뒤, 오픈 왁스를 고정시켜줍니다.그리고 접근성 검사를 원하는 페이지에서 openwax를 실행시켜 줍니다.1 페이지 씩 검사 가능하며, 16개 항목 검사합니다.주요 확인 ..

웹접근성이란? 웹 접근성(web accessibility)이란, 장애를 가진 사람과 장애를 가지지 않는 사람 모두가 웹사이트를 이용할 수 있는 방식을 얘기합니다. 시각장애, 청각장애, 지체 장애 등을 가지고 있는 사람이 '스크린 리더'기나 화면 확대 도구와 같은 웹서핑을 위한 보조기술로 웹을 사용할 때, 원하는 콘텐츠의 내용을 자유롭게 이용할 수 있도록 하는 것이 바로 '웹 접근성' 입니다. '웹접근성 마크' 획득을 위한 프로젝트를 진행한다면, 웹접근성의 가이드와 준수사항을 디테일하게 지켜줘야합니다. 웹접근성마크는 '한국웹접근성인증평가원'에서 심사 후 인증마크를 획득 할 수 있습니다. 심사과정에서는 실제 장애인이 웹서핑을 원활하게 진행가능한지, 그 외에 준수사항을 체크합니다. 심사기준이 엄격하고, 심사비..

반응형 폰트 단위 em/rem css에서 사용되는 단위는 여러 가지가 있습니다. 그중에 오늘은 폰트, 즉 글자의 크기를 결정하는 단위인 em, rem에 대해 알아보겠습니다. 일반적으로 폰트의 크기를 결정하는 단위로 픽셀(px)을 주로 사용합니다. 하지만 픽셀은 절대적인 단위이기때문에 '반응형' 작업하기에는 부적합합니다. 왜냐하면 반응형 분기점 별로 사이즈를 달리해줘야 하기 때문에 수정해야 할 사항이 많기 때문입니다. 그래서 오늘은 반응형에서 유용하게 사용할 수 있는 em과 rem에 차이점과 사용방법에 대해 알아보겠습니다. em과 rem은 '상대 단위'입니다. '절대 단위'인 픽셀과 달리, em과 rem은 기준에 따라 유동적으로 변하는 특징을 가지고 있습니다. 1. rem rem은 웹에서 가장 최상위 요소..