![]()
미디어 쿼리 PC 뿐만 아니라 모바일과 태블릿에도 적용되는 웹 사이트를 만들기 위해 사용된다. 모바일에 대응되는 반응형(브라우저 폭을 줄이거나 늘릴 때 자연스럽게 resize 되는 것) 또는 적응형 웹 사이트를 만들 때 사용되는 css 구문이다. 최소, 최대 넓이처럼 범위를 설정해 놓는 것이 미디어 쿼리라고 생각하면 된다. 주의사항 meta 속성을 반드시 넣어줘야 한다. viewport는 기기(노트북, 태블릿 등)의 화면을 의미한다. 너비와 배율은 content 안에서 정하고 device-width는 말 그대로 디바이스의 너비를 의미하고 initial-scale은 꼭 1.0으로 해줘야 한다. 만약 미디어 쿼리 안에서 background-color를 지정해주지 않는다면 그대로 yellow로 나타난다. ->..
![]()
Transform rotate : 입력한 각도만큼 특정 오브젝트를 회전시킨다. 음수도 가능하다. scale : 오브젝트를 확대, 축소시킨다. High 버전에서도 사용할 수 있게 해 준다. Transition (특정 조건 하에 연속적으로 변함) property : 점점 변해가는 과정을 적용할 속성을 넣어주면 된다. duration : 변하는 시간을 설정한다. timing-function : 속도의 성격을 정한다. delay : 특정 조건일 때(ex 마우스를 올려놨을 때) 효과를 몇 초 뒤에 발동시킬 건지 정한다. 순서는 상관없지만 duration 다음에 delay가 나와야 한다! hover를 쓸 때 .transition:hover 이런 식으로 붙여 써야지 잘 동작한다! (.transition :hover)..
![]()
Display inline 요소도 block 요소처럼 바꿀 수 있다. Float 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시킬 때 사용한다. 말 그대로 레이어를 띄운다는(float) 의미다.(화면 바깥?으로 띄운다고 생각하면 될 듯) Clear float를 제어할 때 사용한다. 보통 clear:both; 를 사용한다. 브라우저와 공간 사이의 공백 제거 html과 body 자체가 margin과 padding을 가지고 있기때문에 모두 초기화를 해야한다. 디자인 할 때 필수적으로 해줘야 되는 부분이다!
![]()
margin과 padding 위 사진처럼 border 바깥은 margin, border안쪽은 padding이라고 한다. 그리고 각 속성은 left, right, top, bottom으로 구성되어 있다. 열두 시 기준으로 시계방향 이라고 생각하면 된다. top, right, bottom, left 순서로 작성하면 된다 margin: 0 auto; 는 x축 기준으로 중앙 정렬을 해준다. margin 병합 현상 같은 부분에 margin이 적용되면 겹쳐진다(숫자가 큰 값이 적용된다). 자식에게 margin을 적용하면 부모에게까지 적용된다. 가장 많이 발생하는 경우라고 한다. position : absolute; 로 해결할 수 있다!
![]()
font-family font-family에 여러 값을 넣을 수 있는데 마지막은 sans-serif로 해주는 게 좋다. -> 모든 브라우저에서 지원하는 default 값이기 때문이다. background background-image는 공간을 이미지로 모두 채우려고 하는 속성이 있다. 한 축으로만 반복하고 싶다면 background-repeat: repeat-y; 혹은 repeat-x; 를 사용하면 된다. default는 background-repeat: repeat; 이다. 반복이 싫다면 background-repeat: no-repeat;로 설정하면 된다. background-position은 background의 위치를 지정해 준다. 오른쪽 위에 위치시키고 싶다면 right top 처럼 쓰면 된다...
