eunyo의 it이야기

에어팟 첫 출시당시에는 많은 사람들에게 콩나물이라며(...) 비난과 조롱의 대상이였으나, 현재는 애플유저라면 다 가지고 있다고 해도 과언이 아닐 만큼 애플 제품의 스테디셀러입니다. 에어팟이 아마 가장많이 사용되고 있는 무선이어폰이 아닐까 생각이 듭니다. 애플은 올해 차세대 에어팟 모델을 출시할 예정입니다. 지금까지 나온 에어팟3의 정보와 유출된 디자인 가격 등에 대해 알아보겠습니다. 에어팟 3세대 출시일 지금까지의 소문에 의해서는 2021년 3분기 가을 쯤 출시될 전망으로 보고있습니다. 에어팟 3세대 디자인 기즈모차이나에서 공개한 렌더링이미지입니다. 커널형이 아닌 오픈형 이어폰이네요. 에어팟이 기둥이 짧아지고 납작해진 케이스가 눈에 띄네요. 기존 에어팟의 디자인과 에어팟 프로의 디자인이 섞여있는 모습입니..

2021 아이맥 출시 정보 애플은 2021년 4월 20일에 새로운 아이맥 24인치를 공개하였습니다. M1보다 업그레이드 된 M1X 혹은 M2버전으로 나올것이라고 많은 예상이 있었는데, 이와 다르게 그대로 M1이 사용되었습니다. 기존의 27인치가 아닌 24인치로 출시하였고, 완전히 달라진 디자인을 선보였는데요. 현재까지 알려진 아이맥의 정보에 대해 알아보겠습니다. 아이맥 출시일 아이맥은 현재 사전예약을 받고 있습니다. 홈페이지상에서 확인되는 바로는 6월 14일부터 순차배송이 될 것이라고 합니다. 현재 아이맥 사전예약 카드 혜택으로 10% 할인이 진행되고 있으니, 필요하신분들은 사전예약을 하시는게 이득이겠네요! 아이맥 할인 사전예약 2021 아이맥 디자인 이번에 출시한 아이맥은 무려 7가지 색상으로 출시되었..

애플의 스마트태그, 에어태그(AirTag) 출시 정보 애플의 에어태그가 출시되었습니다. 에어태그는 사물추적이 가능한 스마트기기인데요. 이미 삼성에서 사물 추척태그를 출시했었었죠. 지인이 삼성에어태그를 자동차에 두고, 주차했던 자리를 찾는데에 사용하는 것을 봤는데 디테일한 위치는 나오지않았던걸로 기억하는데요. 에어태그는 얼마나 디테일하게 위치추적이 되는지, 또 어떠한 기능을 제공하는지 궁금해집니다. 다음은 에어태그에 대해 정리해봤습니다. 애플 에어태그(AirTag) 가격 에어태그의 가격은 39,000원입니다. 4개묶음으로 구매시 129,000원이라고 하네요. 삼성전자에서 출시한 갤럭시 스마트태그같은 경우에는 2만9700원에 출시되었으니, 에어태그가 약 만원가량 비싼 가격으로 출시되었습니다. 애플 에어태그(..

무료 차트(chart) 플러그인 웹을 제작하다 보면, 차트가 필요한 경우가 종종 있습니다. 간단한 막대그래프같은 경우에는 html, css로 그려내도 되지만, 보통은 chart의 플러그인을 사용하여 구현합니다. 그럼 무료로 사용가능한 차트 플러그인에 대해 알아보겠습니다. 1. chart.js (www.chartjs.org/) 차트플러그인 중에서 유일하게 사용해본 chart.js 입니다. 차트플러그인 중에서 꽤 유명한 편이라 국내에서도, 해외에서도 예제들을 많이 찾아볼 수 있습니다. 간단한 차트를 표현하기에는 좋지만, 커스텀하기가 불편해서 정말 간단한 차트만 그리기 좋은 차트입니다. 2.C3.js (c3js.org/) c3는 생성할 때 각 요소에 일부 클래스를 제공하여, 사용자 정의 스타일을 적용할 수 있..

[CSS] div 가운데 정렬하기 div와 같은 block형태의 태그는 보통 margin:auto를 사용하여 가운데 정렬을 합니다. 텍스트나 inline-block 같은 경우에는 text-align:center를 사용하여 가운데 정렬을 합니다. 그러면 세로 가운데 정렬은 어떻게 해야할까요? 여러가지 방법을 알려드리겠습니다. 1. line-height와 text-align line-height를 사용한 가로, 세로 가운데 정렬은 div안에 있는 텍스트를 가운데 배치할때 주로 사용됩니다. line-height의 값 : 감싸고 있는 부모태그의 높이값과 동일하게 해주시면 됩니다. text-align의 값 : 가운데 배치를 뜻하는 center로 적용해줍니다. [결과화면] [html] 가운데 정렬 [CSS] div..

CSS flexbox css에서의 flexbox는 보다 쉽게 레이아웃 구조를 잡을 수 있는 css 속성입니다. flex 박스는 요소의 크기가 정확하지 않거나, 반응형일 때 유용하게 사용할 수 있습니다. 정렬, 방향, 크기, 순서 모두 css만으로 유연하게 조절할 수 있기때문에 다양한 레이아웃을 보다 쉽게 구현할 수 있습니다. flexbox의 구성 flexbox는 상위 부모요소인 flex container와, 자식 요소인 flex item으로 구성되어 있습니다. flexbox 기본 구조 [html] Item1 Item2 Item3 Item4 [css] .container { display: flex; } flexbox css 적용방법은 부모요소인 container에 display:flex를 선언하면 됩니다..

특정 위치에서 시작하는 스크롤 네비게이션 특정위치에서 시작하는 스크롤 네비게이션입니다. a링크로 해당 섹션에 이동가능하고, 스크롤이 위치한 섹션에 맞춰 네비게이션 메뉴도 active 됩니다. 원페이지 홈페이지나, 랜딩페이지 제작할 때 유용하게 사용할 수 있을 것 같습니다. 필요하시다면 아래 코드확인해보시고 수정해서 사용하세요 :) [html] main section1 section2 section3 section4 section01 section02 section03 section04 [CSS] /*퀵메뉴*/ .quick_menu {left:5%;position: absolute;} .quick_menu.fixed {position: fixed;top: 5px; z-index:100} .quick_men..

태그 form태그란? 웹사이트에서 사용자 정보를 입력받아, 사용자로부터 할당된 데이터를 서버로 전송합니다. 회원가입이나 로그인, 검색창과 같은 입력받은 데이터를 서버로 전송이 필요한 기능에 form태그가 사용됩니다. form의 구조 form의 구조는 위의 코드와 같습니다. action속성은 폼 데이터를 서버로 보낼 때, 데이터를 전달받을 url을 지정합니다. method속성은 폼데이터를 서버로 제출할 때 사용되는 HTTP 메소드를 지정합니다. method 속성의 속성값에는 'GET'과 'POST'가 있습니다. - GET 방식은 브라우저에 의해 저장되기 때문에 '보안의 취약점'이 존재합니다. 또한 데이터 길이의 제한이 있습니다. - POST 방식은 브라우저에 의해 저장되지 않기 때문에 '보안성'이 높습니다..

홈페이지 무료 제작, 반응형 홈페이지 만들기 일단적으로, 업체에서 제작해주는 홈페이지 비용은 비쌉니다. 사용자 맞춤사이트를 만들게 되면 설계부터, 디자인, 퍼블리싱, 개발까지 진행해야되니 인건비때문에 당연히 가격이 비싸질 수 밖에 없습니다. 그렇기때문에 무료 홈페이지제작을 위해서는, 템플렛이 이미 만들어져있는 무료 홈페이지 빌더를 사용하셔야합니다. 지금부터 무료로 홈페이지를 제작할 수 있는 사이트들을 소개시켜드리겠습니다. 1. 워드프레스(wordpress.com/ko) 아마 홈페이지 빌더 사이트중에 가장 유명하지 않을까 싶습니다. 무려 CMS 시장 점유율이 58%나 된다고 하니 어마어마하네요. 외국 사이트다 보니, 테마나 플러그인의 양이 어마어마합니다. 워드프레스는 커스터마이징이 쉬운편은 아니지만 그만큼..

국내 무료 웹 호스팅 사이트 사실 현재는 무료 웹 호스팅을 중단한 곳이 많이 있습니다. 물론 무료이다보니 계정의 용량과, 성능은 유료보다는 떨어지지만, 트래픽이 많지않은 사이트나, 포트폴리용 사이트를 제작할 때 무료 웹 호스팅을 사용하면 좋겠죠. 오늘은 국내의 무료 웹 호스팅 서버 사이트를 알려드리겠습니다. 1. 닷홈 (www.dothome.co.kr/) 아마, 국내의 무료 호스팅 업체중 가장 유명할 거 같아요 :) 바로 닷홈입니다. 창업부터 지켜온 약속이라고 하니, 평생 무료로 이용하실 수 있으실 것 같습니다. 디스크용량은 200MB, DB용량은 200MB, 트래픽은 일 300MB네요 :) [닷홈 서비스사양] 닷홈의 웹서버의 사양은 위와 같습니다. 닷홈의 무료호스팅의 특징입니다. 평생 무료호스팅이 사용..