반응형 CSS3 html 포인터 변경, 커서 변경 마우스를 가져갔을때 스타일이 바뀌는 것 쯤이야 style 태그 혹은 css 에 쉽게 적용할 수 있습니다. 하지만, 매번 div 하나를 위해 css 클래스를 만들고 :hover 와 같이 작성을 하는 것은 참 귀찮습니다. 그래서 오늘은 div의 style=""태그 안에 사용할 수 있는 onmouseover 효과를 적겠습니다 커서를 적용을 할 때에는, 많은 방법이 있겠지만, 설명드리게 될 방식은 한 번(한 페이지)만 실행될 커서 변경에 대한 코드입니다 아래는 지정할 수 있는 커서들의 목록이에요! auto 사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 text를 사용합니다. default 플랫폼에 따라 다른 기본 커서. 보통 화살표입니다. none 커서 없음. context-.. 2022. 10. 4. 반응형 웹페이지 만들기의 시작 스마트폰의 대중화로 예전과는 달리 웹사이트 방문을 위해 사용하는 기기의 비중에 스마트폰이 압도적인 비중을 차지하기 시작했다. 그렇다고 데스크탑 화면을 버릴 순 없다. 그렇다면 우리는 둘 중 하나도 버릴 수 없다. 반응형 웹을 만들것이다. See the Pen by Junmannn (@Junmannn) on CodePen. 아 돌려봤는데 이게 블로그에서 바로 페이지 크기 변경하면서 볼 수가 없구나 코드를 올릴게여 HTML CSS .bgcolor { background-color:red; height:400px; } .size-xlarge{ flex:0 0 auto; width: 50%; } /* media 쿼리를 쓴 부분임 이게. 0~400px 까지는 이렇게 하라*/ @media screen and (ma.. 2021. 9. 2. <a></a> href 없이 사용하기 기본적인 태그의 사용은 의 형식으로 사용하죠. 하지만 때로는 태그를 사용하는 때에 라우팅 없이 (페이지 이동 없이) 사용하고 싶은 경우가 있다. 이런 경우의 대처 방식을 알아보죠 그 부분에 마우스를 올려놓았을 경우 클릭해서 어떠한 함수를 사용하고 싶다면 class 로 뺀 후에 .payments { color: #008fd0; } .payments:hover { cursor: pointer; } 의 형식으로 한다면, hover, 즉 마우스를 가져다 대면 커서를 저렇게 바꿀 수 있습니다. ex) 💳 카드 정보 & 결제 정보 💳 카드 정보 & 결제 정보 클릭한다면 details()라는 함수를 실행해라, 해당 text에는 밑줄이 쳐져 있게 한다라는 코드입지다. text 스타일들 애초에 밑줄이 아닌 마우스를 올렸.. 2021. 5. 11. 이전 1 다음 반응형
