Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

html 18

윤디자인 티머니 폰트

스크롤 애니메이션과 폰트 사용해보기를 위한 스크립트 작업, 비디오 백그라운드 재생 작업이 진행된 윤디자인의 티머니 폰트 소개 웹사이트 입니다. 사이트명 : 윤디자인 티머니 폰트 주요 작업 : 반응형 퍼블리싱 개발 환경 : HTML + CSS + JavaScrtip 사이트주소 : http://tmoney.webi.kr 상세 작업 내역 반응형 퍼블리싱 스크롤 애니메이션 폰트 변경 스크립트 개발 백그라운드 동영상 플레이

Experience/Web 2022.01.26

CSS로 마우스 커서를 내가 원하는 이미지로 변경하기 | 커서가 안 바뀔 때

웹사이트를 만들 때 클라이언트의 요구 혹은 디자이너의 요구로 인해 커서를 내가 원하는 이미지로 변경해야 하는 경우가 생깁니다. 시스템에서 제공해주는 기본 커서로 변경하는 방법은 매우 간단합니다. 시스템 기본 커서로 변경하는 방법 입니다. .link:hover { cursor : pointer; } 가장 많이 쓰이는 방법이며, 특정 태그를 마우스 오버 했을 때 손가락 모양으로 바꾸는 코드입니다. pointer 외에도 기본적인 시스템 커서는 아래 링크에서 확인해 보시면 됩니다. https://developer.mozilla.org/ko/docs/Web/CSS/cursor cursor - CSS: Cascading Style Sheets | MDN CSS cursor 속성은 요소 위에 마우스 커서가 올라갔을 ..

Web/CSS 2022.01.10

반응형 사이트 사이즈 계산에는 CSS의 calc()가 최고죠!!

요즘은 반응형으로 사이트 제작을 많이 하는데요 반응형 사이트를 제작할 때 아주 애먹는 부분이 있죠.... 바로 사이즈를 어떻게 잡느냐입니다. 보통 가변 사이즈로 설정해야 해서 % 나 em, rem으로 사이즈를 지정해 주지만 특정 영역만 고정 사이즈로 해줘야 할 때가 있습니다. 그럴 땐 정말 머리가 지끈..... 무슨 말인지 이해가 안 되시는 분들을 위해 샘플 코드와 이미지로 준비했습니다. 컨텐츠 영역 컨텐츠 영역 이렇게 왼쪽에 이미지 사이즈를 고정으로 해주고 싶을 때 %로 사이즈를 줬을 때 Width 사이즈에 따라 왼쪽 이미지 영역에 여백이 생겼다 없어졌다 하는 걸 보실 수 있습니다. 그래서 이미지 영역은 px로 고정을 해줘야 하는데 그럼 콘텐츠 영역에 % 사이즈를 주기가 애매해져요~ 저는 이러한 경우에..

Web/CSS 2021.08.24

파비콘(ico 파일) 홈페이지에 적용하기 | HTML LINK 태그

오늘은 파비콘을 홈페이지에 적용하는 방법에 대해서 알아보겠습니다. 파비콘이 뭔지 모르신다고요??? 파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어로 주소창이나 즐겨찾기에 표시되는 작은 아이콘이에요! 파비콘이 뭔지 아셨다면 필요한 파일도 만드실 겸 해서 아래 링크로 한번 다녀오시면 될 거 같습니다.^^ 2018.07.03 - [Web/Design] - 파비콘 만드는 법 | 이미지 파일을 ico 파일로 변환 방법 파비콘 만드는 법 | 이미지 파일을 ico 파일로 변환 방법 안녕하세요 웹아이_디혜입니다:D 파비콘?? 파비콘이 뭔지도 몰랐던 저... 그런데 이제 파비콘 만드는 법까지 포스팅하는 날이 오네요 파비콘은요 조기 보이시는거 저겁니다..ㅋㅋㅋ 만드는 방 blog.webi.kr 혹시라도 ..

Web/HTML 2021.08.23

CSS의 선택자_두번째 | 속성선택자

안녕하세요 웹아이입니다. 속성선택자태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정할 수 있습니다. [속성] 형식지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용합니다. 선택자 속성 선택자 가상클래스 선택자 선택자· 속성 선택자· 가상클래스 선택자 A 태그 중 href라는 속성이 있는 요소를 찾아내 거기에 배경색을 노란색으로 적용합니다. [속성 = 값] 형식주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용합니다. 선택자 속성 선택자 가상클래스 선택자 선택자· 속성 선택자· 가상클래스 선택자 A 태그 중에서 target=“_blank”인 링크, 새 탭으로 열리는 링크에 배경색을 노란색으로 적용합니다. [속성 ~= 값] 형식[속성=값] 과 다르게 비교할 값이 여러 개일 경우, 그 중 하나만 일..

Web/CSS 2018.07.16

CSS의 기초_첫번째

안녕하세요 웹아이 입니다. 오늘은 CSS (Cascading Style Sheet)에 대해 간단히 설명해 보겠습니다. HTML과 CSS?? HTML이 텍스트나 이미지, 표 같은 각 요소를 이용하여 웹 문서에 뼈대를 만드는 것이라고 한다면, CSS는 텍스트의 색상이나 크기, 이미지 크기나 위치, 표의 색상 등 웹 문서의 디자인 요소를 담당하는 것입니다. 쉽게 말해 웹페이지의 인테리어라고 이해하시면 될것 같네요!~~ CSS는 다음과 같이 태그 안에 넣어서 사용이 가능합니다. 하지만 저렇게 태그안에 넣지 않고 선택자를 이용해서 사용해주는 경우가 많습니다. 왜 그렇게 사용해야할까요? 1. 웹 문서의 디자인과 내용을 분리할 수 있습니다. 내용을 건드리지 않고 스타일 시트를 이용해 디자인만 변경해서 완전히 다른 느..

Web/CSS 2018.07.04

집에서 웹서버 운영 쉽잖아?? | 윈도우 WAMP 설치 방법!!

집에 있는 컴퓨터로 웹서버를 손쉽게 만들 수 있다는 사실을 아시나요?? 네 제가 알려드리겠습니다.!! 어렵지 않으니 아래 동영상을 보시면서 따라하시면 되요!~^^ 설치는 잘 하셨나요? 처음 찍은 동영상이다 보니 부족한 부분이 많이 보입니다.ㅠ 점점 더 좋아 질꺼라 기대하고 있어요... 알고 싶은게 있으시면 댓글로 남겨주세요. 제가 아는거라면 강좌 만들어 보겠습니다.^^ 감사합니다.~~~

Server 2018.07.03