본문 바로가기

웹퍼블리셔를 위한50

[CSS] HSL의 컬러 속성을 변수로 만들어 활용하기 css로 색상을 지정하는 방법은 여러가지가 있습니다. 이중 HEX 코드 (#ffff00) 와 RGB값 (rgb(255,255,0)) 으로 지정하는 방법은 많이 사용하고 있지만 HSL 값을 사용하는 경우는 매우 드뭅니다. 아래 영상에서는 HSL을 활용하면 좋은 점에 대한 팁을 알려주고 있습니다. 한번 참고해보시면 잘 사용하시면 레벨을 한단계 더 올려줄 수 있을 것 같습니다. https://designup4.tistory.com/91 [CSS 색상 지정 팁] HSL의 속성을 변수로 만들어 활용하기 HSL HSL은 아래 색을 표현하는 색상, 채도, 명도의 앞글자들입니다. Hue : 색상 - 0 ~ 360 사이 숫자 (= 색깔 방향 의미 숫자) (숫자만 기재) - 0 (= 360)은 빨간색, 120은 녹색, 2.. 2021. 10. 9.
css animation 로 만드는 로딩 효과 애니메이션 자바스크립트 없이 css 만을 이용하여 만든 로딩 효과 애니메이션입니다. css 변수를 활용하여 각 원형 이미지에 시간차로 효과를 적용하여 돌아가는 모습을 구현하였습니다. https://designup4.tistory.com/37 css animation, css 변수 (로딩 효과 애니메이션) 소스 코드 적용 예제 보기 http://designup.kr/study/css_loading/ 주요 관련 소스 사용자 지정 CSS 속성 사용하기 (변수) https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties ht.. designup4.tistory.com 2021. 10. 9.
css mix-blend-mode로 포토샵 오버레이 효과 내는 방법 항상 쓰던 것만 하던 것만 이용해서 작업을 하다 보니 css가 이 정도로 발전했는지 몰랐네요. 사실 과거에는 익스플로러가 항상 발목을 잡는 바람에 신기술이 있어도 그냥 바라만 보고 있었지만 이제는 익스플로러를 슬슬 버려도 될 것 같기 때문에 이제는 신기술을 적극 활용할 수 있는 시기인 것 같습니다. 일괄적으로 적용해야 하는 워터마크 작업이나 간단한 보정들에 활용하면 좋을 것 같네요~ https://designup4.tistory.com/44 [css] mix-blend-mode, object-fit, object-position 작업 소스 적용 예제 보기 http://designup.kr/study/css_effect_blend/ 주요 관련 소스 mix-blend-mode https://developer.. 2021. 10. 9.
시멘틱 태그 (마크업) - 드림코딩 엘리 여러분들은 의미있는 코딩을 잘 하고 계신가요? 저는 아직도 섹션과 아티클이 헷갈리고, 또 볼드태그와 스트롱태그의 차이점을 몰랐습니다. 이 영상을 보기 전까지는요 ^^; 저와 같은 분들에게 도움이 될만한 드림코딩 엘리님의 영상을 소개 시켜드립니다. https://designup4.tistory.com/79 드림코딩 엘리님이 말하는 "시멘틱 마크업" 정리 시멘틱 마크업이란? div, section, article, h2 등 수많은 태그들을 문서 내용에 맞게 선택해서 사용하는 것을 시멘틱 마크업이라 합니다. 시멘틱 마크업을 해야 하는 이유? 1. SEO - 검색엔진 최적화에 designup4.tistory.com 2021. 8. 26.
자바스크립트 http → https 리다이렉트 소스 리눅스에서는 htaccess 파일을 수정하여 https로 리다이렉트를 시켜면 간단하게 처리가 됩니다. htaccess 파일 수정 방법 : https://blog.naver.com/chopie80/222464279326 하지만 타서버는 이 방법이 적용되지 않고 각 서버에 맞는 방법을 적용해야 하는데요 얼마전 node.js 호스팅에서 리다이렉트를 시키기 위해 express 프레인워크 작업을 하는데... 뭐가 문젠지...죽어도 안되더라구요... 그래서 아래 포스팅대로 자바스크립트로 클라이언트단에서 처리를 하였습니다. 약단 찝찝하긴 하지만... 별 문제는 없을 것 같습니다. https://blog.naver.com/chopie80/222464279326 http → https 리다이렉트, 자바스크립트로 처리하는.. 2021. 8. 10.
아주 간단한 심플한 '햄버거 메뉴' 코드 소스 입니다. 이렇게 삼선 햄버거 메뉴버튼을 누르면 전체 메뉴가 펼쳐지는 네비게이션입니다. css로 모양과 에니메이션 효과를 구현하고 아래와 같이 간단한 자바스크립트 코드 한줄로 함수를 만들었습니다. js_toggle.addEventListener('click',()=>{nav_menu.classList.toggle('nav-menu-open');}); 심플한 코드라서 바로 사용하기에는 좀 부족할 수 있지만 여기저기 활용하시기에는 아주 좋을 것 같습니다. https://designup4.tistory.com/11 햄버거 메뉴 네비게이션 (바닐라 자바스크립트 / CSS) 데모 : http://designup.kr/study/cssjs_togglemenu 소스 : https://github.com/designup/cssj.. 2021. 8. 1.
웹퍼블리싱 (css, 자바스크립트 등) 유튜브 강좌 영상 추천합니다. 저는 유튜브로 자바스크립트를 공부를 할때 한군데가 아닌 여러 채널의 강좌를 보고 있습니다. 그 이유는 저의 부족한 머리를 이해시켜주기에는 아무리 유명하고 뛰어나고 말을 잘하시는 강사님들도 다소 힘든 부분들이 있거든요. 과거에는 이해가 안되는 부분은 영상을 반복해서 학습을 하였는데 그것보다는 다른 강사님들의 설명을 듣다보면 이해가 안가는 부분이 쉽게 해결이 되더라구요. 그래서 저는 여러 채널의 강좌를 보고 있습니다. 오늘 추천해드리는 "코딩애플" 채널은 독특한 스타일의 강좌인데요~ 분명 이런 스타일의 강의가 맘에 들어하시는 분들이 있을 것 같아 추천드립니다. 아래 영상을 한번 참고해보시고 맘에 드시면 구독해보세요~ 2021. 5. 22.
크롬 개발자 도구로 자바스크립트 이벤트 확인하기 (디버깅) 타 사이트에서 자바스크립트 기능을 확인하고 활용하는 방법 사이트를 살펴보다 보면 이런 기능은 어떻게 구현했을까? 어떤 식으로 만들었을까? 자바스크립트 코드를 살펴보고 싶은 때가 많이 있죠? 나름대로 각자의 방법들이 있겠지만 이 영상에서는 크롬 개발자 도구를 활용하는 방법을 알려주고 있습니다. 참고로 에지, 웨일에서도 크롬 개발자 도구와 비슷한 기능이 있으므로 사실상 대부분의 브라우저에서 이 기능을 이용할 수 있는 것이죠. 그럼 아래 영상을 확인해보세요~ 2021. 4. 10.
롤오버시 배너가 교차되어 보이는 효과 (Html & CSS) 자바스크립트없이 css속성으로 롤오버 효과를 구현한 예제입니다. 기본 DIV와 롤오버 DIV 를 각각 만들어 놓은 후에 transition 효과를 이용하여 토글되도록 구현하였습니다. 2020. 11. 20.
css 단위 em 과 rem 정리 - 드림코딩 엘리님이 재밌게 알려드립니다. 2007년도 부터 이바닥에 들어서고 css 단위는 px, % 이 두가지로 퉁치면서 문제없이 잘쓰고 있었는데요, 어느날 반응형 홈페이지라는 말이 나오더니 그에 맞게 em, rem, vh, vw 등 여러가지 단위들이 늘어 났습니다. 세상이 변함에 따라 공부할 것이 계속 늘어나니 심심하지 않아 좋네요 ^^; 이중 em 과 rem에 대해 드림코딩 엘리님께서 재미있게 콘텐츠를 잘 만들어주셨습니다. em 과 rem가 헷갈리시는 분들은 참고해보세요~ 2020. 9. 23.
자바스크립트 없이 html과 css로 만드는 슬라이드 배너 강좌 이번 영상은 실무에서 활용하기에는 좀 무리가 있지만 html과 css 를 보다 깊게 공부하는데 도움이 될 것 같습니다. input의 radio속성을 활용하여 슬라이드를 선택적으로 보여지게 하였으며 슬라이드배너가 부드럽게 움직이는 효과는 css의 transition을 이용하였습니다. 그럼 아래 코남님의 재밌고 센스있는 강좌영상을 확인해보세요~ 참고로 보시면 아시겠지만 코남님의 강좌영상 센스가 구독버튼을 자연스럽게 누르게 할 것입니다. 사용된 예제파일은 아래 블로그 링크를 통해 이동하셔서 다운받으 실 수 있습니다. https://blog.naver.com/co-nam/222084570760 2020. 9. 11.
노마드코더 니꼴라스가 추천하는 IT 영화입니다. 노마드코더 니꼴라스가 추천하는 IT 영화입니다. IT업에 종사하시는 분들이라면 또 다른 재미를 찾아볼 수 있을거라 기대합니다. ​ 1. Pirate Bay Away from Keyboard (더 파이러트 베이: 키보드를 떠나서) 한줄요약: 개방된 인터넷을 위한 전쟁(!?) 예고편: https://youtu.be/G6qcJt2NPY8 ​ 2. Citizenfour (시티즌포) 한줄요약: 스노든의 미국 감시 프로그램 폭로 과정 예고편: https://youtu.be/XiGwAvd5mvM ​ 3. Zerodays (제로 데이즈) 한줄요약: 어떻게 컴퓨터 바이러스가 이란 핵시설을 파괴한건가 예고편: https://youtu.be/C8lj45IL5J4 ​ 4. The Internet's Own Boy (누가 애런.. 2020. 9. 10.
일반인들도 코딩없이 앱,홈페이지 개발이 가능할까? 과연 개발자들의 일자리는 어떻게 될까? 디자인 AI에 포스팅에 이어서 이번에는 코딩 자동화 서비스에 관련 된 동영상을 소개 해드리려 합니다. 코딩없이 웹사이트를 구축하는 툴/서비스로는 이미 1997년도 드림위버나 나모웹에디터와 같은 툴이 있었습니다. 하지만 이 툴을 이용한다 하더라도 코딩 지식없이 제대로 된 사이트를 구축하는건 사실상 불가능했었죠. 이후 10년이 넘게 지난 지금의 2020년는 상황이 많이 달라졌습니다. 물론 아직까지는 내가 원하는 홈페이지나 앱을 코딩지식 없이 만든다는 건 불가능하지만 실사용이 가능한 수준의 결과물을 만드는 수준까지는 도달했으며, 이미 많은 사용자들이 이 서비스의 편리함을 누리고 있습니다. 대표적인 예로는 유튜브광고로 한번쯤은 보셨을 윅스(WIX) 웹빌더 서비스가 있습니다. 광고의 슬로건도 "일반인들도 쉽게 만.. 2020. 9. 3.
자바스크립트없이 css로 구현하는 오버레이 햄버거 메뉴입니다. 일반적으로는 햄버거메뉴를 구현하기 위해서 자바스크립트 혹은 jQuery를 사용하실 겁니다. 이 영상에서는 체크박스의 checked를 감지하여 css로 햄버거 메뉴를 구현하였습니다. 참고하시어 햄버거메뉴 뿐만 아니라 더 많은 부분에 응용 해보세요~ 추가로 유튜브 실시간 번역 방법 안내해드립니다. 아래 링크 참고해보세요~ https://designup3.tistory.com/pages/%ED%95%B4%EC%99%B8-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EC%98%81%EC%83%81-%EC%9E%90%EB%8F%99%EB%B2%88%EC%97%AD-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0 해외 유튜브 영상 자동번역 설정하기 1. 해외 유튜브 영상에서 자막 아이콘을 .. 2020. 8. 21.
HTML 및 CSS를 사용하여 단 10 분 만에 배경 비디오로 웹 사이트를 만드는 방법 홈페이지 배경에 동영상을 깔아주는 소스 영상입니다. 영상을 제어해주는 버튼기능은 자바스크립트를 활용하여 구현됩니다. 자막지원이 안되긴 하지만 강사분이 인도분이신지 영어 발음이 딱딱해서 오히려 더 잘들리는 듯 합니다.^^; 나레이션을 이해 못하셔도 소스를 이해하는데는 별 무리는 없긴 합니다. 동영상은 유튜브 링크가 아닌 video 태그를 활용하여 들어가게 됩니다. 이번 영상의 핵심인 video 태그 활용소스는 7분 10초부터 시작되오니 급하신 분들은 여기부터 보셔도 될 것 같습니다. 그럼 즐공하세요~ 2020. 8. 14.

티스토리툴바