WEBSTORYBOY

튜토리얼

• 

  자연스럽게 변하는 배경색 변경 효과 만들어보기 Tutorial/Portfolio 자연스럽게 변하는 배경색 변경 효과 만들어보기 by @webs 2022. 12. 26. Tutorial 배경 색 + 글씨 색 변경하기 + 스므스 효과 주기 난이도 중간 소스 다운로드 완성 화면 보기 완성 코드 보기 소개 안녕하세요🤭 이번에 변경색으로 자연스럽게 변경하는 효과를 만들어 보겠습니다. 섹션이 넘어갈 때 배경색을 스므스하게 변경해주면 고급스러운 느낌을 줄 수 있습니다. 당연히 이번에도 GSAP1는 당연히 사용하게 되구요! 스므스 효과는 Lenis2를 사용하겠습니다. 아~~ 참고로 이미지는 unsplash3에서 가져왔습니다. 01. 기본 코딩 기본 구조부터 셋팅을 합시다. 🥳 6개의 섹션이 있다고 가정하고 구조화하겠습니다. 그럼 CSS도 셋팅해주겠습니다. 기본 설.. 댓글 0 2023.01.05

• 

  가로 모드 스므스 효과 만들기 Tutorial/Portfolio 가로 모드 스므스 효과 만들기 by @webs 2022. 12. 26. Tutorial 가로 모드 스므스 효과 만들기 난이도 중간 소스 다운로드 완성 화면 보기 완성 코드 보기 소개 안녕하세요🤭 이번에는 가로모드를 만들어 보겠습니다. GSAP1를 이용하여 가로모드를 구성하고, Lenis2를 이용하여 스므스 효과를 줄 것입니다. 생각보다 어렵지 않으니, 잘 따라해주시면, 퀄리티 있는 포트폴리오를 만들 수 있습니다. 그럼 시작해보겠습니다.🥲 01. 기본 코딩 우선 구조는 header, main, footer로 설정하겠습니다. * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } a { te.. 댓글 1 2022.12.27

• 

  GSAP를 이용한 눈 내리는 메인 효과 만들기 Tutorial/Portfolio GSAP를 이용한 눈 내리는 효과 만들기 by @webs 2022. 12. 19. Tutorial 눈 내리는 효과 만들기 난이도 중간 소스 다운로드 완성 화면 보기 완성 코드 보기 소개 안녕하세요🤭 오늘은 눈 내리는 효과를 만들어보겠습니다. 눈내리는 효과는 검색을 해보면 많이 나오는 효과 중에 하나입니다. 하지만 우리는 특별하게 GSAP1를 이용하여 작업하겠습니다. 생각보다 어렵지 않으니, 하나씩 따라 해보세요! 그럼 시작해보겠습니다. 01. 기본 코딩 main과 section 태그를 만들고, 텍스트를 만들어 주겠습니다. 텍스트는 나중에 애니메이션 효과를 주기 위해서 div 태그로 감싸줬습니다. 코딩과 함께 한 모든 순간이 눈부셨다. 우선 웹 폰트를 설정하겠습니다. 웹 .. 댓글 1 2022.12.22

• 

  GSAP, THREE.JS를 이용한 포트폴리오 메인페이지 만들기 Tutorial/Portfolio 포트폴리오 메인 페이지 만들기 - GSAP, THREE.JS by @webs 2022. 12. 15. Tutorial 포폴 메인페이지 만들기 난이도 중간 소스 다운로드 완성 화면 보기 완성 코드 보기 소개 안녕하세요! 오늘은 포트폴리오 메인페이지를 만들어 보겠습니다. 배경에 THREE.JS1 효과와 메인 로딩애니메이션은 GSAP2를 사용할 것입니다. 사이트는 studyhall3 사이트를 참고하였으며, 폰트는 pangrampangram4에서 무료 버전과 구글폰트를 사용하였습니다. 그럼 시작해보겠습니다. 01. 기본 코딩 기본 골격부터 작업하겠습니다. 헤더, 메인, 푸터 영역을 설정하겠습니다. 마지막으로 애니메이션과 위치 등을 설정하면, 메인 페이지가 완성됩니다. 포트폴리오.. 댓글 0 2022.12.16

자바스크립트 테스트

• 

  자바스크립트 테스트09 정보처리 대비 Tutorial/Test 자바스크립트 테스트입니다. by @webs 2023. 02. 21. 자바스크립트 테스트 정보처리기능사 기출문제를 자바스크립트로 변환한 문제입니다. 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < m.. 댓글 0 2023.04.28

• 

  자바스크립트 테스트08 정보처리 대비 Tutorial/Test 자바스크립트 테스트입니다. by @webs 2023. 02. 21. 자바스크립트 테스트 정보처리기능사 기출문제를 자바스크립트로 변환한 문제입니다. 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < m.. 댓글 0 2023.04.21

• 

  자바스크립트 테스트07 정보처리 대비 Tutorial/Test 자바스크립트 테스트입니다. by @webs 2023. 02. 21. 자바스크립트 테스트 정보처리기능사 기출문제를 자바스크립트로 변현한 문제입니다. 01. 다음의 결괏값을 작성하시오. { let data = [10, 6, 7, 9, 3]; let temp; for(let i=0; i 댓글 0 2023.04.14

HTML

• 

  ins 태그는 추가된 텍스트의 범위를 표현할 때 설정합니다. 2022.12.29

• 

  del 태그는 삭제된 텍스트의 범위를 표현할 때 설정합니다. 2022.12.29

• 

  s 태그는 취소선을 표현할 때 설정합니다. 2022.12.29

• 

  b 태그는 중요성을 전달하지 않고, 주의를 끌기 위한 용도로 사용할 때 설정합니다. 2022.12.28

• 

  em 태그는 텍스트를 강조할 때 설정합니다. 2022.12.28

• 

  i 태그는 주의 텍스트와 다른 의미의 텍스트로 구분할 때 설정합니다. 2022.12.28

• 

  mark 태그는 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 설정합니다. 2022.12.28

• 

  strong 태그는 내용에 대한 중요성, 심각성, 긴급성을 표현할 때 설정합니다. 2022.12.28

• 

  table 태그는 표를 설정합니다. 2022.12.07

• 

  td 태그는 표의 열(셀)을 설정합니다. 2022.12.07

• 

  th 태그는 행이나 열에 제목을 설정합니다. 2022.12.07

• 

  tr 태그는 표의 행을 설정합니다. 2022.12.07

more

CSS

• 

  min-height 속성은 요소의 최소 세로 크기를 설정합니다. 2023.02.04

• 

  max-height 속성은 요소의 최대 세로 크기를 설정합니다. 2023.02.04

• 

  height 속성은 요소의 세로 크기를 설정합니다. 2023.02.04

• 

  min-width 속성은 요소의 최소 가로 크기를 설정합니다. 2023.02.04

• 

  max-width 속성은 요소의 최대 가로 크기를 설정합니다. 2023.02.04

• 

  width 속성은 요소의 가로 크기를 설정합니다. 2023.02.04

• 

  border-inline-end-width 속성은 인라인(오른쪽) 테두리 두께 속성을 설정합니다. 2023.01.09

• 

  border-inline-end-style 속성은 인라인(오른쪽) 테두리 스타일 속성을 설정합니다. 2023.01.09

• 

  border-inline-end-color 속성은 인라인(오른쪽) 테두리 색 속성을 설정합니다. 2023.01.09

• 

  border-inline-end 속성은 인라인(오른쪽) 테두리 속성을 일괄적으로 설정합니다. 2023.01.09

• 

  border-inline-start-width 속성은 인라인(왼쪽) 테두리 두께 속성을 설정합니다. 2023.01.09

• 

  border-inline-start-style 속성은 인라인(왼쪽) 테두리 스타일 속성을 설정합니다. 2023.01.09

more

JAVASCRIPT

• 

  concat 메서드는 매개변수로 전달된 배열을 받어, 결합된 새로운 배열을 반환합니다. 2022.12.14

• 

  at 메서드는 지정한 숫자를 받아, 배열에서 해당 되는 인덱스의 요소를 반환합니다. 2022.12.14

• 

  reverse 메서드는 배열 요소의 순서를 반대로 하고, 반대로 된 배열을 반환합니다. 2022.12.14

• 

  pop 메서드는 배열 마지막 요소를 제거하고, 제거한 요소를 반환합니다. 2022.12.13

• 

  shift 메서드는 배열 처음 요소를 제거하고, 제거한 요소를 반환합니다. 2022.12.13

• 

  unshift 메서드는 배열 앞에 요소를 추가하고, 배열의 새로운 길이 값을 반환합니다. 2022.12.13

• 

  push 메서드는 배열 끝에 요소를 추가하고, 배열의 새로운 길이값을 반환합니다. 2022.12.13

• 

  join 메서드는 배열의 요소를 추가하여, 하나의 문자열로 반환합니다. 2022.12.13

• 

  offsetWidth 속성은 요소의 가로 값을 가져옵니다. 2022.12.02

• 

  offsetTop 속성은 요소의 Y축 위치 값을 가져옵니다. 2022.12.02

• 

  offsetLeft 속성은 요소의 X축 위치 값을 가져옵니다. 2022.12.02

• 

  offsetHeight 속성은 요소의 세로 값을 가져옵니다. 2022.12.02

more

뉴스

• 

  네이버웹툰, 통합 MAU 8200만명 돌파 네이버웹툰, 1월 글로벌 통합 MAU 8200만명 돌파… “K 콘텐츠 산실로 우뚝” 네이버웹툰이 지난달 글로벌 월간 활성 이용자(MAU)가 사상 최대치인 8200만명을 돌파했다고 16일 밝혔다. 지난 2020년 12월 7200만명을 돌파한 이후 약 1여년 만에 1000만명이 증가한 것이다. 글로벌 이용자가 늘어나면서 유료 거래액도 증가했다. 네이버웹툰에 따르면 지난달 월간 거래액은 1000억원을 돌파했다. 앞서 네이버웹툰은 지난 2021년 8월에도 최초로 월간 거래액 1000억원을 돌파한 바 있다. 이 같은 성장은 기존 웹툰들의 해외 거래액 증가와 더불어 대형 신작과 영상화 IP 흥행 등을 통해 글로벌 이용자 유입이 대폭 확대된 데 기인한다. ‘여신강림’, ‘재혼황후’ 등 네이버웹툰의 인기 웹툰들의 1월.. 댓글 0 2022.02.16

• 

  카카오, 브런치 작가 5만 명 돌파 # ‘글이 작품이 되는 공간’에서 ‘베스트셀러 작가가 되는 공간’으로 브런치는 ‘글이 작품이 되는 공간’이라는 콘셉트로 지난 2015년 6월 카카오가 선보인 콘텐츠 퍼블리싱 플랫폼이다. 별도의 작가 승인 제도를 통과한 엄선된 브런치 작가들이 양질의 콘텐츠를 발행하는 것이 특징이다. 브런치에서 선보인 작품들이 출간까지 이어지면서, 브런치 작가 5만 명 중 책을 출간한 작가는 2천 9백여 명, 이들이 출간한 도서는 4천 6백여 권에 달한다. 특히, 브런치를 통해 선보인 도서들이 베스트셀러에 오르면서 출간의 새로운 판로를 개척했다는 평가를 받고 있다. 는 전자책으로 출간돼 밀리의 서재 종합 차트 1위를 기록하고 종이책 출간까지 이어진 작품이며 은 2021년 6월 출간 후 6개월 만에 7쇄를 돌파했다. 이 외에.. 댓글 0 2022.02.16

• 

  네이버 실내 맵핑 로봇 M1X - Mapping Robot M1X는 실내 3D/HD맵을 제작하는 로봇입니다. LiDAR로 수집한 포인트 클라우드에 SLAM 기술을 적용하여 만든 고정밀 지도는 서비스 로봇이나 AR 내비게이션 등 다양한 위치 기반 서비스에 활용됩니다. 기존 M1 로봇의 성능을 업그레이드한 M1X는 정확도와 데이터 활용성을 크게 개선하였습니다. 네이버 최초의 로봇은 M1입니다. 2016년에 첫 공개한 M1은 실내 공간의 3차원 고정밀 지도를 만드는 매핑로봇입니다. 위에 보이는 이미지가 바로 M1이 만든 지도입니다. 우리가 일반적으로 보는 지도와는 많이 다르죠. 이 지도는 누구를 위한 것일까요? 댓글 0 2022.01.21

• 

  네이버 모바일 맵핑 시스템 R1 - Mobile Mapping System R1은 하이브리드 HD 매핑을 위해 개발한 모바일 매핑 시스템입니다. 카메라, 2D/3D LiDAR's, GPS, IMU, FOG, wheel encoders 등의 각종 센서를 포함하면서도 기존 MMS 장비에 비해 경량입니다. R1이 이동하며 수집한 2D/3D 데이터에서 feature들을 자동 추출한 후, 미리 촬영된 항공사진으로 획득한 로드 레이아웃 정보와 유기적으로 결합하여 HD맵을 완성합니다 댓글 0 2022.01.21

• 

  삼성 더 프리스타일 사고 싶은데. 가격이 사용자가 있는 그곳에 스며들도록… 자유로운 형태·제약 없는 움직임 언제 어디서나 자유롭게 일하는 ‘노마드 워커(Nomad Worker)’가 늘어나고 있다. 이들은 시공간의 제약을 뛰어넘게 해주는 물건을 선호한다. 양손을 자유롭게 해준 블루투스 이어폰, 청소의 부담을 덜어준 로봇 청소기 같은 제품이 대표적인 예. 삼성 ‘더 프리스타일’은 사용자가 원하는 공간에서, 원하는 방식으로 가장 좋은 화면을 볼 수 있게 해주는 제품이다. 조철용 디자이너는 “자유롭게 이동할 수 있고 다양하게 사용이 가능한 형태를 고민했다”고 설명했다. 조명으로도 사용이 가능하다. 색상 선택도 가능하다. 밧데리도 따로 충전이 가능함 이런 부분이 제일 좋다. 내가 디자인을 해서 이렇게 작품으로 승화시키는 부분 어디에서나 뒤틀림 없는 16.. 댓글 0 2022.01.21

• 

  카카오, 신임 단독대표로 남궁훈 미래이니셔티브센터장 내정 카카오가 글로벌 시장 공략과 미래 먹거리 발굴에 힘을 싣고, 사회적 책임을 다하는 성장을 하기 위해 새로운 리더십을 세우고 경영 쇄신에 나선다. 카카오는 20일 오전 이사후보추천위원회를 열고 현 카카오 미래이니셔티브센터 남궁훈 센터장(南宮燻, Whon Namkoong)을 단독대표 내정자로 보고했다고 밝혔다. 남궁훈 대표 내정자는 오는 3월로 예정된 주주총회와 이사회를 거쳐 공식 대표로 선임될 예정이다. 여민수 대표는 최근 사회의 강도 높은 지적에 대해 책임을 통감하며 대표이사 자리에서 물러나겠다는 의사를 밝혔다. 이에 카카오는 카카오게임즈를 성공적으로 성장시키는 경험을 축적하고, 카카오 미래이니셔티브센터장으로서 카카오의 미래를 준비해온 남궁훈 센터장을 대표로 내정했다. 카카오톡 다음 단계의 비전을 고민해.. 댓글 0 2022.01.20

• 

  카카오픽코마 TOP10 선정 미국/중국 외 다른 국가에서 서비스하는 단일 앱으로 거둔 성과로 더욱 의미 깊어 카카오픽코마(대표 김재용)가 운영하는 세계 최대 만화 플랫폼 '픽코마'가 작년 한 해 동안 전 세계 모바일 소비자들이 가장 많이 지출한 앱(게임 제외) 6위에 올랐다. 미국과 중국 앱들이 순위에 포진한 가운데 10위 안에 든 다른 국가 앱은 픽코마가 유일했다. 모바일 데이터 및 분석 플랫폼 앱애니(App Annie)가 최근 발표한 ‘2022년 모바일 현황 보고서’에 따르면 작년 한 해 동안 글로벌 모바일 시장에서 소비자가 가장 많이 지갑을 연 앱 순위에서 픽코마는 6위를 차지했다. 기업별 순위에서도 카카오픽코마는 전체 8위를 기록했다. 글로벌서비스들이 즐비한 시장에서 일본에서만 단일 앱을 운영하며 순위 안에 든 사례라서 더욱.. 댓글 0 2022.01.19

• 

  네이버 D2SF, 클로아에 후속 투자 네이버 D2SF, 클로아에 후속 투자 네이버 D2SF가 2020년 투자를 진행한 데이터 기술 스타트업 ‘클로아’에 후속 투자했다. 클로아가 이번 시드 라운드에서 유치한 투자금은 총 60억 원 규모로, 위벤처스가 리드 투자했다. 스톤브릿지벤처스, KB인베스트먼트, 메가존, 슈퍼패스트, 티인베스트먼트 등도 공동으로 투자했다. 클로아(대표 임성은)는 메타데이터 관리부터 데이터 분석∙문서화∙공유까지 데이터 저장∙처리∙분석을 아우르는 올인원 SaaS(Software as a Service)를 개발 중이다. 데이터 애널리스트∙사이언티스트를 위한 제품으로, 다양한 클라우드에 분산돼 있는 데이터를 간편하게 통합 처리할 수 있는 것이 강점이다. 클로아의 핵심 개발진은 데브시스터즈, 샌드버드, 지그재그 등에서 경험을 쌓은.. 댓글 0 2022.01.18

• 

  AI Test! AI 같이 할래요? 카카오엔터프라이즈 AI 기술의 즐거운 체험, Tech Ground 테크 그라운드는 카카오엔터프라이즈 AI 개발자들이 만들어 나가고 있는 기술 체험 공간입니다. “AI를 더하여 일상을 새롭게” 만드는 비전은 어떻게 시작될까요? 집에 불 켜놓고 외출 했을 때 가장 먼저 생각나고, 잠 안 오는 새벽에 말동무가 되어주고, 길가에 핀 꽃의 이름을 사진만 보고도 알려주고, 나에게 어울리는 옷 스타일을 내 맘에 쏙 들게 추천해주는 내 일상에서 더 편하게 만나는 카카오 AI. AI 기술을 통해 새롭고 실험적인 시도를 해 나가는 카카오엔터프라이즈 개발자들과 함께 Tech Ground에서 AI 같이 해봐요. https://labs.kakaoi.ai/ 댓글 0 2022.01.17

• 

  카카오브레인, 50억원 투자 카카오브레인이 AI를 활용한 글로벌 신약 개발 시장에 도전한다. 카카오브레인(대표 김일두)은 16일, 인공지능을 활용한 신약 설계 플랫폼 기업 ‘갤럭스’(대표 석차옥)에 50억원을 투자하고, 공동 연구를 위한 파트너십을 구축했다고 밝혔다. 갤럭스는 2021년 상반기 인터베스트로부터 시드 투자를 유치한데 이어, 카카오브레인의 전략적 투자로 빠른 성장의 발판을 마련했다. 현재 글로벌 바이오 산업 분야에서는 AI를 신약 개발에 접목하기 위한 다양한 시도가 이뤄지고 있다. 나스닥 상장사 슈뢰딩거를 비롯해 2021년 구글이 AI 신약개발 자회사 아이소모픽 랩스(Isomorphic Labs)를, 아마존이 제약사들과 합작해 아이온랩스(AION Labs)를 설립하는 등 글로벌 테크 기업들간의 AI 신약 개발 경쟁이 시.. 댓글 0 2022.01.17

• 

  AI, 로봇, 클라우드, 디지털 트윈 기술로 여는 새로운 유니버스 AI, 로봇, 클라우드, 디지털 트윈 기술로 여는 새로운 유니버스 안녕하세요 네이버랩스 석상옥입니다. 네이버랩스는 지난 몇년간 로봇, 인공지능, 자율주행, 디지털 트윈, 5G, AR 등 다양한 연구 성과들을 공개했습니다. 이 기술들은 어떤 공통의 목표를 가지고 있을까요? 우리의 미션은 온라인 세계의 네이버를 현실의 물리 세계와 자연스럽게 연결하는 것입니다. 그런데 이 미션은 근래 주목을 받고 있는 메타버스를 떠올리게 합니다. 실제 올해 네이버랩스에도 메타버스 관련 협업 제안이 크게 늘었습니다. 그런데 분야별로도 메타버스의 정의는 다릅니다. 예를 들어 네이버랩스의 기술은 네이버 제페토와 같은 3D 아바타 기반의 가상 현실 서비스와도 조금 다릅니다. 네이버랩스는 현실 세계와 똑같은 디지털 세계를 창조하는 기.. 댓글 0 2022.01.15

• 

  새로운 사운드 팩 GarageBand 현재 최고로 손꼽히는 프로듀서들이 제공하는 완전히 새로운 사운드 팩으로 음악 창작 작업을 한층 더 풍성하게 만들어주는 GarageBand Apple은 오늘 세계에서 가장 인기 있는 음악 창작 앱인 iOS 및 iPadOS용 GarageBand에 현재 최고로 손꼽히는 다양한 아티스트와 프로듀서의 완전히 새로운 사운드 팩을 발표했다. 이번 사운드 팩으로 사용자들이 음악 작업에서 창의력을 더욱 마음껏 펼칠 수 있게 되었다. 사상 최초로, 사용자들은 완전히 새로운 리믹스 세션 2개로 앱 내에서 바로 리믹스 테크닉을 배울 수 있게 되었다. 이들 세션은 순서대로 차근차근 설명하는 동영상 강의와 그래미 수상에 빛나는 아티스트인 Dua Lipa와 Lady Gaga의 히트곡을 선보인다. 또한 뮤지션들은 Boys Noize.. 댓글 0 2022.01.15

• 

  카카오, 데이터센터 빅데이터-AI-클라우드 중심 첨단 인프라 구축 카카오(공동대표 여민수, 조수용)가 17일 오전 안산 한양대학교 에리카 캠퍼스에서 자체 데이터센터 및 산학협력시설(이하 데이터센터) 착공식을 개최한다. 이 날 착공식에는 여민수 카카오 공동대표, 윤화섭 안산시장, 김우승 한양대학교 총장 등 관계자들이 참석한다. 카카오는 경기도 안산시 상록구 사동 1271 한양대학교 캠퍼스혁신파크 내 일원 18,383㎡ 규모 부지에 데이터센터를 건설한다. 이는 하이퍼스케일(10만대 이상의 서버를 운영할 수 있는 초대형 데이터 센터) 데이터센터로, 총 12만대의 서버를 보관할 수 있고, 저장 가능한 데이터량은 6EB(엑사바이트) 에 달하는 규모다. 오는 2023년 준공을 목표로 한다. 카카오는 데이터센터 건립을 통해 본연의 역할.. 댓글 0 2022.01.14

• 

  삼성 포터블 스크린 더 프리스타일 포터블 스크린 삼성전자가 세계 최대 전자 전시회 CES 2022에서 큰 관심을 받은 포터블 스크린 ‘더 프리스타일(The Freestyle)’을 11일부터 예약 판매한다. 더 프리스타일은 180도까지 자유자재로 회전해 벽·천장·바닥 등 공간에 구애받지 않고 최대 100형(대각선 254cm) 크기의 화면을 구현할 수 있다. 이 제품은 830g의 가벼운 무게와 한 손에 들어오는 미니멀한 디자인을 적용해 휴대가 간편하다. 또 전원선으로 C-type(USB-PD)을 채택해 호환성을 높였으며 50W/20V의 외장 배터리와 연결하면 실내 뿐만 아니라 캠핑 등의 야외 활동에서도 간편하게 사용할 수 있다. 일반적인 프로젝터는 제품을 설치할 때마다 비율 수평 초점 등을 직접 맞춰야 하지만 더 프리스타일은 전원을 켜자마자.. 댓글 0 2022.01.12

• 

  Apple TV+, Apple TV 앱, Apple TV 4K Apple TV+, 세계 최고의 스토리텔러가 선보이는 오리지널 콘텐츠 제공 Apple TV+는 업계 최초의 오리지널 콘텐츠만 제공하는 콘텐츠 구독 서비스이자 이 시대 가장 뛰어난 상상력을 지닌 스토리텔러를 위한 공간으로, 다양한 영감을 주고 수상에 빛나는 오리지널 시리즈 및 영화 라인업을 제공한다. 구독자는 Apple TV+를 온라인 및 오프라인으로 광고 없이, VOD로 Apple TV 앱을 통해 시청 가능하다. Apple TV 앱은 iPhone, iPad, iPod touch, Mac, Apple TV에 기본 탑재되어 있고, 웹사이트에서도 온라인으로 시청 가능하며, Apple TV+도 월 6,500원에 7일 무료 체험과 함께 제공될 예정이다. Apple TV 앱은 또한 일부 삼성 및 LG 스마트 TV,.. 댓글 0 2022.01.12

• 

  macOS Monterey, 업데이트 가능 macOS Monterey는 사용자가 새로운 방식으로 소통하고, 더 많은 작업을 수행하고, 보유 중인 Apple 기기를 넘나들며 더욱 매끄럽게 일할 수 있도록 도와주는 획기적인 기능을 제공한다. FaceTime은 새로운 오디오 및 영상 기능으로 통화를 더욱 자연스럽고 생생하게 만들어주며, AirPlay to Mac과 같은 새로운 연속성 툴은 Apple 기기 간 연동을 통한 활용성을 높여준다. 라이브 텍스트와 시각 자료 찾아보기는 새로운 인공지능 기능으로 유용한 정보를 표시해주고, Safari는 탭 그룹을 통한 강력한 탭 정리 기능을 선보이며, Mac에도 단축어 기능이 추가되어 편리한 자동화가 가능해진다. 올가을에 공개될 SharePlay는 Mac 사용자가 FaceTime을 통해 경험을 공유할 수 있게 해.. 댓글 0 2022.01.12

• 

  Apple, App Store의 2021년을 빛낸 최고의 앱과 게임 발표 2021년을 빛낸 최고의 앱과 게임 발표 Apple은 올 한해 앱 사용자가 열정을 발휘하고, 잠재적인 창의력을 발견하고, 새로운 사람과 경험을 연결하고, 즐거운 시간을 보낼 수 있도록 도운 최고의 앱과 게임 15개를 선정한 2021 App Store Award 수상작을 오늘 발표했다. Apple의 글로벌 App Store 에디토리얼 팀이 탁월한 품질, 혁신적인 기술, 창의적인 디자인, 긍정적인 문화적 영향 등의 심사 기준을 토대로 선정한 앱과 게임을 개발한 전 세계 개발자들이 올해 수상자 명단에 포함된다. Apple의 CEO인 Tim Cook은 “2021년 App Store Awards를 수상한 개발자들은 자신의 추진력과 비전을 활용해 올해 최고의 앱과 게임을 세상에 내놓음으로써 전 세계 수백만 명의 사.. 댓글 0 2022.01.12

• 

  클로바 클락 내가 만난 첫 번째 스마트홈, 클로바 클락 클로바 플랫폼은 애플리케이션과 디바이스를 가진 사람들이 인공지능 서비스를 이용할 수 있도록 하는 ‘클로바 인터페이스 커넥트(CIC)’와 콘텐츠나 서비스를 인공지능 기반으로 개발할 수 있도록 도와주는 ‘클로바 스킬 툴(CLOVA Skill Tools)’로 구성되어 있습니다. 댓글 0 2022.01.12

• 

  멀티 로봇 인텔리전스 시스템 AMBIDEX, 세계 최초 5G brainless robot 시연 AMBIDEX는 와이어 구조의 혁신적인 동력 전달 매커니즘으로 사람과 안전하게 인터랙션 할 수 있는 로봇 팔입니다. 이번 CES에서 네이버랩스는 퀄컴과의 기술 협력을 통해 AMBIDEX의 5G 기술 시연에 성공했습니다. 5세대 이동통신의 초저지연(low latency) 기술을 이용해, 로봇 자체의 고성능 프로세서 없이도 통신망에 연결해 정밀한 로봇 제어를 할 수 있는 최첨단 기술입니다. AROUND G, xDM 플랫폼 기술이 집약된 가이드 로봇 시연 AROUND G는 쇼핑몰, 공항, 호텔 등 복잡한 대규모 실내 공간에서 길 안내를 해주는 로봇입니다. AROUND G에는, 현재 xDM 플랫폼을 통해 연구 중인 HD매핑과 비주얼로컬라이제이션,.. 댓글 0 2022.01.12

2023 웹디자인기능사

• 

  2023년 웹디자인 기능사 실전 사이트 연습5 - E유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : E유형 by @webs 2023. 05. 01. 40 웹디자인 기능사 실전 사이트 : E유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기소스 다운받기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 웹디자인 기능사에서 가장 어려운 부분인 E유형입니다. 반응형도 신경써야 하고 스크립트까지 접목시켜야 완성할 수 있습니다. 그럼 마지막까지 화이팅해봅시다. 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하기 2-4. 갤러리 작업하기 2-5. 배너 작업하기 2-6. 푸터 작업하기 2.. 댓글 0 2023.05.15

• 

  2023년 웹디자인 기능사 실전 사이트 연습4 - D유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : D유형 by @webs 2023. 05. 01. 39 웹디자인 기능사 실전 사이트 : D유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기소스 다운받기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 웹디자인 기능사 D-2 유형을 해보겠습니다. 천천히 잘 따라오세요! 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하기 2-4. 갤러리 작업하기 2-5. 배너 작업하기 2-6. 푸터 작업하기 2-7. 팝업 작업하기 1. 구조 잡기 1-1. 준비하기 우선 폴더를 먼저 셋팅하겠습니다.. 댓글 0 2023.05.15

• 

  2023년 웹디자인 기능사 실전 사이트 연습3 - C유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : C유형 by @webs 2023. 05. 01. 38 웹디자인 기능사 실전 사이트 : C유형 난이도 중급 소스 다운로드 완성 화면 보기 완성 코드 보기 미리보기 디자인 보기소스 다운받기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 C유형 연습니다. 샘플은 C-4 유형을 참고하시면 됩니다. 이번 레이아웃은 약간 옛날 스타일 레이아웃입니다. 이런 레이아웃을 아직까지 쓰고 잇는 회사가 있을까 싶은데.. 그래도 시험이니까 한번 만들어보죠! 고고 😫 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하기 2.. 댓글 1 2023.05.15

• 

  2023년 웹디자인 기능사 실전 사이트 연습2 - B유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : B유형 by @webs 2023. 05. 01. 37 웹디자인 기능사 실전 사이트 : B유형 난이도 중급 소스 다운로드 완성 화면 보기 완성 코드 보기 미리보기 디자인 보기소스 다운받기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 B유형에서 하나 해보겠습니다. B유형도 업데이트 되기 전이랑 같은 유형이지만 전체 메뉴가 생긴것이 다릅니다. 그부분만 신경쓰면 다른 부분은 동일합니다. 너무 어렵지 않으니 포기하지 말고 끝까지 완수하길 바랍니다. 😵‍💫 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하.. 댓글 0 2023.05.15

• 

  2023년 웹디자인 기능사 실전 사이트 연습1 - A유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : A유형 by @webs 2023. 05. 01. 36 웹디자인 기능사 실전 사이트 : A유형 난이도 중급 소스 다운로드 완성 화면 보기 완성 코드 보기 미리보기 디자인 보기소스 다운받기 소개 안녕하세요! 웹스토리보이입니다. 지금까지는 연습을 하였고, 이제부터는 실전 사이트를 만들어보겠습니다. 실제 시험인 것처럼 작업을 하겠습니다. 각 유형에서 한가지를 골라서 작업해보겠습니다. A유형에서는 강원천문대 A-3유형을 작업해보겠습니다. 그럼 시작해볼까요? 🫤 1. 구조 잡기 1-1. 레이아웃 작업 우선 레이아웃을 작업해보겠습니다. 기본 레이아웃을 잡고, 스크립트를 작업할 것입니다. 시험지를 받으면, 전체적인 디자인과 구조를 확인하고, 받은 이미.. 댓글 0 2023.05.15

• 

  2023년 웹디자인 기능사 팝업 : P-1 Tutorial/webd 2023년 웹디자인 기능사 팝업 : P-1 by @webs 2023. 05. 01. 35 웹디자인 기능사 팝업 유형 : P-1 난이도 초급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 스크립트에서 가장 쉬운 스크립트입니다. 버튼을 클릭하면 숨긴 내용 보여주고, 다시 클릭하면 안보여주고, 시작해보겠습니다. 1. 구조 잡기 이번에는 A-2 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } #wrap { width: 1200px; margin: 0 auto; } #header .. 댓글 0 2023.05.11

• 

  2023년 웹디자인 기능사 탭 메뉴 : T-1 Tutorial/webd 2023년 웹디자인 기능사 탭메뉴 : T-1 by @webs 2023. 05. 01. 34 웹디자인 기능사 탭메뉴 유형 : T-1 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 탭메뉴 스크립트를 작업해보겠습니다. 그렇게 어렵지 않으니 하나씩 따라오세요! 그럼 바로 시작해보겠습니다. 1. 구조 잡기 이번에는 A-2 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } #wrap { width: 1200px; margin: 0 auto; } #header { width.. 댓글 0 2023.05.11

• 

  2023년 웹디자인 기능사 메뉴 : S-6 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-6 by @webs 2023. 05. 01. 33 웹디자인 기능사 슬라이드 유형 : S-6 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이미지 슬라이드도 마지막 유형입니다. 거의 끝이 보이기 시작했네요! 여러분들도 여기까지 잘 따라오셨는지 궁금하네요! 잘 하고 있으면 댓글 부탁드립니다. 마지막 유형은 조금 까다롭습니다. 아마 웹디기에서 제일 어려운 부분이 아닐까 싶습니다. 위아래 움직이기 위해서는 높이값이 잡혀야 하는데 height값을 퍼센트로 표현하는 건 힘듭니다. 브라우저는 내리면 계속 내려가기 때문에 height: 100%값이 존재하지 않습니다. 물론 부모 박스 높이 값.. 댓글 0 2023.05.11

• 

  2023년 웹디자인 기능사 메뉴 : S-5 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-5 by @webs 2023. 05. 01. 32 웹디자인 기능사 슬라이드 유형 : S-5 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 반응형 이미지 슬라이드 S-5 유형입니다. 이번 유형은 S-2 유형과 유사하지만, 반응형으로 작업하기 위해서는 가로 값을 퍼센트로 설정해야 하고, 이미지는 백그라운드로 처리하는 것이 포인트입니다. 그래서 S-2 유형을 어느 정도 이해했다면 이번 유형도 쉽게 할 수 있을겁니다. 그럼 시작해보겠습니다. 1. 구조 잡기 이번에도 E-1 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. * { margin: 0; p.. 댓글 0 2023.05.11

• 

  2023년 웹디자인 기능사 메뉴 : S-4 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-4 by @webs 2023. 05. 01. 31 웹디자인 기능사 슬라이드 유형 : S-4 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 웹디자인기능사의 하이라이트 이미지슬라이드 반응형 S-4 유형입니다. 이번에 반응형 레이아웃이 새롭게 생기면서 이미지 슬라이드도 반응형에 맞추어서 작업을 해야 합니다. 하지만 시험지에는 반응형으로 이미지 슬라이드를 구현하시오! 라는 내용이 없습니다. 그래서 이미지를 적절하게 포토샵에서 자른 후 반응형이 아닌 대충 크기를 맞추어도 상관이 없을 듯합니다. 이 부분은 저도 자세히 모르니 여러분이 시험을 보시고 옳은 정보를 알려주시면 감사하겠습니다. .. 댓글 0 2023.05.11