반응형 CSS 배우기3 CSS_변수로 색상 관리하기, 애니메이션 효과 넣기, 미디어 쿼리 색상 / 애니메이션 색상을 변수로 지정해서 관리 :root { --main-color: rgb(98, 220, 147);\ --sub-color: rgb(100, 55, 26); } css파일에 이렇게 변수를 지정 후 사용하고자 하는 요소에 넣어주면 된다. 넣을 때는 var뒤에 변수명을 쓰면 된다. div { width: 100px; height: 100px; background-color: var(--main-color); } 이렇게 하면 나중에 가져다 쓰기 편하다. 애니메이션 주기 transition div에 마우스를 hover했을 때 로고가 커지게 하기 div:hover img { width: 200px; } img { width: 100px; transition: all 1s ease-in-out.. 2023. 6. 27. CSS 선택자들(Selector, Psuedo Selector) 선택자와 상태 특정 요소만 선택을 해보자 id는 유일무이한 것이다 하나의 이름만 쓸 수 있다. 1번 2번 이렇게 같은 id명을 쓰면 안 된다. 1번 2번 이런 식으로 다른 이름을 써야 한다. css에서 위의 버튼들을 불러오려면 어떻게 해야 할까? #btn-1 { background-color: black; } 이런 식으로 id명 앞에 #을 붙여서 적용하면 된다. id와는 다르게 동일한 아이들끼리 뭉쳐서 스타일을 적용시킬 수 있는 class이다. 1번 2번 class는 이렇게 같은 이름으로 정할 수 있으며 불러올 때는 . 으로 불러온다 .btn { color: white; } 이렇게 할 수 있다. 또 다른 방법을 보자 하위 요소들 중에서 몇 번째 아이만 스타일을 적용한다 라고 했을 때는 main .btn:.. 2023. 6. 27. CSS 박스 배치 (2)__position body { display: flex; justify-content: center; } justify-content는 박스의 가로 배열을 담당한다 정확히는 메인 축의 방향으로 움직이는데 기본적으로는 x축이 메인 축이 된다. 반대로 display: flex; justify-content: center; align-items: center; align-items은 기본적으로는 y축으로 움직인다 position 위치를 직접적으로 움직여 준다 여러 옵션이 있는데 오늘은 absolute를 살펴보자 body :nth-child(1) { background-color: #e0493a; position: absolute; top: 20px; } 1번 div에 위 코드를 적용 시켰다 top에다가 20px을 줬는데 아무리.. 2023. 6. 27. 이전 1 다음 반응형
