eunyo의 it이야기

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은 웹에서 가장 최상위 요소..

벤치마킹 사이트 벤치마킹(benchmarking)이란? 벤치마킹이란 타사를 분석하여 업체의 장점을 배우는 전략을 뜻합니다. 웹디자인이나, 기획을 할때 필수적인 것이 바로 벤치마킹인데요. 디자인에서는 유행이 해마다 바뀌기 때문에 타사의 벤치마킹을 통해 트렌드를 보는 눈을 키우는데 도움이 됩니다. 그래서 오늘은 국내와 해외 벤치마킹사이트에 알아보겠습니다. 국내 사이트 1. 디비컷(dbcut) : www.dbcut.com/bbs/index.php 우리나라에서 아마 가장 유명한 벤치마킹사이트 일거에요. 외국사이트, 워드프레스, 반응형, 모바일 등 여러 카테고리에서 벤치마킹 사이트를 확인할 수 있습니다. 그 밖에 구인구직과, 제작의뢰를 통해 홈페이지제작과 구인, 구직이 가능합니다. 그리고 커뮤니티 게시판이 있어 ..

비쥬얼 스튜디오 코드(VS code)에서 FTP 연결하기 저는 보통 퍼블리싱 작업할때에는 브라켓(bracket), ftp 서버에 업로드할때 혹은 ftp 서버에 올라간 코드를 수정할 때에는 에디터플러스를 주로 사용했는데요. 브라켓은 어도비에서 이제 지원을 안한다고 하고,, 에디터플러스도 유료고,, 해서 찾아보다가 비쥬얼 스튜디오 코드가 확장기능이 참~ 많아서 좋더라구요 :) git도 연동되고, ftp 서버업로드도 된다니! 비쥬얼 스튜디오 코드로 정착할랍니다! 비쥬얼 스튜디오 코드 ftp 설정 방법 우선, 확장 프로그램을 열어줍니다. 그리고 확장프로그램 검색창에서 'ftp-simple'을 검색하여 설치해줍니다. F1 단축키를 누른 뒤, ftp-simple : Config - FTP connection set..

그누보드 설치 및 설정 안녕하세요. 오늘은 그누보드를 설치하는 방법에 대해 알아보겠습니다. 그누보드를 FTP서버로 업로드 하고 나서, 어떻게 해야하는지 모르겠는 분들은 아래의 내용을 확인하시고 따라해주세요 :) 그누보드를 다운로드받고 싶다 하시는 분들은 아래 포스팅을 참고해주세요! [그누보드] 그누보드(gnuboard)란? / 그누보드5 설치 방법 [그누보드] 그누보드(gnuboard)란? / 그누보드5 설치 방법 그누보드(gnuboard)란? 그누보드란 우리나라의 'SIR소프트'에서 개발한 홈페이지용 전자 게시판, 소프트웨어입니다. php 언어로 작성되었으며, 간단하게 '웹 게시판' 솔루션이라고 생각하시면 됩니 eunyoe.tistory.com 그누보드의 설치가 정상적으로 이루워졌다면, 도메인주소.co..

그누보드(gnuboard)란? 그누보드란 우리나라의 'SIR소프트'에서 개발한 홈페이지용 전자 게시판, 소프트웨어입니다. php 언어로 작성되었으며, 간단하게 '웹 게시판' 솔루션이라고 생각하시면 됩니다. 설치가 쉽고 간단하며, 소스 변경이나 유지 관리가 쉽고 또 우리나라에서 개발한 솔루션이다 보니 홈페이지에서 쉽게 정보를 얻을 수 있습니다. 또한, 스킨 게시판이 따로 마련되어있어 따로 개발하지 않아도 원하는 기능을 다운받아 사용하실 수 있습니다. 그리고 무엇보다 '무료'인 점이 가장 큰 장점입니다. 규모가 큰 페이지가 아니라면 그누보드를 사용하는것도 좋은 방법입니다. 그누보드5의 기능 그누보드의 버전은 여러가지가 있는데, 가장 최근 버전은 5입니다. 다음은 그누보드의 사이트에서 제공하는 그누보드5의 기..