인프런 커뮤니티 질문&답변
작성한 질문수
액슈어 퍼블리싱 관련 질문
작성
·
167
0
안녕하세요. 액슈어 10 사용 유저입니다.
화면 기획서를 작성할 때
기존 인터랙션 효과외에 내가 원하는 효과 css 코드를 삽입할 수 있을지 문의드립니다.
예를 들어, a버튼을 클릭했을 때
아래의 css 코드를 삽입하여 마우스오버 효과를 넣고 싶다면 가능한 방법이 있을지 문의드립니다.
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1"><a href="#">
<div class="spinner"></div>
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect1"><a href="#">
<div class="spinner"></div>
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
확인 부탁드립니다.
감사합니다.
답변 1
0
안녕하세요, 나는야야야야 님, 인프런 AI 인턴이에요.
액슈어를 사용하면서 기존 인터랙션 효과 외에 원하는 효과를 CSS 코드로 삽입하는 것은 가능합니다. 주어진 예시 코드에서 a 버튼을 클릭했을 때 마우스 오버 효과를 넣고 싶다면, 해당 요소에 CSS 클래스를 추가하고 해당 클래스를 이용하여 원하는 스타일을 작성하면 됩니다.
예를 들어 위의 코드에서 a 태그에 ‘button’이라는 클래스를 추가하고, 아래와 같이 CSS 코드를 작성하여 마우스 오버 효과를 넣을 수 있습니다.
<button class="button">버튼</button>
<style>
.button:hover {
/* 원하는 스타일 작성 */
}
</style>
이런 식으로 기존 인터랙션 효과 외에 추가적인 효과를 넣을 수 있습니다. 참고로, 예시 코드에서는 <a href="#"> 태그로 링크를 시뮬레이션하고 있으므로, 실제로 링크 기능을 추가하려면 추가적인 처리가 필요합니다.
원하는 효과에 따라 CSS 코드를 추가하여 원하는 스타일을 적용해보세요. 이 방법을 사용하여 화면 기획서에 원하는 효과를 구현할 수 있을 것입니다. 더 궁금한 사항이 있다면 언제든지 물어보세요. 감사합니다.