CSS3 [CSS] CSS 중급 (2) 페이지의 레이아웃 작성을 위해 사용하는 flex와 grid에 대해 정리해 보았습니다. flex는 부모 요소인 컨테이너(container)와 자식 요소인 아이템(item)으로 구성되며, 각각 플렉스 컨테이너, 플렉스 아이템이라고 부릅니다. 이들에게 다양한 속성들을 적용하여 컨테이너 내부의 아이템 크기나 아이템 배치 형태를 조절해 유연한 플렉스 구조를 설계할 수 있습니다. 하나하나 알아보도록 합시다. flex 적용하기 .container { display: flex; } flex가 일반 block배치와 다른 점은, 바로 block은 세로 방향으로 배치되지만 flex는 마치 inline처럼 가로 방향으로 배치된다는 점입니다. 그리고 float이랑은 다르게 아이템들의 높이가 자동으로 같게 유지됩니다. 배치 방향.. 2021. 10. 27. [CSS] CSS 중급 (1) 우선 CSS의 다양한 선택자 사용 방법들에 대해 정리하고, 지금까지 알아본 CSS 지식들을 이용해 웹페이지 내에서 드롭다운이나 툴팁 같은 특별한 기능을 수행하는 요소들을 구현해 보겠습니다. 선택자 저희는 이미 HTML요소, 아이디, 클래스로 선택자를 설정하는 방법을 알고 있습니다. 좀 더 세밀하게 선택자를 고르는 방법에 대해 알아봅시다. /*해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택합니다*/ div p {스타일;} /*태그의 하위 요소 중 태그 전부 다*/ /*해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택합니다*/ div > p {스타일;} /*태그의 바로 밑에 존재하는 하위 요소 중 태그 전부 다*/ 동위 관계 : HTML 요소의 계층 구조에서 같은 .. 2021. 10. 23. [CSS] CSS 기초 CSS의 기본부터 위치 속성까지의 기초지식들을 정리해 보았습니다. 기본 문법 CSS는 선택자와 선언부로 구성됩니다. 선언부는 중괄호({})로 둘러쌓여 있고, 선언부 내에 '속성명: 속성값' 이 있습니다. 각 속성들은 세미콜론(;)으로 구분됩니다. 다양한 방법으로 선택자를 이용해 HTML 요소를 가리켜 스타일을 적용할 수 있습니다. /*HTML 요소 선택자*/ h2 { color: teal; text-decoration: underline; } /*아이디(id) 선택자*/ #heading { color: teal; text-decoration: line-through; } /*클래스(class) 선택자*/ .headings { color: lime; text-decoration: overline; } /*.. 2021. 10. 20. 이전 1 다음
