CSS (13) 썸네일형 리스트형 [CSS] Transition 알아보기 transition의 기능 : CSS 속성을 변경할 때 애니메이션 속도를 조절해 줍니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 자연스러운 애니메이션 효과를 만들때 유용합니다. 선언 (1)property: 속성 (2)duration: 지속시간(ms, s) (3)[timing-function] (생략 가능) -ease-in -ease-out -ease-in-out -cubic-bezier() (4)[delay] (생략 가능) 예시 transition: all 2500ms ease-in 1000ms; [CSS] img와 background image 태그 중에 뭘 쓰는게 좋을까? image와 background image의 차이점? 나 혼자 실습을 진행했을 때 image 파일로 사진을 넣었었는데 강사님은 background image 사용을 권장했다. 실습 내용은 숙박 시설 이용 고객이 리뷰를 남길 수 있는 페이지를 만드는 것이었는 데 문제는 고객이 올리는 이미지의 사이즈가 어떨지 모른다는 것 그래서 img 태그 사용했을 때 CSS로 세로가 긴 이미지일 경우, 가로가 긴 이미지일 경우를 나눠서 설정해줬는 데 이미지의 비율에 따라 제각기 다른 클래스가 자동으로 들어가야 하는 문제 발생해서 매우 비효율적 이때 CSS로 background-image를 사용하면 한 방에 해결된다고 한다!! + 추가로 img와 background-image의 차이점을 검색해보았는 데 대.. [CSS] Flex 간단한 실습하기 잘한점: .profile-detail{ width: 100%; display: flex; justify-content: space-around; } justify-content가 안먹어서 개발자도구를 유심히 들여다보니 width 크기가 너무 작아서 인 것 같았다. 그래서 width:100%;를 주니 문제 해결! 간단한거지만 처음으로 나혼자 문제해결을 해서 너무 뿌듯하다 :) 다른 건 다 했는데 밑에 숫자 배치를 어떻게 해야될지 모르겠당,, -->강사님이 하시는 것을 보니 justify-content: space-between을 주셨다 ※ width:100%로 주지만 height:100vh로 주어야 함 [CSS] media query 알아보기 medis query는 반응형 웹사이트를 만들기 위해서 반드시 알아야 합니다!! 사용법 HTML: viewport meta CSS: media query @media screen and (min-width: 768px){ .box{ background-color: } .box::after{ content: "Tablet" } } //768px 이상에서는 이런 스타일을 주라는 선언 가상요소 ::before, after{ content: " " // 꼭 넣어줘야 함!! } [CSS] Flexbox 알아보기 float 사이즈 줄여서 라도 한 줄로 정렬 -flex-wrap:wrap;--> 공간이 넉넉치 않으면 여러 줄 만듦 (4)플렉스 박스 정렬 타임 ※ align-items와 align-content 꿀팁! 일단 align-items 사용해보고 안되면 align-content 사용해보기! (align-content 'flex-wrap:wrap'인 상태에서 사용 가능) [CSS] position 실습하면 배운 것 (1) 사진이랑 글을 가로 배치할 때 position 쓸지 float 쓸지에 대한 궁금증 해결 뭔가 특정 장소에 고정시켜 놓아야 한다 = position 두 요소를 옆으로 배치시켜야 한다 = float (2) 우리 눈에 보이지 않더라도 브라우저에게는 전달이 되면 좋은 정보, 혹은 스크린 리더를 통해 웹을 사용하는 사용자들에게 전달해야 하는 정보를 제공하고 싶을 때 사용하는 게 aria-label!! (3) 이미지의 width랑 height 바꿔줄 때 display=block; 설정 (4) width, height 적용 안될 경우 display 먼저 확인 (5) transform -자기 자신을 기준으로 움직임 -transform: translateY(-50%); (6) margin: 0 .. [CSS] position 알아보기 position 공부할 때 생각할 점 1. 어떤 종류의 position type 인지 2. position type에 따라 무엇을 기준으로 요소를 위치시키는지 (1) static -모든 요소의 기본 position(가장 일반적) (2) relative -기준점: 본인이 원래 있던 자리 -원래 있던 자리에서 조금씩 움직여야 할 때 사용 (3) absolute -block으로 바뀜(길막 못하는 block) -기준점: position이 static인 경우 제외하고 기준점을 선택할 수 있음(보통 relative로 지정) -맥락에서 완전 떼어내서 옮겨야 할 때 사용 (4) fixed -absolute 특징과 완전 비슷! but 기준점이 다른데 fixed의 기준점은 viewport (viewport는 브.. [CSS] Box Model Box Model border: 굵기, 스타일, 색상 꼭 필요 ( border: 1px solid red ) border-radius: 둥글게 변함 box sizing ★CSS 처음 시작할 때 무조건 이걸로 시작★ * { box-sizing: border-box } content-box는 딱 콘텐트 영역만 포함해서 width, height 값 결정하기 때문에 border-box 쓰는게 좋음 Box 파헤치기 (1) Block --> 길막! -따로 width를 선언하지 않은 경우 : width=부모의 content-box의 100% -따로 width를 선언한 경우: 남은 공간은 margin으로 자동으로 채움 ※ margin: 0 auto; -->가운데 정렬 -width, height, padding, bor.. 이전 1 2 다음
