공부 기록일지📚

앞으로 배울 것들 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 요소(..

HTML(hyper text markup language, makeup means "content")는 브라우저에게 웹사이트의 content가 어떻게 구성되어 있는 지 설명할 때 사용한다. 오직 HTML만이 브라우저에게 content가 어떻게 구성되었는지에 대해 설명할 수 있다. CSS (Cascading Style Sheets) - HTML + CSS 둘은 필수 불가결 관계이므로 같이 써야한다. -> 웹페이지를 만들 때 무조건 2언어를 사용해야한다는 것이라기 보다는 CSS를 사용하려면 HTML코드가 필요하기 때문에 필수 불가결한 관계라고 해석함 CSS는 browser에게 웹사이트의 그 content가 어떻게 보여야하는지에 대해 알려준다. e.g.) HTML - "browser야, 그건 title이야, ..