Frontend/CSS6 [CSS] CSS로 인스타그램 마우스오버 이벤트 적용하기 인스타그램처럼 포스팅 한 게시물에 마우스 올리면 좋아요 개수, 댓글 개수를 알려주고 싶었다. 찾아보니 CSS 로 instagram 처럼 mouseover 시 event effect 를 적용 할 수 있어서 바로 적용함. 참고 : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity * 사용방법 * 1. HTML 태그 ${board.boardTitle} ${board.likeCnt} ${board.commCnt} 2. HTML CSS 부분 article{ display: inline-block; position: relative; } article:hover .thumbImg img { opacity: 0.3; .. 2018. 7. 22. textarea 선택 영역 파란테두리 없애는 방법 textarea 사용시 textarea 선택영역이 파란색 테두리로 잡히는데, 이게 싫다면 아래 css 를 먹이면 된다.outline: none; 2018. 7. 16. position 활용하여 더보기 버튼 클릭하면 더보기 메뉴 뜨게 만들기 이런식으로 우측에 있는 더보기버튼을 클릭하면, 회색박스에 있는 더보기 메뉴가 뜨는걸 구현하고 싶었다. 그래서 간단하게 jQuery 나 bootstrap 에서 제공하는걸 사용하려고 찾아봤지만,클릭시 노출되는 리스트는 data-content="" 여기안에 넣어야해서 네비게이션이나 각 기능들을 넣어야 하는 나로선 사용하기가 어려웠다.(data-content 안에서는 html 태그도 안먹음...) 그래서 CSS를 찾아 직접 구현해보았다.1. 더보기 버튼의 이미지 우측값, 하단값을 가져와서 리스트의 css top, right에 적용시킨다.2. 리스트는 float 되는 형식으로 떠야하므로 z-index=10 값을 준다.3. 더보기 버튼의 position은 relative / 리스트의 position은 absoult.. 2018. 7. 12. @media와 flex 활용하여 화면 줄였을 때 보여지는 정렬순서 바꾸기 원래는 한 화면 기준으로, 좌측에는 게시물정보 / 우측에는 유저와 댓글정보가 보여졌다. 근데 이게 화면을 줄였을 때 (모바일 웹 또는 앱으로 볼 생각에)유저정보가 맨 밑으로 내려가서 마음에 안들었고, 이걸 수정하는 방법을 찾았다. 바로 CSS의 @media 와 flex 태그 이용하기.123456@media only screen and (max-width: 600px) { .container{ display: flex; flex-direction: column-reverse; }}Colored by Color Scriptercs@media 태그로 화면의 가로사이즈가 600px 이하로 떨어지면 flex 기능을 활성화 하고, 나열되는 컬럼을 역순으로 보여주겠다는 소스. container 안에 좌측 / 우측 정.. 2018. 7. 12. CSS의 flex활용하여 인스타그램, 페이스북처럼 유저정보 만들기 * 변경 전 * * 변경 후 * 원래 아래처럼 한 줄을 div로 묶고, 그 안에서 span 을 3개로 나눠 정렬한 뒤 두번째 span에서 위아래로 나누고 싶었는데..막상 작업해보니 정말 span / div 태그에 대한 아무런 지식도 없이 그저 생각일 뿐이었다..그래서 인터넷 찾고 공부해보니 아래처럼 div 안에 div 로 3개를 나눈 뒤, CSS에서 제공하는 flex 를 적용시켜파란 div엔 flex-direction:row (가로로 정렬), 두번째 div엔 fiex-direction:column (세로로 정렬) 을 먹혀야 하더라.공부할 때 참고한 사이트 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Con.. 2018. 7. 12. CSS 처음 접할때 공부하기 좋은 사이트 http://ko.learnlayout.com/총 19페이지로 존재하는 CSS 기초학습용 페이지인데,다 읽으면 CSS에 대한 개념에 대한 기본기를 충분히 다질 수 있어서 좋은 것 같다. 2018. 7. 2. 이전 1 다음
