CSS (7) 썸네일형 리스트형 7. text 가운데 정렬 💨 line-height 이용하기 line-height : 글자가 한 줄에서 차지하는 높이. 예를들어, 칸 안의 글자를 가운데 정렬해야한다고 할 때 그 칸의 height와 line-height의 값을 동일하게 해주면 글자가 가운데 정렬이 된다. text-align: center; 또한 입력해주어야한다. margin: 2px; height: 150px; text-align: center; line-height: 150px; width: 150px; background-color: white; border-radius: 5px; font-size: 80px; color: bisque; 6. :hover 작동하지 않는 경우 지금까지 화면 전환을 하려할 때, css opacity: 0; 과 opacity: 1; 을 이용했다. 그런데 방금!! 갑자기 멀쩡히 되던 hover 기능이 작동하지 않았다. 구글링 끝에 나름의 결론을 얻었다. opacity: 0; pointer-events: none; 이렇게 코드를 작성하니 opacity: 1; 인 div 클래스 안에 있는 button:hover 이벤트가 제대로 작동했다. 아직 코린이라 이유는 잘 모르는데 잘 해결되서 다행이네,, 😶 5. CSS 를 이용해 버튼을 누르면 화면이 바뀌게 하기 퀴즈 앱과 같은 앱을 만들 때 버튼을 누르면 화면이 바뀌게 해야한다. 이 때 opacity 와 z-index를 잘 이용하면 된다. 우선은 페이지를 만든다. ✅ opacity: 0; --> 완전 투명. 화면에 안보임. opacity: 1; --> 기본값. 화면에 보임. 이벤트 유무에 따라 보여질 화면을 opacity: 0; 으로 설정해 안보이게 한 후, z-index 값을 줘서 active될 요소를 조금 띄운 다음에 opacity: 1; 을 줘서 화면에 보이게 한다. 뒤에 숨어있던 화면이 앞으로 나오게 된다. 4. position / display 💨 Position ◾ static 모든 태그들은 처음에 position: static; 상태이다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. ◾ relative static 을 기준으로 태그의 위치를 옮기고 싶을 때 사용한다. 상하좌우 다 움직일 수 있다. ◾ absolute static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다. ❗ absolute가 되면 div 태그를 지니고 있어도 width: 100% 가 아니다. #absolute 는 조상 태그에 position: relative 인 것이 없기 때문에 body를 기준으로 가장 오른쪽에 지정된다. #child .. 3. margin vs. padding / border vs. outline ◾ margin vs. padding ✅ padding은 요소의 내부에 빈 공간을 추가하고 margin은 요소의 주위에 빈 공간을 만든다. ◾ border vs. outline - border : 실제로 그만큼의 공간을 차지하게 되어 레이아웃에 영향을 끼친다. - outline : 레이아웃에 영향을 끼치지 않는다. ✅ border은 상하좌우 각각에 설정값을 줄 수 있지만, outline은 그렇게 할 수 없다. 2. 중앙 정렬하기 ✅ transition position: absolute; top: 50%; left: 50%; 이렇게 설정할 경우 위와 같이 도형이 생성된다. 따라서 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 💥trasform: translate(-50%, -50%) 를 줘서 정가운데로 위치시킨다. translate( X축 거리, Y 축 거리) 인데, 값을 준만큼 이동시키는 것이다. ✅ scale, rotate - scale( 가로길이에 곱하는 수, 세로길이에 곱하는 수) --> 길이 변환 - roatate(각도) --> 주어진 각도만큼 요소를 시계방향으로 회전시킴. 1. transition ✅ 문법 : { transition: property, timing-function, duration, delay} ▪ property: transition을 적용시킬 속성을 정한다. - all : 모든 속성에 적용한다. - property : 속성을 정한다. 여러 개일 경우 쉼표로 구분한다. ex) transition-property: width, background-color; ▪ timing-function : transition의 진행 속도를 조절한다. ease, linear, ease-in/out 등이 있다. ▪ delay : transition이 시작하는 시간을 연기할 수 있다. 시간 단위는 초(s) 또는 1/1000초(ms) 를 사용한다. ex) transtion-delay: 0.5s; 이전 1 다음
