Enjoy Programming

media query는 오직 css만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다. media query는 css 조건을 추가할 수 잇는 방법이다. media query 조건문 안에는 반드시 element에 css를 넣어 줘야 한다. media query는 and를 써서 조건을 여러개 쓸 수 있다. min-width, max-width, min-device-width, max-device-width, orientation(landscape & portrait감지) 예를 들어 width가 500보다 작으면이라고 지정한 규칙에 브라우저 및 장치 환경이 일치할 때 css를 적용할 수 있는 방법 media query는 반응형 웹디자인의 핵심. 뷰포트 크기에 따라 서로 다른 조판을 생성 사용자가 터치스크린을..

transition은 마우스 동작이나 키보드 동작이 이루어질 때만 변형이 이루어지고 애니메이션 효과가 생긴다. 계속 애니메이션을 재생하고 싶으면 뭘 해야 할까... css에 animation속성을 이용하면 된다! 사용법은 먼저 style시트에서 @keyframes Name{} option 1 @keyframes superLeeDeveloper { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } img { border: 2px solid black; border-radius: 50%; animation: superLeeDeveloper 2s ease-in-out; } superLeeDeveloper라는 이름의 keyframe규칙이 ..

transformation : 요소를 말 그대로 변형시킨다. transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여 할 수 있다. img태그에 적용해보자. img { border: 2px solid black; border-radius: 50%; /* transform: rotateY(50deg); */ } 먼저 이미지를 업로드하고 border를 준 뒤는 주석을 풀고 trasnform y축 각을 줘보자 따라~ 변했다.. y축을 기준으로 각이 줄었다 ㅎㅎ 90deg를 주면 수직이니까 1자가 된서 안보인다... transform: rotateY(50deg) rotateX(50deg) rotateZ(10deg); x,y,z축 변형이 가능하다. scale(x, y) : x, y축으로 ..

# transition : 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 것 transition 속성은 state가 없는 요소에 있어야 함. developer.mozilla.org/ko/docs/Web/CSS/transition transition - CSS: Cascading Style Sheets | MDN transition transition: margin-left 4s; transition: margin-left 4s 1s; transition: margin-left 4s ease-in-out 1s; transition: margin-left 4s, color 1s; transition: all 0.5s ease-out; transition: inherit; transition: ..

먼저 컬러를 보자color는 시스템이 있다 1. 16진수 컬러(hexadecimal color) #000000 2. RGB 컬러(이걸 많이 알고있다.. opencv에서는 bgr... ) rgb(0, 0, 0) 각 값은 255가 최대 값. 0에 가까울수록 검은색. rgb(0, 0, 0, alpha) - alpha는 opacity(투명도) 4채널 이러한 컬러를 여러곳을 변경해야 할때 여기저기 다 고치기는 번거롭다. 이때 변수를 선언해주는데 ex> :root 를 이용하자 - 전역 변수를 선언해서 코드를 편하게 짜기 :root{ --main-color : color } 를 통해 일정 색을 전역변수에 담고 내가 스타일링 해줘야 할곳에 변수만 집어 넣으면 된다. so~~ easy ~ 차후 색상을 변경할때 간편해진다..

::placeholder - placeholder를 스타일링 할때 ::selection - text의 마우스 드래그로 선택한 곳을 스타일링 ::first-letter - text의 가장 앞 글자를 스타일링