시멘틱 태그
: HEADER, SECTION, ARTICLE, NAV, ASIDE, FOOTER
display 속성 차이 (태그별)
display 활용도
- block : 크기 지정 가능 ( height, width)
- inline : 크기 지정 불가능(한 줄에 정렬)
- inline - block : 크기 지정 가능 ( 한 줄에 여러개 가능)
- none : 화면에 안보이게 해줌 ( f12 눌러서 속성 확인 가능)
하이퍼링크에 마우스 올리면 주소 나오게 하는 실습
display : grid
2차원 (행과 열)의 레이아웃 시스템 제공하는 속성
자세한 설명 나와있는 사이트
https://studiomeal.com/archives/533
이번에야말로 CSS Grid를 익혀보자
이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “
studiomeal.com
https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
grid 관련 게임 - grid garden
Grid Garden
A game for learning CSS grid layout
cssgridgarden.com
동일한 클래스 사용하기
div.item*개수
display - flex
div들이 한줄에 여러개 올 수 있도록 함
정렬 변경 방법
alt + l + o -> f12
-> 원하는 정렬 클릭해서 변경
<관련 게임> - flexbox froggy
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
'스마트인재개발원 > HTML,CSS' 카테고리의 다른 글
| [CSS]position - static/relative/absolute/fixed 정의, 사용법 (1) | 2022.10.05 |
|---|---|
| [CSS] border/ margin/ padding 예제 (1) | 2022.10.04 |
| [CSS]계층 선택자 / 반응 선택자 (0) | 2022.10.01 |
| [css] 아이디 선택자 / 클래스 선택자 정의, 사용방법 (0) | 2022.10.01 |
| [CSS] HTML에 CSS 작성 방법 / 구글 폰트 사용방법 (0) | 2022.10.01 |
