html 3

HTML/CSS 수업을 마치며

1. 정렬하기 [HTML] div 태그: 레이아웃을 나누기 위해 사용하는 태그 img 태그: 이미지를 표시하는 태그 (src 로 이미지 지정) a 태그: 링크를 연결하는 태그 (href 로 링크 지정) p 태그: 문단을 표시하는 태그 h 태그: 제목을 표시하는 태그 input 태그: 사용자로부터 입력을 받는 태그 [CSS] width: 가로 길이 지정 height: 세로 길이 지정 flex: 정렬을 위해 사용하는 display 의 값 (display: flex) justify-content: 메인 축 중앙 정렬 (초기에는 가로 축) align-items: 교차 축 중앙 정렬 (초기에는 세로 축) color: 글자 색 지정 background-color: 배경 색 지정 margin: 테두리 밖 여백 pad..

국비 2022.07.07

Float/Flex/Grid

Float Float은 특정한 요소를 왼족 혹은 오른쪽에 정렬하고자 할때 쓰는 속성입니다. 특이하게 다음 요소가 줄바꿈이 되지 않는다는 특징이 있습니다. Flex Flex를 사용하면 원래 세로로 있던 요소들을 가로로 배치할 수도 있고 여러요소들을 한번에 중앙에 배치할 수도 있습니다. flex는 자기 자신에게 적용하는 것이 아니라, 정렬하고자 하는 요소들을 감싸는 부모요소에 적용해야 합니다 Grid Grid는 말그대로 격자형태로 요소들을 배치할 수 있게 도와줍니다! 한 요소가 몇개의 칸을 차지랄지 임의로 선택할수 있는데요 잘 활용한다면 다양한 모양의 요소 배치를 손쉽게 할 수 있습니다.

국비 2022.07.05