본문 바로가기

html22

CSS menubar click animation by js 메뉴바를 클릭했을 때 에니메이션 효과를 내면서 변화시키려면 어떻게 해야할까? 답은 css와 javascript를 활용하면 된다. 아래는 클릭 전과 후 화면이다. 우선 구현해두어야 할 것은 html, css소스를 구현해두어야 한다. css는 클릭 전과 후를 각각 구현해야 한다. html 소스는 다음과 같다. div를 이용하여 3개의 줄을 만든다. 클릭 전 css 소스를 보면 다음과 같다. 클릭 후 css 소스는 다음과 같다. transform을 이용하여 움직임을 구현한다. 클릭을 위한 자바스크립트 코드는 다음과 같다. 토글 방식으로 경우에 따라 css 속성을 변경해준다. 2020. 5. 20.
HTML z-index with background div: relative ul, li: absolute 다음과 같은 구조일 때 ul, li에 background를 사용하면서 ul의 z-index를 사용하면 어떤 결과가 나타날까? li 배경이 보이면서 ul의 배경이 li 배경보다 앞 쪽 레이어에 위치시킬 수 있을까? 답은 이 구조하에서는 그럴 수 없다. 이 상황에서 z-index를 사용해도 stacking context에 영향을 미치지 않는다. 쉽게 말하면 css background 사용시 z-index를 변경하여 "배경을 맨 앞으로 가져오기" 같은 것을 할 수 없다. 차라리, li의 배경을 "맨 뒤로 보내서" ul의 배경만 표시하는 것은 가능하다. 그렇다면 어떻게 하면 될까 ul의 배경에 해당하는 것을 앞으로 가져올 수 있을까? 정답은 ul의 자식이면.. 2020. 5. 20.
CSS ::before ::before는 css를 통해 html 구조는 변경하지 않고 디자인을 추가함과 동시에 text도 쓸 수 있는 기능을 제공한다. 선택한 태그의 시작부분에 새로운 가상의 요소가 생긴다고 보면 된다. 단, content 속성은 꼭 넣어주어야 한다. 다음은 mdn의 before 설명이다. In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default. p::before{ content: 'hi '; } bob 위와 같은 cs.. 2020. 5. 18.
CSS vertical-align(inline 요소 세로 정렬) vertical-align을 사용해서 inline 요소를 vertial에서 정렬할 수 있다. 생각보다 굉장히 복잡하다. 자식 태그들의 공간에 따라 linebox 크기가 정해진다. 참고 사이트 http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align https://wit.nts-corp.com/2017/09/25/4903 https://www.w3schools.com/cssref/pr_pos_vertical-align.asp https://aboooks.tistory.com/171 https://www.w3.org/Style/XSL/TestSuite/results/4/XEP/baseline-shift.pdf http://www.myf.. 2020. 5. 18.

티스토리툴바