본문 바로가기

웹퍼블리셔를 위한/HTML,CSS 팁27

[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.
롤오버시 배너가 교차되어 보이는 효과 (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.
자바스크립트없이 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.
네이버, 다음 코딩 컨벤션 사이트 참고하여, 코딩의 방향을 잡아보세요. 코딩을 하다보면 내가 올바르게 코드를 작성한건지, 네이밍을 적절한지 의심이 생길때가 있을 것입니다. 네이버, 다음에서는 어떻게 가이드를 잡고 마크업을 하는지 참고해보세요~ [네이버 코딩 컨벤션] nuli.navercorp.com/tool/codingCon NULI Coding Convention 마크업 개발은 프론트-엔드 페이지의 기본 골격을 형성하기 때문에 디자인, 브라우저, 스크립트, 성능, 접근성 등과 긴밀한 관계가 있습니다. 즉, 마크업 개발을 잘 해야 모든 브라� nuli.navercorp.com [다음 코딩 컨벤션] ui.daum.net/ 다룸, Darum 웹표준을 다루다 스니펫 데이터 수 76 last update 2014/09/30 ui.daum.net 2020. 8. 11.
CSS 아이콘 채우기 호버 효과 | 소셜 미디어 버튼 소셜버튼에 마우스를 올리면, 채워지는 효과가 나는 버튼효과입니다. 2020. 8. 9.
원페이지 사이트 작업 영상 (러닝타임 : 3시간 20분 ) 오늘 우리는 멋진 한 페이지 웹 사이트가 될 웹 사이트를 만들 것입니다. 이것은 HTML 및 CSS 연습을위한 것이며이 프로젝트를 통해 웹 사이트를 완벽하게 반응시키는 방법과 유사 요소, 햄버거, 오프 캔버스 메뉴 등에 대한 많은 것들을 볼 수 있습니다. 이 비디오가 마음에 드시길 바랍니다. 또한 아래 링크에서 소스 코드를 다운로드 할 수 있습니다. 소스 코드 https://github.com/WebCifar/one-page-website-html-css-project-for-practice 2020. 8. 5.
텍스트 3D효과 및 애니메이션 - Pure CSS3 CSS3로만 사용해서 텍스트 3D효과를 만들어 보았습니다. 덤으로~ 애니메이션 까지 ^^ 2020. 8. 4.
CSS 카드 호버 효과 | 3D 뒤집기 2020. 7. 30.
반응 형 CSS 3D 이미지 호버 효과 | HTML 및 CSS를 사용하여 호버에서 3D 플립 카드 효과 www.youtube.com/embed/HHqBS7xFnPM" 반응 형 CSS 3D 이미지 호버 효과 | HTML 및 CSS를 사용하여 호버에서 3D 플립 카드 효과 2020. 7. 30.

티스토리툴바