프로그래밍 공부/html,css11 [Css] - 미디어쿼리란? 미디어쿼리란 pc뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문 반응형 → 자연스러운 리사이즈가 일어나는 현상 적응형 → 뚝뚝 끊겨서 레이아웃에 폰트크기가 달라지는 현상 → 즉 자연스럽냐 아니냐 Orientation : landscape (가로에 적용) / portrait(세로 적용) Please flip your phone :( viewport 위의 코드가 작성되어 있지않으면 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있음. viewport너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나 다양한 디지.. 2021. 11. 1. [Css] - @keyframes , 애니메이션 (animation) 속성 참고 : css 애니메이션 사이트 : https://animista.net/ Animista - CSS Animations on Demand Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use. animista.net @keyframes 은 CSS문법 중 하나로 애니메이션이 만들어지는 부분 키프레임 애니메이션을 정의한 후 요소에 애니를 적용할라면 "aniamtion" 속성을 이용해 키프레임을 연결해야한다 From to 형 @keyframes 애니메이션 이름{ form{ Transfrom :.. 2021. 11. 1. [Css] - Transformation , 트랜스폼 Transform 웹 요소의 위치를 이동시키거나 크기 조절 및 회전시킬수 있는 강력한 기능 3d 처럼 표현가능 적용시켜도 박스 요소가 변형되지않는데 일종의 3d transformation 이기 떄문이다 트랜스폼을 적용시켜도 다른 요소에는 영향을 끼치지않는다 웹사이트의 특정영역에서 오브젝트의 각도를 튼다거나 , 크기조절을 한다거나 , 위치변경을 한다는 등 속성을 변경하는 속성 img { border: 1px solid black; transition: all 2s ease-in-out; } img:hover { transform: scale(0.5) rotateZ(90deg); border-radius: 50%; } rotate, scale rotate(45deg) : 입력한 각도만큼 회전. 음수도 입.. 2021. 10. 31. [Css] - transition (트랜지션) 정리 Transition (트랜지션) 어떠한 변화하는 과정을 보여주는 것 요소의 속성을 서서의 다른 상태로 변화하는 애니메이션을 만드는 방법 state (ex. :hover , :active ...)가 없는 요소에 붙는게 좋다 transition은 state에 따라 바뀌는 property를 갖고 있으면 사용된다 트랜지션은 뿌리(:root)에 선언한다. 액션을 나눠서 주려면 콤마를 이용해서 따로 준다. See the Pen Untitled by 정민희 (@alsgml1640) on CodePen. property, duration .transition { transition-property : width; transition-duration : 2s; transition-timing-function : line.. 2021. 10. 31. [Html,Css] - 의사 요소, 의사 클래스, 선택자 -- 추후 수정 의사(가상) 요소 - ( pseudo element) 선택자에 추가하는 키워드 선택한 요소의 일부분에만 스타일을 입힐수 있다 예시 ) ::first-line , :: placeholder …. :: placeholder - Placeholer 를 스타일하고싶을때 :: selection - 드래그 :: first-letter 의사(가상) 클래스 ( pseudo selectors) - States 선택자에 추가하는 키워드 의사 요소와 달리 요소의 특정 상태에 스타일 적용할 때 예시 ): hover , : focus , : active , :visited 등등 …. 필수 입력 대상이 아닌(required) input 요소를 선택자로 사용한다. 셀렉터 (combinator) P span : p안의 자식들 P >.. 2021. 10. 31. [Css] - position 1. Fixed 레이아웃보다는 위치를 아주조금 위로 , 아주조금 옮기고 싶을때 사용….??? Position :fixed 를 설정해주면 그 박스는 화면에 그대로 고정되어있다 전체 바디를 늘려도 그 자리 그대로 Top, bottom , left, right 프로퍼티 하나만 수정해도 다른 박스랑 같은 선상에 있지않는다 .( 다른 레이어 ) 이것을 사용하면 다른 레이어에 위치해 있을 것이다 모든 것의 위에 있다. 2. Static (디폴트) 레이아웃이 박스를 처음 위치하는 곳에 두는 것 3. Relative element가 처음 위치한 곳 기준으로 수정한다. 보이는 첫 기준점이 정말 중요! Top, bottom , left, right 수정시 element가 처음 위치한 곳 기준으로 수정한다. 4. Absol.. 2021. 10. 31. 이전 1 2 다음 728x90 반응형