eunyo의 it이야기

반응형 웹(Responsive web)이란? 반응형 웹, 반응형 홈페이지란 하나의 홈페이지로 PC, 태블릿, 노트북, 스마트폰(mobile) 등 여러가지 디바이스에서 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하는 웹페이지 접근 기법입니다. 기존에는 PC용 사이트, Mobile용 사이트를 별개로 제작하였지만 최근의 웹사이트는 반응형으로 많이 제작하고 있습니다. 반응형웹의 장점은 PC용 url과 Mobile용 url이 동일하여 사용자 접속을 효율적으로 관리할 수있고 유지보수가 보다 편리합니다. PC와 모바일용 사이트를 별개로 제작한다면, 사이트를 수정할 때 두개의 사이트 모두 수정을 해야했다면, 반응형을 적용한 사이트는 하나의 사이트를 수정하면 PC와 모바일 모두 동일하게 수정되어집니다. 반..

React의 구조 알아보기 프로젝트에 react를 설치하게 되면 여러가지 파일과 폴더가 설치가 되는데요. 직접 프로젝트를 만들기전에 react의 디렉토리 구조와 구성 파일에 대해 알아보겠습니다. react의 작업환경 구축과 프로젝트 설치 방법을 알고싶으시다면 아래 포스팅을 잡고해주세요 :) React 기초 :: 01 작업환경 구축 및 시작하기 React 기초 :: 01 작업환경 구축 및 시작하기 01 React 기초 :: 작업환경 구축 및 시작하기 리엑트를 시작하기 앞서, 다운로드 받아줘야 하는 것이 있습니다. 1. 소스 코드 에디터(Visual Studio code 추천) https://code.visualstudio.com/ Visual St.. eunyoe.tistory.com * 저도 React를..

iframe 콘텐츠높이에 따라 height 조절하기 웹사이트를 만들다보면 iframe이 필요한 상황있습니다. 하지만 iframe으로 콘텐츠를 불러올 때, height 값을 다 불러오지 못하고 스크롤을 생성합니다. 그때 자바스크립트로 높이조절 스크립트를 적어줘야 올바르게 높이를 불러옵니다. 그럼 콘텐츠 높이에따라 iframe을 불러오는 방법을 알아보겠습니다. 기본 코드 html 결과 화면 일반적으로 아이프레임을 사용하면 위와 같은 화면으로 iframe이 불러와지게 됩니다. 그럼, 자동으로 높이 조절하는 방법과 스크롤제거하는 방법을 알아보겠습니다. 높이 조절, 스크롤 제거 방법 html frameborder="0" scorlling="no"로 아이프레임에 기본적으로 생성되는 스크롤과 border를 처리해줍니..

이미지맵 태그(map,area) 이미지맵 태그, 즉 html에서의 map태그는 이미지맵을 만드는 태그입니다. 간단하게 이미지파일(jpg, png)에 링크를 걸어주는 태그라고 생각하시면 됩니다 :) 사실, 요즘에는 잘 사용안하는 태그이기도 하고 사용성이 많지는 않지만, 지도같은 복잡한 이미지에는 여전히 잘 사용하고 있기 때문에 알아두면 좋겠습니다. 이미지맵 태그 사용법 이미지맵의 태그의 기본 구조는 아래와 같습니다. 1. 이미지의 usemap="이름"과 map name="이름"을 통일하게 지정해줍니다. 2. shape="속성값"은 영역의 모양을 의미합니다. - react : 직사각형 - circle : 원형 모양 - poly : 형 영역 - default : 전체 영역 3. coords="정의"는 영역의 ..

CSS 변수 사용하기 CSS 변수란 ? 사용자 지정 변수로 CSS의 속성을 미리 정의해놓고, 여러 곳에서 사용할 수 있는 변수를 의미합니다. 웹사이트에서는 보통 많은 양의 CSS를 가지고 있습니다. color나 size 등의 많은 값이 반복적으로 사용이 됩니다. 이때, CSS변수를 사용해주면 반복되는 코드를 줄일 수 있습니다. 또한, 같은 색상을 여러 곳에서 사용을 했을때 색상의 값을 바꿔야 하는 상황이 온다면 일일이 값을 변경해줘야 합니다. 하지만 CSS 변수를 사용하면 선언해 준 변수의 값만 바꿔주면 되기 때문에 수고로움을 덜을 수 있습니다. 또한, 변수의 명을 따로 지정해주기 때문에 더 직관적이고 가독성있게 코드를 확인할 수 있습니다. " target="_blank" rel="noopener">pa..

익스플로러(IE)의 CSS변수 해결방법 root의 가상 선택자를 통해 css 변수를 사용하는 경우가 있습니다. 반복되는 css 코드 값의 반복을 줄여주기 때문에 코드 관리도 쉽고 유지보수 측면에도 좋습니다. 하지만 우리의 익스플로러는 역시 적용이 안됩니다. ^^ css 변수의 사용법을 모르신다면, 아래의 포스팅을 참고해주세요. eunyoe.tistory.com/entry/CSS-CSS-%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 브라우저 호환성 익스플로러 빼고 다 호환이 되네요 :) 기껏 변수를 통해 적용했는데 ie 때문에 변수가 아닌 새로운 기존의 스타일을 추가하는 건 너무 비효율적이기 때문에 오늘은 간단하게 변수 css를 ie에 적용시키는 법을 ..

저작권 걱정 없는 무료 아이콘 사이트 디자이너라면 꼭 알아둬야 할 무료 아이콘 사이트에 대해 알려드리겠습니다. 디자인을 하다 보면 꼭 필요한게 '아이콘' 인데요. 아이콘을 직접 작업하려면 시간이 오래걸리기 때문에 보통 만들어준 아이콘을 사용합니다 :) 클립아트 코리아와 같은 유료 월정액 서비스를 사용하면 더 퀄리티있는 아이콘을 사용할 수 있겠지만, 유료서비스를 사용할 여건이 안되거나, 원하는 아이콘이 없을 때 아래 사이트에 참고하여 사용해주면 됩니다. 1. 아이콘 파인더 (www.iconfinder.com/) 아마 가장 유명한 무료 아이콘 사이트일거에요. 5,416,656건의 아이콘이 있다고 합니다. 아이콘은 svg와 png로 저장이 가능하고, 이미지 크기별로 저장이 가능합니다. 무료아이콘과 유료아이콘이..

부트스트랩이란 ? 부트스트랩이란 웹 프론트개발에서의 구조를 미리 만들어준 프레임워크입니다. 부트스트랩이란 각종 버튼, 테이블, 입력창 등 여러가지의 css style과 레이아웃 정렬을 class만으로 제어할 수 있습니다. 보통 여러명의 개발자가 각자 맡은 영역을 개발하기 때문에 완성물이 제각각인 경우가 생겨서 이를 통일시키기 위해서 개발되었습다. 부트스트랩을 개발한 사람은 트위터의 직원이였던 'Mark Otto'와 'Jacob Thornton'가 프로젝트의 일관성을 위해 만들어졌습다. css와 Javascript로 만들어져 있으며 반응형도 지원하기 때문에 휴대폰, 태블릿, PC 모두 사용이 가능합니다. 부트스트랩 시작하기 부트스트랩 설치방법 1. 파일을 다운로드 받은 뒤 프로젝트에 삽입 부트스트랩 다운로..

Chart.js로 막대 그래프 그리기 간단하게 표를 그리기 쉬운 플러그인인 chart.js의 막대 그래프(bar chart) 그리는 방법과 옵션에 대해 알려드리겠습니다. chart.js 는 간단한 차트를 그리기에는 용이하지만, chart.js 기본 옵션에 있는 스타일 외의 커스터마이징이 까다롭거나 한정적이라는 단점이 있습니다 :) 저도 사용하면서 몇번 머리가 아팠는데요.. 사용해보고, 홈페이지 찾아 본 여러 막대그래프 예제 올려드립니다. 혹시 다른 필요한 예제가 있다면 댓글남겨주세요 :) 우선, chart.js의 사용법을 모르신다면 아래의 포스팅을 참고해주세요 :) chart.js 시작하기 [차트플러그인]chart.js 시작하기 사용법, 옵션 차트를 사용할 때 사용하기 좋은 플러그인인 chart.js의 ..

VSCode(Visual Studio Code) 확장 프로그램 안녕하세요. 브라켓이 지원종료된다고 하네요 :( 퍼블리싱하기 기능이 좋아서 bracket을 애용했는데 이제는 비쥬얼스튜디오코드로 옮길때가 된 것 같습니다! 이미 익숙해진 것을 옮긴다는 것은 어려운 일이에요 ,, 그래 오늘은 기록할 겸, VSCode의 필수 확장프로그램에 대해서 포스팅해보겠습니다 ! VSCODE 마켓플레이스에서 확장기능 다운로드 받는법 우선, 비쥬얼 스튜디오 코드의 확장프로그램의 위치는 위와 같습니다 :) 검색란에 적어주시면 자동완성되어 밑에 뜨니까 간편해요! 원하는 확장프로그램이 나오면 설치버튼을 눌러주시면 끝이에용 Beautify html, css, javascript, json, sass 정렬 프로그램입니다 :) 내부적으로..