프론트엔드/HTML&CSS4 [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. [HTML] 기본 태그 총 정리 HTML의 기본적인 태그들에 대해 정리해 보았습니다. 전반적인 구조 메인 콘텐츠 텍스트 요소 제목1 제목2 제목3 제목4 제목5 제목6 첫 번째 줄의 단락 두 번째 줄의 단락 굵은 글씨 굵은 글씨 이탤릭체 하이라이팅 삭제효과 밑줄 긋기 인용구 ASAP 우리집 주소 는 여기 기본 요소 배경색 흰색으로 변경 글자색 빨간색으로 변경 글자 크기 250%로 변경 문단 중앙 정렬 스타일링 한번에 적용 색상 이름 RGB 색상값 16진수 색상값 HTML 요소의 배경을 이미지(image)로 설정 새 창에서 오픈 현재 창에서 오픈 제목 3으로 이동 ... 제목 3 사과 포도 사과 포도 호박 - 박과의 한해살이 덩굴성 채소 상추 - 국화과의 한해살이 또는 두해살이풀 tr태그로 테이블의 행을 구별하고 th로 컬럼 이름을 나타.. 2021. 10. 18. 이전 1 다음
