공부 기록일지📚

transformation을 들어가기 전에 , img 태그에 CSS 효과 중 border값을 주고 border-radius: 50%; 을 하면 직사각형이던 border가 동그라미가 됩니다! 알아두면 좋은 팁이니 기억해둡시다 참고로 img 태그는 self-closing tag 입니다~ (맞음 까먹었음ㅋ) Transform 은 무언가를 "변형"시키는 것 transform: rotateX(90deg) / rotateY() / rotateZ() (X,Y,Z축으로 회전 시키는 속성) ▶rotateX(90deg) = 회전시킬거다X축방향으로(90도로) 라는 뜻이며 괄호 안의 값에는 단위를 나타내는 deg를 기입해줘야 합니다. 이 속성을 통해서 이미지를 3D처럼 사용할 수 있는 것이죠 참고로 Z축은 회전하는 느낌이네요..

앞으로 배울 것들 Animation, Transformation, Transition Transition- 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법 when sthing is changing its state during that period called Transition so we are going to put some effet on the trasition. Q.언제 Transition이 필요할까? A. 기본적으로 우리가 css로 상태가 변경됐을 때 다른 효과를 주는 방법을 알고 있다. 그 예시로 a:hover 를 쓰면 a태그에 마우스를 올렸을 때 다른 효과를 주는 것이 있습니다. 하지만 변경되는 과정이 없고 바로 마우스만 올리면 모습이 변하기 때문에 그 중간에 애니메이션..

CSS에서 알아야할 컬러 시스템은 3가지 정도 1. hexadecimal color (16진수 컬러) 2. rgb(red, green, blue) 3. rgba( rea, green, blue , alpha*투명도) 참고: alpha*투명도 의 표기법은( 0.0 ~ 1 )으로 0.5는 50%의 투명도를 말하는 것이고 0을 하면 제로니까 아예 안보이는 것 1은 100%니까 원색이 보입니다. *chrome확장 프로그램 중에 [color picker] 라는 프로그램을 설치하면 화면상의 색을 추출할 수 있습니다. :root 라 불리는 엘리먼트에 변수를 추가해보자 :root는 기본적으로 모든 document의 뿌리가 될 것이다. like starting point 변수명: --main-color로 잡고 docum..

position: fixed: 화면의 크기가 변경돼도 고정된 포지션(초기에 있던 자리)을 유지한다. ->스크롤을 해도 원래 자리가 중앙이라면 중앙에 계속 머무르게 됨 ※주의: top/left/right/bottom 이라는 property 중에 하나만 수정하면 완전 다른 레이어에 위치한다. -> 원래는 다른 요소와 같은 레이어에 존재하다가 예시로 top:5px라고 값을 줘서 수정하면 기존에 있던 요소를 무시하고 그 위에 다른 레이어로 존재하게 된다는 소리이다. 이 때, fixed된 엘리먼트의 위치는 맨 위이다. position: fixed 는 화면상에 꼭 고정돼있어야하는 요소(e.g. 상단 메뉴바)에 적용하면 좋은 속성이다. position: relative; element가 처음 위치한 곳을 기준으로 수..

box구성에서 기본 개념 padding - box의 경계(border)로부터 '안쪽'에 있는 공간 margin - box의 경계(border)로부터 '바깥'에 있는 공간 *margin padding 둘은 반대 개념이겠죠? ※주의: 높이와 너비는 inline에 적용이 안된다(inline은 높이와 너비가 없기 때문에). padding은 inline에 상하좌우로 적용된다. 하지만 margin은 좌우만 가질 수 있다. border - box의 경계선 1.border-style의 속성값에는 여러가지(none, dotted, solid, dasehd etc....)가 있지만 거의 사용하지 않고 자주 사용하는 것은 solid 정도이다. *solid: 실선 *dashed: 점선 2. border 은 inline 요소(..