공부 기록일지📚

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Media query 는 오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다. (나의 웹사이트를 보고있는 사용자의 스크린 사이즈) 미디어쿼리는 우리가 조건을 추가할 수 있는 방법이다. 코드의 조건을 적는 것이지요 만일 이 조건이 true(참)이라면 {} 중괄호 안의 CSS를 실행하라는 조건을 말해주는 것입니다. 미디어 쿼리도 중괄호로 여닫지만 그 안에 element에 CSS를 적용시켜야 합니다. (중괄호 안에 중괄호) 미디어 쿼리는 " and "를 써서 연결됩니다. ※참고: (min-device-width) 와 (max-device-width)는 오직 핸드폰에만 적용된다. 데스크톱은 이해할 수 없겠죠? 그래서 아래의 코드는 (max-width: 600px)이런식으로 준 것입니다. *tip: ..

Q.마우스를 위에 올리거나(:hover), trasition없이 애니메이션을 어떻게 만들까? 애니메이션을 사용하면 우리가 원하는 만큼 만들고 재생시킬 수 있다. 애니메이션 작성법(기본): @keyframes + 애니메이션명 e.g.) @keyframes superHotCoinFlip animation을 작성하는 방법에는 2가지 방법이 있다. ▶1번째 방법- @keyframes 애니메이션명 { from { transform: 속성값 } to { transform: 속성값 } } 효과를 줄 selector { animation: 애니메이션명 + 지속시간 + 효과 +( infinite ) } *infinite: 이 속성값이 없으면 애니메이션 효과가 지정된 지속시간을 한번만 수행하고 다시 되지 않음 계속 실행되..

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가 처음 위치한 곳을 기준으로 수..