웹/CSS71 [코딩공부_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. [코딩 공부_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. [코딩 공부_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. [코딩 공부_92] 마우스 커서 이미지 변경하기 1. Custom Cursors - 커서 모양을 이미지로 바꿀 수 있다 * 모바일용 브라우저 / 오페라 / 익스플로어 버전 6미만 적용이 되지 않음! 2. 마우스 커서 이미지 변경 * 첫번째 이미지를 가져오지 못하면, 두번째 이미지를 가져오게 되고 그 또한 가져오지 못한다면 auto 즉 기본값이 적용된다. 브라우저 호환성을 위해서 url을 먼저 나열한 후, 키워드 값을 입력하도록 한다. * 이미지 크기는 128px 까지 허용되지만 32px가 가장 적당하다 ** 반투명한 이미지는 윈도우 xp이전 버전에서 적용되지 않으며, 익스플로러에서는 gif나 jpg, png 등은 적용되지 않으며 cur와 ani파일만 적용된다. 반면, 파이어폭스에서는 ani파일이 적용되지 않는다 *** cur 파일은 포토샵에서 사용하지.. 2021. 6. 9. [코딩 공부_82] flex 게임을 해보자 오늘은 flex 게임을 해보았다 개구리를 이동 시켜서 개구리와 똑같은 색상의 잎에 이동시키는 단순한 게임이다 Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 위 사이트를 들어가서 게임을 하면 된다! 귀여운 개구리들이 반겨줄 것이다!! 총 24단계까지 있다! 위에 힌트 슬쩍슬쩍보면서 했더니 금방금방 깬거 같다 ㅎㅎ.. 근데 마지막이 너무 어려워서 지웠다가 썼다가 계속 반복했다 후우... 시간이 쪼금 걸렸지만 완성하니 뿌듯하다 나는 또 뭐든 자랑하는 타입이기 때문에 냅다 캡처 해버렸다 찰칵찰칵 뿌듯 2021. 5. 25. [코딩 공부_81] flex에 대해 알아보자 hanbom 사이트를 클론코딩하며 가장 많이 봤던 부분이 flex였다! 그 당시엔 float만 배워서 float만 사용했다 ㅎㅎ.. 호환성이 float이 더 좋아서 float을 자주 사용하지만 flex가 더 최신이고 사용법이 쉽다는 점! 나는 flex를 선호하지만 한가지만 사용하면 안된다!! 사이트에 따라 사용해야한다!! 1. flex : layout 배치 방식 - flexbox가 웹 개발자들의 관심 받게 된 이유 중 하나는 웹 최초로 적절한 정렬 기능을 제공했기 때문이다. - 가로/세로 중앙 정렬을 쉽게 할 수 있다!! - flex 속성은 부모와 자식이 꼭 필요하다(부모는 container, 자식은 item) 2. flex 사용하기 - 부모 요소에 display : flex;로 시작 - 가로 배치 - .. 2021. 5. 24. [코딩 공부_79] hanbom-project 클론코딩 완성 일주일동안 개인 프로젝트를 하였다! 자신이 하고 싶은 사이트를 골라 클론코딩 하는 시간이었다 선생님께서 예전에 영자닷컴?을 하라고 하셨었는데 새카맣게 까먹고 새로 찾아본 사이트가 hanbom studio였다 (열심히 찾았는데 안하기 쫌 모해서 고집 부렸다 ㅎㅎ... 다 배우고 난 뒤에 해볼 예정이다 허허) 한봄스튜디오 Digital Creative Group -The belief of the Mastership hanbom.com 뭔가 기능이 많아서 공부에 도움되겠구만!하고 했는데 구석구석 파헤쳐보니 온통 자바스크립트 천지였다 .. 자바스크립트로 구현할 수 있는 부분이 5개?였다.. 하지만 자바스크립트를 배우지 않았기 때문에 꼼수 몇개를 부렸다 ㅎㅎ 자세한 내용은 코드를 보여준 후 이야기하도록 하겠다! .. 2021. 5. 22. [코딩 공부_78] transform-origin? transform-origin은 회전 중심을 지정하는 속성이다. hover나 animation 등 움직이는 모션을 줘야할 때 또는 content 눕히기 등 필요한 속성이다!! 나는 content를 눕혀 나열하기 위해 transform-origin 사용하였다! 1. transform-origin : CSS transform 속성과 함께 사용되는 속성으로서, 회전 중심(원점 기준점)을 지정한다. - 초기값은 50% 50%이다. 백분율(%) 키워드 0% 0% top left 0% 50% left / left center 50% 0% top / top center 0% 100% bottom left 50% 100% bottom / bottom center 100% 50% right / right center 1.. 2021. 5. 21. [코딩 공부_76] css 스크롤바 스타일 변경하기 ** 프로젝트를 진행하면서 어려웠거나 막혔던 부분에 대해 포스팅하는 시간을 가져보도록 하겠다!! 첫번째는 스크롤바 스타일을 변경해보았다! css 스크롤바 스타일을 변경해보았다!! 위 내용을 복사 붙여넣기해서 변경하기만 하면 된다!! 너무 쉽게 바꿀 수 있어서 "엇 정말 이렇게 하면 되는건가!!"하는 생각이 들었다 ㅎㅎㅎ 2021. 5. 14. [코딩 공부_75] 한화 솔루션/케미칼 클론코딩(완성) 회사소개 회사개요 걸어온길 중앙연구소 지속가능경영 글로벌 네트워크 사업영역 전체사업분야 PO PVC CA TDI ASR 인재채용 인재상 직무소개 인사제도 제품검색 view more . 대한민국 대표 석유화학 기업, 한화솔루션/케미칼을 소개합니다. 회사소개 삶의 가치를 높이는 기술기업, 한화솔루션/케미칼 more 회사소개 설립 이래 한결 같은 자세로 기술 개발에 전념해 오고 있습니다. more 회사소개 세상을 더욱 풍요롭게 하고 지속가능한 내일을 만들기 위해 노력하고 있습니다. more . 끊임없는 기술 혁신으로 미래 성장 동력을 지속 발굴합니다. 01Chlorinated Polyvinyl Chloride CPVC 한화솔루션/케미칼은 국내에서 처음으로 자체 기술로 CPVC를 생산하는데 성공하고 2017년 .. 2021. 5. 13. [코딩 공부_74] 한화 솔루션/케미칼 클론코딩(미완성) 오늘은 한화 솔루션/케미칼 클론 코딩을 하였다 너무너무 빨라서 따라가기 너무 힘들었다,, 속도에 적응할 거 같으면 빨라지구 빨라지구 빨라진다 😂 집중해서해도 너무너무 빨랐따 ㅠㅠ 그래도 이만큼 결과가 나오니 뿌듯은 만땅! ** 홈페이지를 만들 때, 기본 재료 >> 폴더 : image / css 파일 : index.html / main.css / responsive.css / reset.css / layout.css / common.css 위 재료를 정리하면서 사용해야한다! 코딩은 정리가 반인 거 같다 엉망진창으로 정리를 해버리면 엄청 어려워지고, 정리를 가지런하게 예쁘게! 해두면 쉽게 할 수 있다!! 위 재료를 이용해서 한화 솔루션/케미칼 클론코딩을 해보았다!! 아직 미완성이다 header와 footer.. 2021. 5. 11. [코딩 공부_73] 반응형 웹, 넷플릭스 실습하기 반응형 웹, 넷플릭스 실습을 하였다 근데 화면 크기를 조정할 때마다 header:after로 그라데이션 준 부분이 자꾸 움직이는 것이었다.. 그래서 거의 3시간 넘게 그거 가지고 씨름하다가 도저히 못풀겠어서 그냥 잘래 하구 잤다 ㅎㅎㅋㅋ 오늘 승부를 보자하고 키고 10분도 안되서 해결했다,, 생각보다 너무 허무했다 ,,, 그냥 height를 100%줬으면 된건데 난 뭣하러 ......... ㅠㅠㅠ???? 그랬을까 싶다 .. 그래도 후련하다 하하 netflix 강철부대 Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem hic sapiente unde culpa asperiores repudiandae quas, voluptate voluptatem.. 2021. 5. 10. [코딩 공부_72] 반응형 웹 실습하기 3 오늘은 반응형 웹을 실습하기 위해 내 사랑 무민은 이용해서 간단하게 만들어 보았다 재밌지만 힘들다 media query를 사용할때 {} 열림 닫힘을 잘봐야될거같다 닫혀있는데 밑에다가 media query안에 넣어야할거 줄줄 적어놓고 어! 버그생겼다 !! 이러고 있었으니 .....ㅠㅠ menu1 menu2 menu3 2021. 5. 9. [코딩 공부_71] 반응형 웹 실습하기 2 반응형 웹을 실습하는 시간을 가졌다 요새 자꾸 이상한 오타로 시간을 지체하고 있다.. 수업시간에 하다보면 오타때문에 안되는 경우가 많은데 그럴때는 그냥 슥 넘기고 해야하지만 그게 잘안된다 😥 오류가 떴는데 그냥 넘기고 다른 걸 하는게 너무 힘들다 ㅠㅠ.. 그래서 시간이 더 오래 걸리는 거 같다.. * 알파카 헤더 실습할 떄 너무 힘들었다,, 작아졌을 때 btn-toggle 부분을 클릭하면 menu가 나와야하는데 안나와서 고생을 많이 했지만 역시 오타떄문이었다.. 노트북 키보드에서 그냥 컴퓨터 키보드라해야하나 그런 키보드로 바꾸고 난 뒤부터 오타가 엄청 나고 있다 ㅠㅠ.. 얼른 적응해야겠다.. 2021. 5. 8. [코딩 공부_70] **media query 순서 / 반응형 웹 실습하기_1 @media query를 사용할 때, 주의할 점!! ① css는 위에서 아래로 실행한다 > breakpoint도 순서를 지켜야 한다 ② media query의 조건이 맞으면 코드가 적용된다 > 순서에 맞게 작성 필요 ③ 데스크탑이 먼저 일 때는 max-width 사용하고, 모바일이 먼저 일 때는 min-width을 사용한다 * max-width 사용시 스크린이 큰게 위로 와야한다 * min-width 사용시 스크린이 작은게 위로 와야한다 desktop mobile 가로 배치(float, inline-block) 세로 배치(none, block) px % 긴 걸 줄바꿈(br) 피카츄 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum repu.. 2021. 5. 8. [코딩 공부_69] css의 클래스명에 대하여 네이밍 정하기? 코딩을 할 때 가장 중요한 부분이라 생각한다 특별하게 이 네이밍으로 하세요! 하는 건 없지만 기준없이 네이밍을 정하게 되면 스타일을 수정하거나 추가할 때, 헷갈리고 코드가 엉망이 될 수 있다 그리고 함께 작업하는 부분이라면 더더욱 기준없이 클래스명을 지어버리면 안된다!! [코딩 공부_35] bem class명 규칙 오늘은 css 클래스 네임을 어떻게 지으면 좋을지 고민하는 시간을 가져보도록 하자! 1. BEM의 기본 구조 - BEM은 Block, Element, Modifier를 뜻한다. - 저 세가지를 이용하여 각각 __와 --로 구분한다. bee-blog-0.tistory.com 전에도 클래스명 관련 글인 BEM 규칙에 대해 포스팅한 적 있지만 나는 코딩 할 때, camel case를.. 2021. 5. 8. [코딩 공부_68] 반응형 웹에 대하여 1. 반응형웹이 왜 필요할까 - 태블렛, 스마트폰과 같은 전자기기 사용이 늘어나면서 그에 맞는 크기로 웹을 보여주기 위해 필요해졌다. 2. 반응형 웹은 무엇인가 - 고정된 형태가 아닌 유동적으로 변하는 웹이다 3. 반응형의 핵심 포인트 - 고정(fixed) > 유동(fluid)으로의 변화 - breakpoint로 미디어에 따른 변화주기 4. 그러면 웹엔 반응형만 있는 걸까? - NO!! 적응형 웹도 존재한다 적응형 웹은 device(데스크탑, 타블렛, 모바일)별 독립적인 템플릿 제작 후 디바이스 환경에 따라 랜딩 되는 웹이다 반응형 웹에 대해 더 자세하게 알아보자 ! 1. 데스크탑, 태블렛, 모바일의 디바이스 크기 값은? - 데스크탑 : 1024px - 태블렛 : 768px - 모바일 : 320px 2... 2021. 5. 8. [코딩 공부_67] float으로 layout 설계하기 1. 레이아웃 설계하기 - layout이란, 웹 사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것 - layout의 핵심은 블록레벨 요소들을 원하는 위치에 배열하는 것이다 2. 레이아웃 side left right main article article2 article3 footer 이처럼 다양한 레이아웃이 있고, float을 이용하면 이런 레이아웃을 뚝딱 만들 수 있다는 장점이 있다 다음 시간엔 레이아웃을 이용한 그리드를 배운다 ! 정말 웹페이지에 대한 걸 다 배워가고 있다는 느낌이 든다 ㅠㅠㅠ 포트폴리..오........ 2021. 5. 8. [코딩 공부_66] float simple project-2 실습하기 코딩 수업을 할 때 노트북을 이용해서 코딩을 한다 그 전에는 타자 치는 일이 별로 없어서 노트북 거치대를 해도 딱히 신경 쓰이는 부분이 없었는데 타자 치는 일이 많아지다보니 노트북 거치대가 불편해져버렸다😥 그렇다고 노트북 거치대를 포기하면 내 목이 자라목이 될 거 같아서 다이소 키보드를 하나샀는데 이렇게 편할 지 몰랐다 ㅎㅎㅎ 다이소는 정말 저렴하고 가성비 최고인 거 같다! 나중에 고장나면 멋진 키보드를 장만하겠다!! 원래 영타도 평균 190타정도 나왔는데 손목에 편한 키보드를 써서 그런건가 평균 240타가 나온다 너무 행복하다! 이제 본론으로 들어가자면 float simple project 2번째를 실습하였다 travel101 취미 수익 창출 직무교육 데이터 개발 md 추천 여행지 Newyork Lor.. 2021. 5. 8. 이전 1 2 3 4 다음
