웹114 [코딩공부_114] SVG를 활용한 웹 페이지 만들기 png나 jpg만 사용하여 웹 페이지를 만들진 않으셨나요? SVG를 활용해서 멋진 웹 페이지를 만들어 보아요!! :) SVG란? SVG(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어입니다. 벡터는 기본적인 도형, 패스 등 일러스트에서 작업하는 모든것이 될 수 있습니다. SVG는 코드를 수정할 수 있기 때문에 다양하게 활용할 수 있다는 장점이 있습니다. - SVG는 크기를 줄이거나 늘리더라도 화질에 영향을 미치지 않습니다. - 원하는 색상을 자유롭게 적용할 수 있습니다. SVG의 파일 용량 줄이기 패스를 정돈하고 가능한 많은 포인트를 제거하고 포인트를 픽셀 값에 맞추어 겹치는 영역을 최대한 제거하여 파일 용량ㅇ르 줄일 수 있습니다. S.. 2023. 9. 30. [코딩공부_113] 반응형에서 이미지 비율 유지하기 반응형에 맞게 이미지를 맞추기 위해 width를 숫자로 계속 지정하고 계시진 않으신가요?? 번거롭지 않게 비율을 그대로 유지하고 반응형이 적용될 수 있게 css 코드를 작업하면 됩니다 :) 엄청 쉽고 간단하니 꼭 봐주세요!! 이미지 그대로의 비율 유지하기 .img_div { width: 100%; } .img_tag { max-width: 100%; height: auto; } 가로 세로 비율 유지하기 .img_div { position: relative; width: 100%; height: 0; padding-bottom: 56.26%; overflow: hidden; } .img_tag { position: absolute; top: 0; left: 0; width: 100%; height: 100.. 2022. 2. 3. [코딩공부_112] 내가 작성한 코드가 왜 적용되지 않을까? 퍼블리싱을 하다보면 자신의 의도대로 CSS가 먹히지 않는 경우가 많습니다. 이러한 경우는 많은 경험이 쌓여야 즉각적으로 대처할 수 있다고 생각합니다. 퍼블리싱을 한지 2년 조금 넘은 사람으로써 느끼지만 적용되지 않는 경우는 거의 비슷한 이유로 인해 발생합니다. 그러므로 알고 넘어가면 나중에 큰 도움이 될 거라고 생각합니다 :) CSS가 적용되지 않는 경우는 일반적으로 다섯가지가 있습니다. 1. CSS 파일의 경로가 올바르지 않은 경우 2. 캐시로 인한 이전 CSS 파일이 적용된 경우 3. 우선순위에서 밀려난 경우 4. 다른 엘리먼트에 깔려 안보이는 경우 (=Position으로 인하여 안보이는 경우) 5. 올바르지 않은 함수 호출 순서의 경우(JS) 1. CSS 파일의 경로가 올바르지 않은 경우 가장 일반.. 2022. 1. 3. [코딩공부_111] 개발자 도구를 유용하게 사용해 보자! 개발자도구를 그냥 HTML 구조만 보는 용도로 사용한다면 꼭 보세요! 여러분들은 개발자도구를 어떻게 사용하시나요 ? 사이트의 사진을 저장하거나 CSS 스타일 등등 개발자도구를 활용하여 많은 힌트와 도움을 줍니다. 개발자도구를 100% 활용할 수 있다면 더 좋은 사이트를 제작할 수 있습니다! 오늘은 개발자도구를 100% 활용하고 나의 사이트에 적용하는 방법에 대해 알아보고자 합니다. 저는 크롬 브라우저의 개발자도구를 활용하여 블로그 포스팅을 하려고 합니다 ^^ ! 브라우저마다 조금씩 기능의 디테일이 다르기 때문에 알려드립니다! 그럼 바로 시작해 볼까요 ? 개발자 도구가 필요한 이유 개발자 도구는 개발을 도와줄 수 있는 다양한 도구를 브라우저에서 제공해 주는 기능입니다. 웹페이지의 구조가 복잡하고 자바스크립.. 2022. 1. 3. [코딩 공부_110] 코딩할 때, 이렇게 하자는 나의 다짐! 코딩을 꼭 이렇게 해야된다, 하면 안된다는 건 사실 없다. 사용자가 직접 코드를 보지 않고 어떤 코드여도 결과만 잘나오면 되기 때문이다 하지만 개발하고 디자인하는 입장에선 다르다 ! 홈페이지를 하나 제작하면 계속 유지보수를 하기 때문에 내가 아닌 다른 작업자가 작업할 때, 최대한 알아보기 쉽게 해야하는 것이 좋은 코딩이라 생각한다 나는 학원에서 공부를 하다보니 학원에서 배운대로 실무에서 작업을 했다 생각해보면 꼭 학원에서 배운게 정답은 아닌듯하다 내가 배운 부분은 최신 유행에 맞춘 코딩방식이었다. 사실 최신 유행에 맞춰서 배운다는 것은 개인 입장에선 너무나도 좋지만 실무에서는 마냥 좋은 부분은 아닌듯 했다! 단점은 바로 다른 작업자들은 그 부분을 잘모른다는 것이다 ..! 10명 중 1명만 아는 방법이면... 2021. 12. 4. [코딩 공부_109] css / js 파일 압축 풀기 오랜만에 블로그를 올린다 😂 그동안 너무너무 심적으로 힘들어서 블로그를 생각할 수가 없었다,, 취업하구 바빠서 자기개발을 못했다 ㅠㅠ 지금도 사실 너무너무 피곤하다 ㅠ 금요일에 쉬는데 쉬면 좀 나아지겠찌! 하는 마음이 있다 헤헤................. 아직 디자인만 작업하고 코딩은 작업을 안하고 있다 😥 아직 1개월차라 코딩을 맡기지 않는 듯하다 ! 그래서 지금 열심히 공부 안하면 .... 후폭풍이 장난아닐거다라는 생각이 휙휙 돈당,, 지금 서서히 ftp 작업 요청을 해주시기 떄문이당 지금은 홈페이지 디자인 시안 작업 중인데 너무 떨린다 ㅠㅠ 내꺼를 쓸 지도 잘모르겠지만 그냥 하고 있는데 너무 떨린당 히히키키... 아무튼 오늘 배운 js 파일 압축 풀기에 대해서 포스팅해보고자 한다 서론이 참 길었.. 2021. 10. 20. [코딩 공부_108] article과 section, div를 구분하자! 문득 그런 생각을 했다 article, section, div 태그의 차이는 무엇일까? 생각하고 검색하니 정말 차이가 있었다 나는 아무 생각없이 section으로만 구분했는데 반성하게 된다 ㅎㅎ... 1. article : 옷 한벌이라 생각하면 쉽다. 옷은 갈아입을 수 있고 똑같은 옷을 다시 입을 수도 있고 다른 사람에게 옷을 줄 수 있기 때문이다. 즉 article은 독립적이고 재사용이 가능한 태그이다. (배포 또한 가능) 2. section : 내용이 서로 관계 있다면 section 태그를 사용하면 된다. 서로 관계 있는 문서를 분리하는 역할을 해준다. (문서를 다른 주제로 구분 짓기 위해서!) 3. div : 의미적으로 관계가 없는 것들에 사용한다 (오직 서로 내용을 묶는 역할, 그룹화) 2021. 9. 6. [코딩 공부_107] css animation 예제(스크랩) CSS 애니메이션 18가지 예제 최근에 점점 더 많은 CSS 애니메이션 예제가 웹 사이트에 게재되고 있음을 눈치 챘을 것입니다 . 애니메이션은 올해 웹의 주요 트렌드였으며 아무데도가는 흔적을 보이지 않고 있습니다. 웹 ldrerin.tistory.com [번역]당신이 좋아할만한 CSS 애니메이션 예제 - Design link : https://www.designyourway.net/blog/design/css-animation-examples-that-you-will-like/ 웹 기반의 솔루션, 그리고 애니메이션을 제작하려는 사람이라면 이제 더 이상 플래시를 만들 필요가 없다는.. itun.tistory.com CodeCanyon의 베스트 CSS 애니메이션 20가지 인터넷 역사에 애니메이션 되는 GIF.. 2021. 8. 6. [코딩 공부_106] css diner로 선택자 공부하기 diner를 이용하여 선택자 공부를 하며 게임할 수 있다. CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 춤추는 콩알을 선택하기만 하면 넘어간다! 재미있다 ㅎㅎ 2021. 7. 20. [코딩 공부_105] Symbol Symbol() 함수는 심볼 형식의 값을 반환하는데, 이 심볼은 내장 객체의 여러 멤버를 가라키는 정적 프로퍼티와 전역 심볼 레지스트리를 가리키는 정적 메서드를 가지며, new symbol() 문법을 지원하지 않아 생성자 측면에서는 불완전한 내장 객체 클래스와 유사하다. symbol()로부터 반환되는 모든 심볼 값은 고유한다. 심볼 값은 객체 프로퍼티에 대한 식별자로 사용될 수 있다. 이것이 심볼 데이터 형식의 유일한 목적이다. 매개변수 선택적 문자열. 디버깅에 사용할 수 있는 심볼에 대한 설명으로 심볼 자체에 접근하는 용도로는 사용할 수 없다. 새 원시 심볼을 생성하려면, 심볼을 설명하는 선택적 문자열과 함께 symbol()을 쓰면 된다. var sym1 = Symbol(); var sym2 = Sym.. 2021. 7. 14. [코딩 공부_104] js, 이벤트 종류! js 이벤트 종류에 대해 알아보자! 1. 기본 이벤트 - 요소에 개발자가 굳이 이벤트를 연결하지 않았음에도 기본적으로 실행되는 이벤트 (ex. a요소를 클릭 → 해당 경로로 페이지 이동) (ex. 브라우저 화면에서 우측 마우스 버튼을 클릭 → contextMenu 나타남) (ex. form 요소 내 submit 버튼을 클릭 → 지정된 경로로 내용을 전송함) 2. 마우스 이벤트 - click(onclick=addEventListener) : 마우스 버튼을 클릭하고 버튼에서 손을 땠을 때 생기는 이벤트 - dbclick(ondbclick) : 마우스 버튼을 두번 연속 더블 클릭함 - mousedown(onmousedown) : 마우스 클릭의 앞 절반 (버튼을 누름) - mouseup(onmouseup) : .. 2021. 7. 11. [코딩 공부_102] drag 이벤트 사용하기 포트폴리오에 drag 이벤트를 사용해서 넣으려했는데 다 만들고나니... 필요가 없어져서 ㅠㅠㅠ 블로그에만 남기기로 했다.. 하하 왼쪽에 있는 검정원을 오른쪽으로 드래그하면 텍스트가 바뀌는 drag 이벤트를 사용했다 ㅎㅎ! Drag로 항해를 도와주세요! 2021. 7. 2. [코딩 공부_102] 동영상으로 웹 디자인 공부해보자! 1. 웹 컴퓨터언어 - 생활코딩 WEB2 - JavaScript - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상 opentutorials.org java script는 정말정말 어려웠다 그럴때마다 생활코딩 강의를 봤는데 너무 재밌고 이해가 잘되서 행복했다. js 외에 다른 내용의 강의도 많다!! 2. 웹 디자인 - 마디아 Madia Designer 안녕하세요 디자이너 마디아입니다. 현재 실무에서 UIUX 디자이너로 활동하고 있으며 전문적인 스킬들을 알려드릴게요 www.youtube.com 웹 디자인과 로고 디자인을 위주로.. 2021. 7. 1. [코딩 공부_101] 반응형 웹 Media Query가 적용이 안되요! 정말정말 반응형 웹 Media Query가 적용이 안되서 엄청 찾아봤는데 정말정말 허무했다.. 적용이 안되는 상황 먼저 설명하겠다 1. '우선순위의 문제'임을 발견 - media query를 작성했지만 media query가 작동되지 않고 기존에 작성한 코드가 작동이 된다. - 우선순위가 문제임이 확실한지 다른 우선순위를 무시할 수 있는 !important를 사용하여 작동되는 지 확인해본다. (결과적으로 !important를 하면, 잘되는 것을 볼 수 있었다.) 2. 우선순위가 문제라면 크게 두가지 경우의 수를 나눌 수 있을 거라고 판단하였다. ① media query 작성방법을 잘못 알고 있나? - media Query의 작성방법 @media screen and (max-width: 768px) { b.. 2021. 6. 30. [코딩 공부_100] (**중요) 웹 호환성과 웹 접근성 드디어 코딩 공부 100에 도달했다 !! 😁(행복) 글 쓰는 걸 좋아하는 건 맞지만 100개 이상 써본 적은 없는 듯하다 ㅎㅎ.. 계속 쭉 써야겠다는 생각이 든다 나의 보물들 .. 그래서 요번에 의미있는 100번째 게시글은 아주아주 중요한 내용을 다뤄보고자 한다 ! 바로바로 웹 호환성과 웹 접근성이다. 웹에서 가장 기본적이고 꼭 지켜야하는 부분이다 1. 웹표준 : 웹에서 표준으로 사용되는 기술이나 규칙을 이야기한다 - W3C, ECMA의 기준을 따르고 시멘틱한 태그 사용을 해야한다! ex) header, footer, h1~h6, img, table, p ...등 Q. 제가 웹표준을 잘지키고 있는 지 잘모르겠어요... ㅠㅠ A. W3C 통합 웹 표준 검사기를 이용해서 검사해보면 된다 Unicorn Nu .. 2021. 6. 27. [코딩 공부_99] jQuery plugin 모음 1. bx slider : slider를 제작할 수 있다. jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com 2. slick slider : slider를 제작할 수 있다. slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 3. unheap : jQuery 플러그인 모음 사이트 Unheap - Pag.. 2021. 6. 24. [코딩 공부_98] jQuery로 img 무한 복제 시키기 1. 무한 복제하기 위 그림을 클릭해보세요! 광클릭 모드 멈추기 2021. 6. 17. [코딩 공부_97] bx slider 사용하기 slick 슬라이더 다음으로 내가 자주 사용하는 bx slider! 정말 방법이 쉬워서 쓴다 ㅎㅎ 아래 링크는 bx slider 사이트이다 클릭 후, click here to install을 클릭하면 1-3번 코드가 나타나는데 그걸 복사 붙여넣기만해도 완성이다 ㅎㅎ jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com 1. bx slider 링크 삽입하기 (head 안에 넣기!) 2. html 작성하기 I am a slide. I am another slide. 3. script 작성하기(html 코드 작성 후, 바로 밑에 삽입!(=끝나는 body태그 바로 위에!) 이렇게 삽입하면!! 기본적인 bx .. 2021. 6. 16. [코딩 공부_96] slick 슬라이더 사용하기 이제 대망의 jQuery를 이용해서 슬라이더를 만들어볼 것이다! jQuery의 최대장점이 여기서 나올것이다 후후 .. 내가 봤을 때, slick 슬라이더와 bx슬라이더가 가장 사용하기 편하고 유명한 듯하다 ! 그리고 설명이 너무 잘되있어서 .. 블로그에 올리지 않아도 잘찾을 수 있을 정도..! #1 slick 슬라이더 1, slick 슬라이더 사이트로 들어간다. slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github... 2021. 6. 16. [코딩 공부_95] jQuery로 modal, tab 만들기 jQuery로 modal, tab을 만들어보자! show modal x introduce Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam similique quo commodi placeat nostrum eius dolore alias reprehenderit aut nisi, est minima! Sunt, vitae illum ratione ut dolor perferendis sed. portfolio tab1 tab2 tab3 tab4 tab1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium mol.. 2021. 6. 13. [코딩 공부_94] jQuery 기본 함수 jQuery를 실습하기 전, 내가 실습하고 싶은 이미지를 가져온다. 선생님은 귀멸의 칼날 이미지로 하셨지만 나는 귀멸의 칼날을 보지 않았기 때문에 코코로 실습해볼 것이다 ✌(내사랑 코코.. 언제봐도 질리지 않는 세뇰ㄹ 데라쿠르즈 ...) jQuery 기본 함수 사용법에 대해 알아보자! 메서드(method) 설명 .show() 보이기 .hide() 감추기 .toggle() 보이기/감추기 .slideDown() 서서히 보이기 .slideUp() 서서히 감추기 .slideToggle() 서서보이기/감추기 .fadeIn() 서서히 보이기 .fadeOut() 서서히 감추기 .fadeToggle() 서서히 보이기/감추기 .addClass() 클래스 추가 .removeClass() 클래스 삭제 .toggleClass.. 2021. 6. 12. 이전 1 2 3 4 ··· 6 다음
