CSS 마스터하기/CSS10 [CSS] CSS 총정리 1. CSS 사용법 3가지 !! This is my website Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, ve.. 2024. 4. 9. [CSS] 미디어 쿼리 (반응형 모바일) 마스터하기 ◾ 미디어 쿼리 (반응형 모바일) 1. @midia → @media screen and () @media screen and (max-width: 400px) { div { background-color: blue; width: 100px; height: 100px; } } @media screen and (min-width: 300px) and (max-width: 400px) { div { background-color: blue; width: 100px; height: 100px; } } @media screen and (orientation: landscape) { div { /* 가로 */ } } @media screen and (orientation: portrait) { div { /* 세로.. 2024. 4. 5. [CSS] Animation(애니메이션) 마스터하기 ◾ Animation (애니메이션) → infinite 무한 반복 → @keyframes 변수이름 {} animation: Flips 5s ease-in-out infinite; @keyframes Flips { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } @keyframes Flips { 0% { transform: rotateY(0); } 50% { transform: rotateY(180deg) translateX(100px); } 100% { transform: rotateY(0); } } 2024. 4. 5. [CSS] Transform(변환) 마스터하기 ◾ transform (이미지만 가능) → transition 으로 조절이 가능하다 ! → rotateX,Y,Z(??deg); // deg: 각도 transform: rotateX(120deg); → scaleX,Y,Z(?); transform: scale(2,2); → translate X,Y,Z(-1000px); // 지정하지 않은 텍스트는 이동하지 않음 // 사진을 좀 이동시키고 싶을 때 transform: translateX(350px); → 같이 사용 가능 transform: rotateZ(300deg) scale(2); img { color: black; background-color: red; text-decoration: none; padding: 5px 10px; height: 500px.. 2024. 4. 5. [CSS] Transitions(전환) 마스터하기 ◾ Transitions → 어떤 상태에서 다른 상태로 가는 변화를 애니메이션화 하는 것 → state 가 없는 요소에 붙어야함 → transition: background-color 10s ease-in-out → transition: all 3s ease-in-out // 일반적으로 all 을 많이 사용 linear → 무언가를 직선으로 움직이게 만들어줌 → 쭉 고정적인 속도 ease-in-out → 천천히 빠르게 천천히 2024. 4. 5. [CSS] color(:root) 마스터하기 Colorzilla : 구글 색 어플 rgb rgba (a = 투명도) ◾ :root → 기본적으로 모든 document의 뿌리가 됨 → 변수를 지정해 저장할 수 있음 // 여러 개 고칠 때 유용 :root{ --main-color: #A8D165; --border: 1px solid var(--main-color); } p:nth-child(3){ color: var(--main-color); } p:nth-child(4){ border: var(--border); } 2024. 4. 5. [CSS] state 마스터하기 ◾ state (상태) 1. active → 버튼을 누르고 있을 때 작동 button:active{ background-color: black; } 2. focus → 키보드로 선택되었을 때 작동 input[type="text"]:focus{ background-color: aquamarine; } 3. hover → 마우스가 대상 위에 있을 때 작동 button:hover{ background-color: black; } .4. visited → 링크를 타고 방문하면 작동 a:visited{ color: red; } 5. focus-within → focused인 자식을 가진 부모 엘리먼트에 적용 2024. 4. 5. [CSS] position 마스터하기 ◾ position 1. position: fiexd; → 스크롤을 내려도 그자리에 있음 → top, left, right, botton 프로퍼티 중 하나만 수정해도 겹쳐짐 // 더 이상 bolck , margin 신경쓰지 않게됨 2. position: static; → 레이아웃 박스를 처음 위치하는 곳에 둠 3. position: relative; → 엘리먼트가 처음 놓인 자리에서 조금씩만 상하좌우로 옮기고 싶을 때 → position: relative; top: -10px; left: -10px; 4. position: absolute; (사용하려면 부모 relative 사용하기) → 상하좌우로 옮기고 싶을 때 → body 맨 오른쪽, 아래 , 왼쪽으로 이동함 → 가장 가까운 relative 부모를 .. 2024. 4. 4. [CSS] grid 마스터 ◾ Grid → 열과 행을 모두 같은 수준으로 우리가 원하는 만큼 제어하고 커스터마이징할 수 있다. → 페이지의 전체 레이아웃을 구죽할 수 있음 → display: grid; → 부모에게 지정해야함 1. grid-template → gird-template-column: 100px 200px; // 가로 → gird-template-row: 200px 100px; // 세로 → gird-template-column: [one]100px [two]200px [three]; // 각 이름 부여가 가능하다. → gird-template-column: 1fr 1fr 1fr; // 하드 코딩이 아닌 1fr 로 지정할 수 있다 grid-template: "a a a a" 1fr "b b b d" 2fr "c c c.. 2024. 4. 4. 이전 1 2 다음
