nao3ob
10,000+ Views

[CSS] a:hover/마우스오버

A링크 기본 속성 정리

◆ a:link (아직 클릭하기 전 링크)
◆ a:hover (마우스를 올렸을때 링크)
◆ a:active (마우스로 클릭하는 순간,동안)
◆ a:visited (이미 방문한 후 링크 보여지는 효과)

a{color:inherit; text-decoration:none;}

매 링크마다 저 4가지 속성을 주기가 힘들때, 그냥 부모의 속성링크도 따라갔으면 좋겠다고 생각할때 주는 속성입니다.
◆ color:inherit - 링크 색상이 부모 요소를 따라감
◆ text-decoration:none -데코레이션(꾸미기효과) 없음
그래도 나중에 따로따로 효과를 주면 hover도 되고 데코레이션 효과고 되니 걱정마세요 !

마우스 HOVER 시 선을 그려보자.

우선 해당 소스는 아래와 같습니다.
.box {width:600px; height:300px; background:#fff;}
.box:hover {border:10px solid #색상}
<div class="box"></div>
이렇게 꼭 A 링크가 아니더라도, div:hover도 가능합니다.
마우스를 올려놓으면 (2)번 그림처럼 선이 생겨라 라고 지정해놨기 때문에, 일반 메뉴나 사용하기 좋죠 ㅎ

이미지가 연해졌다가 마우스를 올려놓으면 진해지는 효과 !

우선 해당 소스는 아래와 같습니다.
img {filter:alpha(opacity=40);/*익스용 투명도 필터*/opacity:.40;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"}
img:hover {filter:alpha(opacity=100);/*익스용 투명도 필터*/opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}
<img src="이미지 경로">
이미지에 투명도를 40으로 줘서 흐리게 만들었다가 마우스를 올렸을때 100으로 바꿔라 라고만 지정해주시면됩니다. 참쉽죠 ㅎㅎㅎ ? 반대로할경우에는 투명도 효과를 반대로 주시면됩니다. 역시 이미지 말고도 div 어디든 사용 가능합니다.
◆그외에 다양한 마우스 오버 효과를 볼 수 있는 사이트를 소개합니다.
Comment
Suggested
Recent
좋은 강의 항상 감사드립니다
Cards you may also be interested in
세상에 덜 알려진 와칸다급 득템 정보
요즘 들어 느끼는게 참 맛있는 것도 많고, 사고 싶은 것도 많고, 참가해보고 싶은 것도 많고,,,, 뭔가 누릴 것이 많고 다양해졌다고 느낍니다. 그런데 솔직히 제 돈벌이는 하고 싶은게 많아지는 속도를 따라잡지 못하고 있습니다... -ㅁ- 그러다보니 뭐.. 자연스럽게 할인정보에 관심을 많이 가지게 됩니다. 어차피 살 거 싸게 사면, 남는 돈으로 뭐라도 더 할 수 있으니까요 ㅋㅋ 네, 저는 아끼기보단 조금 즐기렵니다ㅋㅋ 그럼 주변분들이 잘 모르는 제가 간혹 이용하는 꿀팁 공유해보겠습니다. 전시했던 상품이나 리퍼브제품을 싼 값에 살 수 있는 곳입니다. 노트북이나 가전제품 구매 전에는 꼭 들러보는 곳입니다. 컴퓨터를 많이 알지 못해서 그 기준이 너무 높지 않다보니 저에게는 꽤 괜찮았습니다. 특히 이사해서 가전제품들 살 때 잘 활용했네요. 근데 선물용으로는 주의하세요. 전시상품이나 리퍼브제품이라서 포장상태가 안좋은 경우가 많거든요. 저도 청소기 선물하려고 샀다가 난감했던 적이 있습니다 ㅎㅎ 꿀팁을 드리자면, 롯데아울렛 등에도 매장이 있던데 온라인 없는 득템을 할 수도 있습니다. ★★★★★ 점점 신상품 수량이 많아지다보니 상대적으로 할인상품이 적은 느낌이 들지만 그만큼 콜라보나 행사도 많아져서 별 만땅줘봅니다. http://www.ajjuncmall.com/ 공연을 좋아하신다면 혹은 커플이시라면 눈여겨볼 서비스입니다. 입찰을 통해서 보다 저렴하게 티케팅을 할 수 있는 서비스예요. 본래는 공연을 더 저렴하게 본다는 취지였는데 꽤나 괜찮은 공연, 단독 티케팅 공연들도 있다보니 최저가보다는 공연을 보게 되었다는 것만으로도 만족을 주곤 합니다. 하지만 이전에 비해 공연 업뎃속도가 떨어져 점수를 좀 짜게 줘야 할 것 같습니다. ★★★☆☆ https://m.allwin.co.kr/ 특이한 해외직구샵입니다. 해외에서 이슈가 되는 비즈니스를 다루는 뉴스미디어였는데 최근에는 이슈가 되는 비즈니스 상품을 직접 판매까지 하고 있습니다. (뉴스기사 마지막에 구매버튼이 생겼습니다.) 해외에서 잘 나가는 회사들의 성공기를 보여주면서 상품구매로 연결시키니 구매욕이 꽤나 자극됩니다. 아마도 얼리어답터분들께는 참 매력적인 쇼핑몰로 느껴질 겁니다. ★★★★☆ 직접 직구에 비해 가격메리트가 떨어지는 경우를 종종봐서 별 하나 줄였습니다. http://ttimes.co.kr/index.html?menu=pick 무신사나 29cm같은데 입점한 국내 신진디자이너브랜드나 스트릿브랜드를 저렴하게 구할 수 있습니다. 이월상품 위주라서 할인이 크다고 합니다. 할인율이 굉장히 좋아서 여름티셔츠는 1만원도 안하는 가격에 나오는 경우도 많습니다. 요즘 국내신진패션브랜드들이 워낙 인기라서 거품이 좀 있다고 느꼈다보니 상당히 만족스럽습니다. 이월이라곤 하지만 6개월채 안된 제품들도 많고해서 유행에 처지는 느낌은 없습니다. ★★★★☆ 아직은 상품수가 적어서 별 하나 줄입니다. 상품수만 많아지면 꽤 큰 쇼핑몰이 될 것 같습니다. https://mdoutlet.co.kr/
레전드 오브 퍼나나 조각영상
You can enjoy LEGEND OF PURNANA on Youtube! 레전드 오브 퍼나나를 유투브에서도 즐길 수 있습니다! *Information Director : sleepingjuan Music : Sunny from the moon, 'Savanna' Format : Music Video Genre : Fantasy, Drama Running time : 5 min 16 sec -This story tells how Purnana, the blue banana, became friends with Purple and Yellow Monkeys. It shows the Purnana's growth and friendship with two main words(loneliness from difference and an enhanced sense of self-esteem by shifting the way of thinking). *영상정보 감독 : 슬리핑주안 음악 : Sunny from the moon, 'Savanna' 형식 : 뮤직 비디오 장르 : 판타지, 드라마 러닝타임 : 5분 16초 -파란 바나나인 퍼나나가 원숭이인 보라, 노랑 멍키와 어떻게 지금처럼 지내게 되었는지에 대한 이야기이다. 차이에 따른 외로움, 생각의 전환으로 높아진 자존감을 소재로, 퍼나나의 성장과 우정을 다뤘다. If you want to contact, please give me direct message through instagram(@sleepingjuan) or email(juan369@naver.com). 문의사항은 인스타그램(@sleepingjuan)또는 이메일(juan369@naver.com)로 부탁드립니다. #furmonkey #purnana #sleepingjuan #savanna #sunnyfromthemoon #animation #trailer #bluebanana #キャラクター #mv #character #파란바나나 #퍼멍키 #퍼나나 #애니메이션 #art #opening #hgfaf #ㅇㅅㅇㄴ #홍익대학교 #캐릭터 #イラスト #영상애니메이션학부 #2019년홍익대애니메이션졸업작품 #HiAni
폰카메라로 밤하늘을 찍어요 2편 (갤럭시)
1편에선 각 기능에 대해서 알아봤는데요!! 이젠 2편입니다!! (뭔 몇시간도 안지나서.. 보통 사진들 자동으로 많이 찍으실거에요! 요놈이 그냥 찍은겁니다, 별은 하나도 없죠? 왜냐하면 노출이 별을 찍을 만큼 안되서그래요! 그래서 주로 프로모드를 추천드립니다! 뭐... 귀찮으신 분은 야간 모드도 괜찮습니다!! 한 이정도로 찍힌답니다! 근데.. 뭘 찍던간에 일단 하늘이 어때야하는지 알아야 하잖아요? 주로 기상청에서 구름을 보시거나 windy 에서 대충 살펴보시고 찍으심이 좋습니다! 그리고 우리지역에서 별이 보이나? 는 clear outside에서 자신의 지역을 보신 후 좌측 상단에 클래스 보이시죠? 저게 5만 초과하지 않으면 됩니다! (5가 넘으면 보기가 힘들어요!) 제 지역은 4인데.. 이 정도면 맨눈 은하수가 가능합니다! 안개도 없고 구름도 없고 최적의 날씨지요! 그럼 이 상태면 나가서 찍으면 되나? 아닙니다, 달이 뜰때는 피해주세요! 어느 정도냐면 매월 1일에 찍는 노출 값을 달이 한참 뜰때 쓰면 달빛이 사진을 채워줄겁니다.. 그래서 보통 매월 초 , 후 에만 별 사진을 찍고 중에는 달 사진을 많이 찍지요! 그래도 달 사진도 예쁩니다! 이놈도 폰 사진인데요- 망원경이랑 연결해서 찍었답니다! 아무튼 달도 없고 날씨도 좋다! ( 참고로 별을 찍을때엔 제트기류가 낮고 광해가 없고 습도가 낮으면 좋습니다) 그럼 이제 딱 나가서 그냥 폰 눕혀놓고 설정을 이렇게 하세요! F 1.5 / Iso 800 / 초점 MF / 셔터스피드 10 (산쪽으로) 이렇게 찍으심 4급 환경에선 이 정도는 거뜬합니다- 물론 주변에 빛이 없어야하구요! 가로등 주변은 필히 피하세요! 근데 빛이 좀 가린다 싶으면 ISO를 300정도로 해놓고 셔터 스피드를 낮춰보세요! 그리고 이 사진을 보정해줍시다! 보정도 사진 찍는 과정의 일정입니다! 컴퓨터가 부품만 있다고 작동하지 않듯 사진에도 더 생명을 불어넣어 줄겁니다! 이제 사진을 불러옵시다! 저는 아까 찍은걸로!! 사진을 불러오시고 도구로 들어가시면 이게 보이는데요- 여기서는 별 사진에는 이것만 기억하세요! 기본 보정 선명도! 위는 기본 보정입니다! 밝기를 높이면 별이 더 보이고 낮추면 덜 보이긴 합니다만, 빛이 과하다 (주변의 공해로) 그럼 빛을 낮추시면 됩니다! 채도는 높으면 따뜻한 느낌 낮으면 차가운 느낌이 나는데 별 사진은 낮춰주시면 되겠습니다- 대비는 낮추면 별 사진엔 좋아요! <하지만 적당히!! 음영도 잘 조절해주세요! 보통 +-10까지가 안정권이고 크게보면 +-20 까진 볼만합니다! 이제 적당하다 싶으면 우측하단에 체크표시! 위는 선명도! 구조를 건들지 마시고 선명하게를 건드시면 됩니다! (구조는 이후 은하수에서 뵈용!) 적당하게 볼만하다 싶으면 우측하단에 체크표시! 그리고 좌측 상단에 완료를 누르시면 보정한 사진을 저장합니다! 아 그리고 첫 화면에서 우측상단 점 세개 > 설정에서 형식 및 품질에서 화질을 설정할 수 있어요! 저는 jpg 100%로! 이제 저장하시면 snapseed 폴더에 저장 됩니다! 짜잔! 이 정도면 예쁘죠? 이제 다음엔 은하수로 돌아올게요!! 궁금한점은 댓글로! 지적할점도 댓글로!
[인정받는 디자이너가 되기위한 발걸음 그리드]
안녕하십니까 IT 아웃소싱 플랫폼 프리모아입니다. 디자인분야에서 레이아웃을 잡는 것은 기본적이면서 퀄리티 높은 결과물을 만드는데 중요합니다. 물론 웹디자이너분들도 웹사이트를 디자인하면서 배치나 여백, 정렬 등 신경을 많이 쓰고 있을겁니다. 앱디자이너들도 카테고리나 주요기능을 이용자에게 가독성을 좋게하려고 고민하고 계실 것 같습니다. 디자인에서 중요한 레이아웃을 빛나게 도와주는 도구이자 수단인 '그리드(grid)' 를 알아보겠습니다. § 그리드란? 레이아웃의 요소들을 조화롭게 시각화시키기 위하여 사용하는 수평 , 수직의 안내선입니다. 레이아웃을 잡게 도와주는 요소이지 꼭 그리드에 신경쓰다보면 획일화되고 융통성 없는  레이아웃 디자인으로 나올 수 있으므로 틀에 얾메일 필요는 없습니다.  § 그리드의 장점 첫째. 정보의 조직, 명료, 집중화 둘째. 창조성과 객관성의 증대 셋째. 디자인 요소의 통합과 공간의 체계적 통계 넷째. 제작 과정의 합리화를 통한 시간과 비용의 단축 § 그리드의 구성요소 (1) 칼럼 : 글자나 이미지를 배열하기 위해 나눈 세로형태의 공간 (2) 모듈 : 모듈은 가로, 세로가 일정한 간격으로 분할된 한 면으로, 공간을 나누는 기본 단위이다. (3) 마진 : 그리드 외곽의 빈 공간, 화면에 균형과 긴장을 부여, 내용과 이미지를 제외한 나머지 부분 (4) 플로우 라인 : 공간을 수평으로 분할하는 가상의 기준선 (5) 존 : 몇개의 모듈이 모인 별도의 틀 (6) 마커 : 표제와 페이지번호와 함께 사용되어 반드시 동일한 위치에 반복되어야 합니다. (7) 칼럼 마진 : 칼럼과 칼럼 사이의 공간을 말합니다. § 그리드 종류 1. 블록그리드 그리드의 기본으로써 하나의 블록만을 사용하는 디자인으로 1단그리드라고도 불립니다.  글을 많이 적는 서적이나 논문, 리포트에 주로 쓰이는데 반복될 경우 지루한 느낌을 줄 수 있습니다. 2. 단그리드 두개이상의 단으로 나누어 사용한 그리드로써 단의 수의 따라 2단 3단으로 불리는 그리드 디자인 다양한 형태의 단으로 구성될 수 있어 신문이나 잡지에서 많이 쓰이며 '칼럼그리드'라고도 불립니다. 3. 모듈그리드 모듈그리드는 단그리드보다 복잡한 디자인 형태일때 사용하는 그리드형태입니다. 모듈이라는 사각형의 방을 만들어 그룹화하는데 이 잉역을 바탕으로 레이아웃을 정합니다. 모듈을 제대로 사용하지 않을 경우 시각적 혼란을 주기 떄문에 안정된 느낌으로 디자인해야합니다. 4. 계층그리드 직관적인 배치를 사용하여 어떠한 범주에도 들어가지 않고 규칙적이고 반복적으로 쓰이는  다른 그리드와 달리 디자이너의 공간연출 역량이 중요합니다. 주로 포스터나 북디자인, 웹페이지에서 접근하는 방법입니다. § 그리드디자인 하는데 도움되는 사이트 Grid guide <http://grid.guide/>그리드를 생성하는데 수치를 도움받을 수 있는 좋은 리소스사이트입니다. 전체 폭과 열의 수를 입력하면 자동으로 거터 너비 별로 그리드의 수치를 계산해서 알려줍니다, <http://guideguide.me/>를 들어가면 설정을 통해 포토샵에서 그리드를 쉽게 생성할 수 있도록 제공받을 수 있습니다.  웹디자인을 하기전에 그리드를 세팅해 놓고 레이아웃을 잡는다면 이용자들에게  깔끔하고 가독성있는 웹사이트를 설계하실 수 있을 것 같습니다.  또한 그리드를 잘 이용할 수록 숙련도 높은 디자이너로 성장하실 수 있습니다.  디자이너를 꿈꾸는 분들에게 많은 도움이 되셨으면 좋겠습니다.  감사합니다.
[부산IN신문] ‘직관성’ 기반한 디자인으로 최적화된 커뮤니케이션 선사한다! 그래픽디자인 회사 ‘모아그라픽스’
디자인에는 ‘정답’이 없다. 같은 디자인에 대해 사람들이 느끼는 감성과 느낌, 가치 등이 모두 다르기 때문이다. 모두를 만족시키는 디자인을 만드는 작업은 거의 불가능에 가깝다. 따라서 디자인 작업 전, 충분한 소통 과정을 거쳐 고객이 필요로 하는 것을 디자인으로 구현하는 것이 중요하다. 그래픽디자인 회사 ‘모아그라픽스(대표 손모아)’는 편집을 중심으로, 아이덴티티 디자인, 이벤트 디자인, 사이니지 디자인, 도시 디자인 등을 다루는 시각 디자인 에이전시다. 모아그라픽스를 정의하는 키워드는 ‘직관성’이다. 프로젝트에 대한 명확한 전략 수립과 적절한 스토리텔링, 디자인 문법을 바탕으로 고객이 희망하는 최적화된 커뮤니케이션 솔루션을 제공해 호평을 받고 있다. 고객의 니즈를 파악해 이를 기반으로 디자인 기획을 진행하는 ‘모아그라픽스식 디자인 프로세스’는 모아그라픽스가 작업 시 신경을 가장 많이 쓰는 부분이다. 고객이 필요로 하는 것을 시각적 문법으로 어떻게 풀어내 최적화된 솔루션을 제공할 것인지에 중점을 두고 고객과 함께 정답을 찾아 나선다. 모아그라픽스는 갤러리, 박물관, 음악회장, 국제 행사 등 문화 예술 계통 클라이언트와 작업을 진행하고 있다. 일회성에 그치는 보편적 디자인을 넘어, 클라이언트의 상황과 성격에 전략적으로 접근, 정확한 포지셔닝에 기반한 디자인을 제시해 클라이언트의 만족도를 높이고 있다. 모아그라픽스 대표 손모아는 “클라이언트와 소통하며 디자인 결과물을 완성해가고, 최종 작업물에 대해 고객이 높은 만족도를 보일 때 가장 보람을 느낀다”며“아직 2년도 되지 않은 신생 디자인 회사이기 때문에 디자인 포트폴리오를 차근차근 쌓아갈 예정이며, 다양한 고객과 만나는 것이 단기적인 목표다”라고 전했다. 모아그라픽스라는 브랜드명은 메인 아트 디렉터 이름에서 기반한 것이다. 현재 편집 출판 인쇄(책자, 포스터, 브로슈어, 카달로그, 제안서, PPT)와 아이덴티티브랜딩(로고, 브랜딩, 패키지, EI), 사인 디스플레이(안내판, 간판, 사인 가이드, 전시 기획, 전시 홍보관) 등 다양한 작업을 진행하며 빠르게 성장하고 있다. 한편 모아그라픽스는 해운대1인창조기업지원센터 입주기업으로 경영지원, 사업화지원, 시설이용 등을 지원받고 있다. 강승희 기자 / busaninnews@naver.com #모아그라픽스 #시각디자인 #아트디렉터 #스토리텔링디자인 #아이덴티티브랜딩 #편집출판 #사인디스플레이 #그래픽디자인 #브로슈어제작 #리플렛제작 #부산디자인회사 #해운대1인창조기업지원센터 #입주기업