반응형 분류 전체보기39 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. 6. Display display 속성 HTML 요소마다 기본적으로 갖고 있는 display 속성 값을 어떻게 표시할지를 결정합니다. display: block 이면 Block 레벨 영역이며, display: inline 일 경우 Inline 레벨 영역 입니다. display 속성은 주로 4가지가 있습니다. display 속성 값 none 요소를 보이지 않게 설정합니다. 영역도 차지하지 않습니다. block 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. width, height 속성을 지정 할 수 있습니다. inline 컨텐츠만큼 영역을 차지합니다. block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. inline-block.. 2024. 4. 18. 이전 1 2 3 4 5 6 7 다음 반응형
