반응형 CSS12 12. 반응형 웹 반응형 웹 사이트란?웹 사이트에서 PC화면 뿐만 아니라 모바일, 태블릿, 노트북 등 여러가지 디바이스의 해상도에 반응하여 각각에 맞는 최적의 화면을 보여주는 홈페이지 입니다. 뷰포트(viewport)뷰포트란 웹 브라우저에서 실제 내용이 표시되는 영역입니다. 모바일 viewport와 PC의 viewport는 그 크기가 다릅니다. 그렇기 때문에 반응형 웹 에서는 viewport에 맞게 화면을 보여줘야 할 필요가 있습니다.이럴때 사용하는 메타태그가 뷰포트 메타태그 입니다. 메타 뷰포트 태그 지정하는 법 메타 뷰포트 태그 속성width - 뷰포트 가로height - 뷰포트 세로user-scalable - 사용자 확대/축소 가능 여부initial-scale - 초기 화면 비율maximum-scale - 최대.. 2024. 4. 29. 11. Flexbox display float position 등과 같은 속성을 사용해 레이아웃을 구현하는데 한계가 있어서 어려운 레이아웃을 간단하게 구현할 수 있게 CSS3에 추가된 레이아웃 방식이 flexbox입니다. flexbox 효율적으로 HTML 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식입니다. flexbox는 우리가 배치하고 싶은 HTML 요소인 item과 이것을 감싸고 있는 상위 부모 요소인 container로 구성됩니다. flexbox를 만드는 방법은 정렬하려는 요소(item)의 부모 요소(container)에 display: flex;속성을 적용하면 됩니다. flex container 속성 종류전체적인 정렬이나 흐름에 관련된 속성은 container에 정의합니다.flex-dire.. 2024. 4. 29. 10. Transform, Transition transformtransform 속성은 HTML 요소를 이동 효과, 크기 조절, 회전, 기울이기를 나타낼 때 사용합니다.사용은 속성 값으로 특수한 함수를 넣어주면 됩니다. transform 속성 값 translate(x, y) - 지정한 크기만큼 x축, y축으로 이동합니다. translateX(x) - 지정한 크기만큼 x축으로 이동합니다. translateY(y) - 지정한 크기만큼 y축으로 이동합니다. scale(x, y) - 지정한 크기만큼 x축과 y축으로 확대·축소합니다. scaleX(x) - 지정한 크기만큼 x축으로 확대·축소합니다. scaleY(x) - 지정한 크기만큼 y축으로 확대·축소합니다. rotate(각도) - 지정한 각도만큼 회전합니다. (+시계방향, -시계반대방향) rot.. 2024. 4. 25. 9. 표(table) 태그 관련 속성 border - 속성을 사용하여 , , 태그에 테두리를 그립니다. border-collapse: collapse; - 속성을 사용하여 중복된 테두리를 하나로 합칩니다. background-color - 속성을 사용하여 배경색을 지정합니다. 실습 테이블 이름 과목 국어 수학 영어 홍길동 70 90 80 김길동 90 60 70 /* CSS */table { border: 1px solid black; border-collapse: collapse;}th, td { .. 2024. 4. 24. 8. Position position 속성 position은 HTML 요소를 배치하는 방법을 지정합니다. position 속성 값 static - 요소가 일반적인 흐름을 따라 배치가 되게하며, 기본값입니다. relative - 요소가 일반적인 흐름에 따라 배치가 되지만 static과 차이점은 요소가 자신의 위치에서 top right bottom left와 같은 지정된 속성 값 기준으로 배치된다는 점입니다. absolute - 요소가 일반적인 흐름을 따르지 않게합니다. static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다. fixed - 요소가 일반적인 흐름을 따르지 않게합니다. 화면의.. 2024. 4. 23. 7. Float float 속성 float이 적용되면 HTML 요소는 원래의 흐름에서 벗어나 둥둥 떠다니듯 배치가 됩니다. float 속성 값 none - 기본 값으로 요소를 띄우지 않습니다. left - 왼쪽에 띄웁니다. right - 오른쪽에 띄웁니다. inherit - 부모 요소로부터 상속합니다. initial - 기본값으로 설정합니다. clear 속성 clear는 취소하다 라는 뜻으로 float: left; 혹은 float: right; 값을 취소합니다. clear 속성 값 none; - 기본 값으로 전체를 취소합니다. left; - 왼쪽을 취소합니다. right; - 오른쪽을 취소합니다. both; - 왼쪽 오른쪽 둘 다 취소합니다. 실습 긴 내용1 긴 내용2 /* CSS */ img { width: 300px.. 2024. 4. 19. 이전 1 2 다음 반응형
