[TIL] 220511

버튼 클릭시 색상 변경

 

1. active을 이용하여 색상을 변경하고자 했지만 되지 않았다.

 

2. 구글링해보니 자바스크립트를 활용하여 버튼 클릭 이벤트를 통해 변경하는 방법이 있었다.

 

3. 단순 클릭을 통한 변경은 된다.

하지만 총 버튼이 2개 일때 하나를 누르면 다른 하나의 색상이 변경되는 효과를 주기 위해서는 다른 방법이 필요했다. 

 

4. 결국 상황에 따라 구분하여야 하는데 

https://ts2ree.tistory.com/5?category=396091 

클릭하면 버튼 색깔 바꾸기

위의 블로그에 나와있는 방법을 활용해서 하고 싶었는데 자바스크립트에 대한 이해도가 부족해서 완성하지 못했다.

 

https://getbootstrap.com/docs/4.0/components/buttons/

Buttons

공식문서도 뒤져보니 비슷한 느낌의 설명이 나와있긴 한데 

 

더 붙잡고 있을 시간이 없어서 일단 보류했다. 

 

5.결국 페이지 검사를 통해 css 찾아내서 통째로 색상을 바꿔버리는 방법을 택했다. 제일 무식하지만 확실한 방법.. 

대신에 특정 버튼에만 활용할 수 있진 않고 들어가 있는 모든 버튼 색상이 일괄적으로 바뀌게 된다는 단점이 있다. 

 

부트스트랩 버튼 클릭 시 색상 변경 css 

.btn-check:active+.btn-secondary,
.btn-check:checked+.btn-secondary,
.btn-secondary.active,
.btn-secondary:active,
.show>.btn-secondary.dropdown-toggle {
    color: #원하는색상;
    background-color: #원하는색상
    border-color: #원하는색상;
}

 

 

쇼핑몰 금액 표기 - <em>

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/em

<em>: 강세 요소 - HTML: Hypertext Markup Language | MDN

 

일반적으로 쇼핑몰에서는 상품의 금액을 볼드체로 옆에 있는 글자에 비해 크게 하여 두드러지게 설정한다. 금액이 가장 중요한 요소이기 때문이다. 

전체적인 레이아웃을 마냥 div만을 쓰는 것이 아니라 nav, section, aside 등 다양하게 활용하는 것 처럼 그렇다면 상세 설명 내에서도 태그 구분이 있는걸까 궁금해서 기존에 완성된 다른 쇼핑몰 사이트 코드를 뜯어보니 금액 부분에는 <em>태그를 활용하고 있는 것을 확인할 수 있었다. 

 

덧, 프로젝트 만들면서 사용하려고 했으나 flex를 사용해야 되서 일단 보류

 

그 외 html 태그

https://heropy.blog/2019/05/26/html-elements/

 

선택 드롭박스 

select 과 option 태그로 구현 

많이 했으면서 고새 까먹어서 다시 태그 이름 찾아봤다. 아직은 역시 반복 숙달이 필요한 단계인듯

 

http://www.homejjang.com/05/select.php

셀렉트박스(select) - HTML 고급 강좌

 

 

HTML요소

 

HTML의 모든 요소는 position: absolute 가 들어가면 display 속성이 inline-block으로 바뀐다

 

sql문을 활용하여 리스트 출력 

 

 SELECT 
	r.no
	, r.kind
	, r.menu
	, rl.menuImg
 FROM recipe r
 LEFT JOIN recipe_link rl
 ON r.no = rl.no
 where 1=1 
  <if test='search != "" and search != null '>
  AND r.menu like CONCAT('%',#{search},'%')
  OR r.kind like CONCAT(#{search})
  </if>   	        
 ORDER BY RAND()

 - ORDER BY RAND() 시 랜덤으로 값 출력

- WHERE 1=1 는 참 (조회하려는 데이터의 조건)

 

https://hyjykelly.tistory.com/5

[MSSQL] WHERE 1=1이 뭐야? 왜 쓰는 거야?