📌 CSS의 box-shadow
출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
값
2개, 3개 또는 4개의 <length>값입니다.
- 두 개의 값만 제공되면 해당 값은 <offset-x>및 <offset-y>값으로 해석됩니다.
- 세 번째 값이 제공되면 <blur-radius>로 해석됩니다.
- 네 번째 값이 제공되면 <spread-radius>로 해석됩니다.
📌 CSS의 box-shadow로 윤곽선 만들기
x-offset, y-offset및 blur가 모두 0 인 경우 상자 그림자는 모든 면에서 동일한 크기의 단색 윤곽선이 됩니다 (출처 mdn)
예)
p {
box-shadow:
0 0 0 2em #f4aab9,
0 0 0 4em #66ccff;
margin: 4em;
padding: 1em;
}📌 이메일에 메일 보내기 클라이언트 창 띄우는 링크 걸기 : mailto
출처 : https://habitual-history.tistory.com/153#google_vignette
mailtof:{이메일}을 href에 넣어주면 이메일을 작성할 수 있도록 링크가 생성되어 클릭하면 이동이 가능하다.
<a href="mailto:kkhw1202@gmail.com">send email</a>mailto란?
이메일 클라이언트로의 복사 및 입력 과정 없이 사용자들이 특정한 주소로 전자 우편을 보낼 수 있도록 웹사이트의 하이퍼링크를 만들기 위해 사용된다.
📌 +제목 자동으로 넣기 : 메일주소?subject=제목
예)
<a href="mailto:test@example.com?subject=메일제목입니다">send email</a>이렇게 작성하면 메일 제목이 작성된 채로 클라이언트가 실행된다
(+)
내용설정도 가능! (?body=내용)만 붙여주면 가능하다
📌 HTML <a>태그를 이용해 전화번호에 '전화걸기' 링크삽입
<a>태그의 href속성에 "tel:전화번호"만 적어주면 된다!
예)
<a href="tel:123-1234-1234">고객센터 : 123-1234-1234</a>(+)
나를 정말 힘들게 했던 자바스크립트에서 지정 요소에 is--active 클래스가 추가되면 css 구현되게 하기...
일단 방식은 is--active가 어느 요소에 추가가 되는지 파악하고,
그 요소를 선택자로 선택하는데, is--active를 뺀 상태로 선택하고 visibility : hidden을 걸었다.
그리고 똑같이 적고 is--active 클래스를 추가로 선택한 후에 visibility : visible을 넣어주면 끝!
문제는 ul 중첩구조에서 갑자기 작동이 안돼서 엄청 고민했는데 도저히 답이 나오지 않아서 멘토님께 sos를 요청...ㅠㅠ
해결방법이 너무 허무했다. 그냥 내가 모든 li에 중첩구조를 넣지 않고 예시에 보여준 첫번째 요소에만 넣어서 그랬던 것;;
