태그의 분류 블럭 요소 태그 : 구조를 담당 , , , , , 등 인라인 요소 태그 : 내용을 담는 태그 CSS 크기 적용 안됨 , , , 등 display: block 을 설정해주면 크기 적용가능 인라인블럭 요소 태그 : 내용을 담는 태그 CSS 크기 적용 가능 , 등 여러개의 인라인블럭 요소가 있을 경우 바닥을 기준으로 배치되며 여백이 개별적으로 적용이 안됨 vertical-align : top 을 적용시켜주면 됨 ex) vertucal-align : top display 속성 display : block display : inline display : inline-block display : none ex) display : none : 요소에 마우스 커서가 올라가야 화면에 나옴
flex : 원하는 위치에 배치, 너비, 높이, 위치 변형 { display : flex; } flex와 float의 차이는 flex는 브라우저의 크기를 조절하게되면 안에 요소들의 사이즈도 자동으로 조절됩니다. flex-direction 속성 : 방향 설정 row row-reverse column column-reverse ex) flex-wrap 속성 : 줄바꿈 nowrap wrap wrap-reverse justify-content 속성 : 수평 정렬(가로 정렬) flex-start flex-end center space-between space-around space-evenly align-items 속성 : 수직 정렬(세로 정렬) stretch(기본값) start end center align-c..
가상클래스 선택자 : 가상클래스 선택자는 특정 요소의 상태나 위치에 따라 스타일을 적용하는데 사용됩니다. :first-child : 요소의 첫 번째 자식 선택 :last-child : 요소의 마지막 자식 선택 :nth-child(n) : 요소의 n번째 자식 선택 n에는 숫자, 키워드(even, odd), 수식(an+b) 사용가능 ex) :nth-last-child(n) : 요소의 뒤에서부터 n번째 자식 선택 :nth-of-type(n) : 동일 타입 요소 중 n번째 요소 선택 :nth-last-of-type(n) : 동일 타입 요소 중 뒤에서 n번째 요소 선택 :not(selector) : 지정한 선택자에 해당하지 않는 요소 선택 :hover : 마우스가 요소 위에 올라갔을 때 :active : 요소가 ..
float : CSS의 float 속성은 요소를 가로로 띄우는 데 사용됩니다. { float: left; } : 태그들을 왼쪽에서부터 차례로 가로 배치 { float: right; } : 태그들을 오른쪽에서부터 차례로 가로 배치 float 속성이 적용 된 태그를 감싸는 부모태그는 높이값을 0px로 인식하기때문에 웹에 나타나지 않습니다. 부모태그를 화면에 보여주기 위해서는 ::after를 넣어줘야합니다. ex)
