html/css

1.반응형 디자인 - 미디어 쿼리

post-thumbnail

창 크기 확인하기: 개발자도구 or command(⌘)+option(⌥)+U 우측상단에서 확인 가능 (창 크기 조절시 변화)

2022년 2월 17일

2.css 코드의 재사용

post-thumbnail

많은 양의 html파일에 동일한 style 코드가 중복될 때,중복되는 코드를 별도의 css파일에 저장한 후 불러오기파일명 ex) style.css❗️ 태그는 포함 ❌

2022년 2월 17일

3.css 문법 : <div>와<span>, 선택자

post-thumbnail

ex) 문단의 배경색을 지정하면 div는 직사각형 형태로 나타나고, span은 문장마다 길이가 다른 줄의 집합이 나타난다

2022년 2월 19일

4.[css] Flex 레이아웃 정리

post-thumbnail

Flex Container (부모요소) : containerFlex Item (자식요소) : itemflex 가로 방향으로 배치자신이 가진 내용물의 width 만큼만 차지 (inline과 비슷)height는 컨테이너의 높이만큼 늘어난다block 아이템들이 배치되는 축의

2022년 8월 22일

5.[css] Grid 레이아웃 정리

post-thumbnail

Flex는 한 방향 레이아웃 시스템 (1차원)Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)Referencehttps&#x3A;//studiomeal.com/archives/533

2022년 8월 22일

6.[css] display: flex 사용시 크기 줄어드는 것 방지하기!

post-thumbnail

모바일 css를 다루다가 화면이 작아지니까 display:flex를 적용한 개체가 양옆으로 줄어드는 문제가 생겼다.이렇게 ...부모 요소에 flex 지정flex-wrap, overflow hidden 등등 별 방법을 다 써도 안 되는 것이 이거 하나로 해결짠~ 모바일이

2023년 1월 26일