CSS8 이미지 스프라이트 기법과 백그라운드 표현방법, IR효과 이미지 스프라이트와 백그라운드 표현 이 기법은 우리나라에서 아무도 모를 수가 없는 대표 사이트 '네이버'에서 자주 사용되는 기법입니다. 이게 도대체 무슨 기법이길래 네이버에서 사용을 할까요? 같이 알아보자구요! ■ 개념 여러 개의 이미지를 하나의 이미지로 합쳐 관리하는 이미지를 뜻합니다. 웹 페이지가 서버에 이미지를 요청할 때, 사용된 이미지가 많은 경우 당연히 이미지의 수 만큼 요청을 하므로 로딩 시간이 오래 걸리겠죠? 하지만 위의 개념대로 여러개의 이미지가 들어가 있는 하나의 이미지만 요청한다면 로딩시간을 대폭 감소시킬 수 있습니다. ■ 장점 - 많은 이미지를 각각 서버에 요청하면 로딩 시간이 오래 걸릴 수 밖에 없는데, 뭉쳐진 이미지를 하나만 부르면 되므로 로딩시간이 현저히 감소합니다. - 많은 이.. 2022. 8. 21. 애니메이션 효과 움직이는 강아지 만들기 이번시간에는 CSS를 이용해서 움직이는 강아지 애니메이션를 만들어 보겠습니다.오늘 작업은 코드펜으로만 작업하였고 html소스는 Pug를 이용했고 CSS는 SCSS를 이용해서 작업했습니다. 강아지는 언제봐도 귀엽죠...💕 같이 만들어 봐요!!🐾 ■ 그래서... Pug가 뭔가요? Pug는 html을 조금 더 세련되게 쓸 수 있는 템플릿 언어, express 뷰 엔진입니다. 여기서 템플릿언어란 간단하게 설명하자면 자바스크립트를 사용해서 HTML을 렌더링할 수 있게 해주는 엔진에서 사용되는 언어입니다. ▶ 왜 쓰는거죠? ' 강아지 보고 가실게요' 이렇게 쓰는 것을 '.dog 강아지 보고 가실게요' 처럼 쓸 수 있습니다. 너무 편하죠?사실 어느 템플릿 언어를 사용해도 무방하나 이 Pug라는.. 2022. 8. 18. 웹사이트 만들기/ImageType 02 사이트 만들기 _ 이미지 유형02 기존 이미지유형에서 한단계 더 발전한 이미지 유형02에 대해 공부해보겠습니다. 레이아웃이 3개로 늘었고 마우스 오버했을때 효과를 부여해보겠습니다. 이미지 유형01번처럼 카드타입유형02번의 코드를 활용해서 만들어 봅시다. transform: scale(1.05); 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 속성입니다. * scale() : x축 or y축으로 확대/축소 * rotate() : 지정 요소 회전 * translate() : 요소 x축 or y축으로 이동 * skew() : x축 or y축 기울이기 transition: all 0.6s ease-in; 속성을 서서히 변화시키는 속성입니다. transition: property timing-function.. 2022. 8. 17. 웹사이트 만들기/ImageType 01 사이트 만들기 _ 이미지 유형01 이번엔 새로운 유형인 이미지 유형에 대해 알아보겠습니다. 기존에 했었던 카드타입과 굉장히 유사했던 부분이라 어렵지 않게 따라하실 수 있을거에요. 기존 카드타입01번과 레이아웃은 크게 다르지 않으므로 카드타입01번의 코드를 조금 활용해서 작업했습니다. background: url(이미지경로) no-repeat center; 이미지 위에 글씨를 나타내기 위해서는 여태까지 position을 이용했었는데요. 이번에 새롭게 등장한 이녀석은 배경 자체에 그림을 입히는 방법입니다. no-repeat과 center는 선택사항이고, url()안에 이미지경로만 입력해주면 원하는 그림을 단색배경대신 사용할 수 있습니다. * no-repeat: background-repeat속성에 해당하는 .. 2022. 8. 17. 미디어 쿼리 미디어 쿼리 해상도에 따라 CSS를 분기시키는 반응형 웹에서는 없어서는 절.대 안되는 기법입니다. 태블릿,모바일기기 마다 가로폭이 다른데 크롬브라우저의 경우 개발자도구(F12)를 열고 Toggle device Toolbar를 눌러 기기마다 해상도를 확인할 수 있고 기기 모델도 추가 가능합니다. 다음 트로이(http://troy.labs.daum.net/)에서는 실제 작동 화면을 확인할 수 있습니다. 미디어 쿼리는 아래와 같은 상황에 사용할 수 있습니다. ▷ CSS @media와 @import .@규칙을 사용해 특정 조건에 따라 스타일을 적용할 때 ▷ HTML요소에 media 특성을 사용해 특정 매체만 가리키게 할때 ▷ Window.matchMedia()와 MediaQueryList.addListener(.. 2022. 8. 14. CSS 기본 문법 CSS 기본 문법 여러분은 같은 음식을 먹더라도 그냥 대~충 차려놓은 음식과 보기 좋은 음식 중 어느 음식이 더 드시고 싶으신가요? 당연히 같은 음식이라면 보기 좋은 음식을 고르시겠죠? 홈페이지 제작도 똑같아요! 이런 겉으로도 보기 좋게 만들어주는 것이 바로 CSS입니다. 이러한 CSS를 정의하는 방법에는 여러 방법이 있는데요. 오늘은 그 방법들에 대해 알아보겠습니다. (공통 사항으로 주석표시는 /* */으로 합니다.) 01_ 내부 스타일 시트 HTML 코드를 작성하는 HTM 문서 내부의 내부스타일시트예제 결과보기 내부스타일시트예제 02_ 외부 스타일 시트 실제 가장 많이 사용되는 방법입니다. 스타일 속성을 따로 *.css확장자를 가진 별도의 파일로 저장하고, HTML에서 태그를 이용해서 선언합니다(=불.. 2022. 8. 13. 웹사이트 만들기/CardType 03 사이트 만들기 _ 카드 유형03 사이트 만들기 세번째 시간입니다. 오늘은 카드유형 중 세번째 유형입니다. 기존 텍스트 형태 밑에 프로필아이콘과 간단한 텍스트들이 추가 되었네요! 웹 표준을 준수해서 사이트를 만들어 봅시다. 시멘틱 태그를 사용한 이후엔 h태그가 필수적으로 와야 하는데요. 그래서 html소스의 이후에 h태그를 사용했습니다. 하지만 저희는 이 h태그를 보여주면 안되겠죠? 그래서 이번엔 이 h태그에 class="blind"를 부여해서 blind라는 css속성을 사용해보겠습니다. 그리고, footer부분의 배치가 애매하죠? 저도 어려워요...😥 오른쪽부터 배치될 수 있게 하기 위해 새로운 justify-content 속성인 flex-end를 사용해봐요. justify-content: flex-en.. 2022. 8. 10. 웹사이트 만들기/CardType 01 사이트 만들기 _ 카드 유형01 사이트 만들기 첫번째 시간입니다. 사이의 구성 유형은 메뉴 유형, 배너 유형, 이미지 유형 기타 등등 많은 유형이 있습니다. 그 중 카드 유형에 대해 공부해보겠습니다. 카드 유형 중 기본이 되는 유형입니다. 아래 피그마를 참조하여 똑같이 만들고 웹표준 기준도 준수해봅시다. 보통 wrap의 width 값을 1200px으로 부여했지만, 이번 사이트-카드유형은 양쪽에 살짝식 여백이 있으므로 1160px로 작업합니다. 레이아웃 배치 속성은 'display:flex'를 사용하여 작업하겠습니다. aria-hidden="true" 웹표준을 준수하기 위해 aria-hidden="true"을 사용하였습니다. 청각장애인들이 사이트를 이용할때는 스크린리더를 통해 사이트를 이용하는데요. 위 사.. 2022. 8. 8. 이전 1 다음 반응형
