2024.08.21 (Day 16) - HTML/CSS [grid 그리드 레이아웃 III]

Grid로 만드는 범용 Wrapper Layout Class (Flexbox 버전 포함)flex, grid 실무적인 적용 방법■ Grid로 만드는 범용 Wrapper Layout Class (Flexbox 버전 포함)▼ 우리가 flex에서 했던 것처럼 레이아웃을 좀 더 유연하게 작업하기위해     주어진 코드를 추가해주었다..l_row {  display: flex;  flex-wrap: wrap;    margin: 0 -20px;    row-gap: 40px;}.l_col {    box-sizing: border-box;    padding: 0 20px;}.l_col_12_12 { width: 100%; }.l_col_11_12 { width: 91.66666667%; }.l_col_10_12 ..

• format_list_bulleted BootCamp Review
• · 2024. 8. 21.
• textsms

2024.08.19, 20 (Day 14~15) - HTML/CSS [grid 그리드 레이아웃 II]

minmax()의 활용 미디어쿼리에 독립적인 반응형 그리드 (auto-fill, auto-fit) 그리드 아이템의 수동 배치 + 셀 병합 이해하기 자동 배치 규칙 이해하기 ◆ (day15/grid)■  그리드 레이아웃그리드 레이아웃 시스템은 그리드 컨테이너(부모 요소)에서 대부분의 레이아웃 작업이 이루어지며, 자식 요소들에 추가적인 레이아웃 관련 작업이 최소화될 수 있게 설계 되었다.그리드 컨테이너 (부모 요소) 집중식 레이아웃 관리: 그리드 컨테이너가 레이아웃의 중심이 된다. 대부분의 레이아웃 정의와 조정이 그리드 컨테이너 (부모 요소) 수준에서 이루어진다.자식 요소의 단순화: 개별 그리드 아이템(자식 요소)에 대한 직접적인 레이아웃 조작이 크게 줄어든다.마크업 간소화: 레이아웃을 위한 추가적인 마크업..

• format_list_bulleted BootCamp Review
• · 2024. 8. 20.
• textsms

2024.08.19 (Day 14) - HTML/CSS [grid 그리드 레이아웃 I]

그리드 레이아웃 시스템 이해하기 minmax()의 활용auto-fit, auto-fill 그리드 기법의 변화 예시◆ (day14/grid)DOCTYPE html>html>  head>    title>Gridtitle>    style>      body {        background-color: brown;      }      .playground {        border: 10px solid maroon;        width: 980px;        margin: 0 auto;        border-radius: 20px;        background-color: skyblue;        padding: 10px;      }      .frog {        backgr..

• format_list_bulleted BootCamp Review
• · 2024. 8. 20.
• textsms

2024.08.15,19 (Day 13~14) - HTML/CSS [INCREDIBLE]

INCREDIBLE 인크레더블 예제CSS Typography 섹션 관리font-size, font-family, line-height font-family설정과 구글 웹폰트 적용 em과 rem line-height 일괄 적용◆ (day13/incredible) ▼ 레이아웃 구성클래스명을 구성할때 l_wrapper와 그냥 wrapper의 차이는 공공재이냐 아니냐 그 차이다.그 점을 인지하고 작명하자 ▼ width auto와 max-width는 완전 별개이다.  ▼ article ? section?section 태그는 섹션(부분, 구역, 영역) 들을 그룹화 해서 분리하는 역할을 한다.article 태그는 문서내에서 그룹화해서 분리하는 역할을 한다. ▷ article - 내용이 독립적이다.article 태그는..

• format_list_bulleted BootCamp Review
• · 2024. 8. 19.
• textsms

2024.08.13~14 (Day 11,12) - HTML/CSS [Position]

Position: 컨테이닝 블록, 스태킹 컨텍스트의 이해, inset Position 속성 입문스태킹 컨텍스트의 이해 inset의 이해 반응형 단위 - 뷰포트 기준에서의 vw, vh ◆ (day11/position/basic) 네거티브 마진은 위치이동은 하는건 맞지만 차지하는 공간이 다르다. ▼ transform (애니메이션 속성 때 주로 사용)▼position   - static : 초기값    - relative(상대적인)      내위치 기준에서 상대적으로 움직인다. 절대적이아니며 환경에따라 위치가 달라진다    - absolute (절대적인)     속성을 적용하면 ypg텍스트가 사라진걸 볼수있다. 차지하고있는 공간을 버리는것이 핵심 ▼다시 left값과 top값을 0으로 적용해보면 요소가 왼쪽 상..

• format_list_bulleted BootCamp Review
• · 2024. 8. 18.
• textsms

2024.08.12 (Day 10) - HTML/CSS [Flexbox III]

flex-direction의 다양한 활용 디바이스 툴바의 사용 메타 요소 viewport 커스텀 프로퍼티의 활용말줄임표텍스트 줄바꿈 제어line-heightflex 공부 하는 사이트 - https://flexboxfroggy.com/#ko  ◆ (day10/flex-direction/frog)  forg 요소가 3개일때 display flex 하면 왼쪽부터 flex 정렬된다. flex-basis auto를 사용하여 아이템의 기본크기를 설정하고 auto 해줌으로써  아이템 자신의 width 또는 height 속성의 값을 사용한다.  또한 가용 공간을 활용 하는 기법이 2가지가 있었다.여백으로 쓰거나 너비로 쓰거나..  여백화는 클래스 frog 옆에 클래스 추가해서 가용 공간을 활요한다.  다른 방법으로 f..

• format_list_bulleted BootCamp Review
• · 2024. 8. 18.
• textsms