2024.08.23 (Day 18) - HTML/CSS [Forms(Form, Input, Textarea, Button) II ]

폼 요소를 적절히 초기화하고 최초 스타일 재구축 폼 요소, 최소한의 접근성 확보하기 체크박스와 라디오버튼 커스텀 버튼 커스텀 ◆ (day17/meeting_room) ▼ input은 컨테이너가 아니기에 스타일링을 위하여 한번 감싸주기위해 div를 사용하고 작업한다즉 이 div는 input[type='text']를 한번 감싸는 역할이다.input 자체의 스타일을 커스텀 하면 다양한 입력 필드 유형을 소화하기 어렵기 때문이다 ▼ input의 스타일을 변수값을 설정해서 작업을 유연하게 한다   ■ input의 height, line-height, font-size, padding등, 플러스 알파하여 커스텀 할 수 있는 부분을 CSS Variable로 만들어준다 -> (확장성이 좋아짐) ▼ 62.5= 기본폰트 ..

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

024.08.22 (Day 17) - HTML/CSS [Forms(Form, Input, Textarea, Button) I ]

transform, transition, animation을 복합적으로 활용한 예제폼 요소의 기능적인 측면 이해폼 요소의 기본 스타일 특성 이해하기폼 요소를 적절히 초기화하고 최초 스타일 재구축폼 요소, 최소한의 접근성 확보하기체크박스와 라디오버튼 커스텀버튼 커스텀◆ (day17/music)■ transform, transition, animation 예제    ▼ 아이콘 추가하여 하나로 합친 후 가운데 정렬또는 left 50% right 50% ▼ transform을 사용하여 중앙 정렬 할 수 있다. ▼ 네거티브 마진을 사용하여 중앙 정렬 할 수 있다 ▼ nth-child와 transform translate rotate를 적절히 사용하여 각 아이콘들의 위치를 조정해준다 ▼ rotate로 인해 이미지가..

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

2024.08.21 (Day 16) - HTML/CSS [ CSS Animation: transform, transition, animation]

Animation, Transition 주요 속성과 활용 Transform 주요 속성과 활용 :hover 가상 클래스의 활용 (노트북 이슈로인한 직접 작성한 코드 및 티스토리 내용이 몽땅 날아가버려서 교수님의 자료 + pdf로 대체하겠슴 ㅜㅠ) Transform transform속성은 요소의 크기(scale), 위치(translate), 회전(rotate), 기울기(skew)를 적용할 수 있다.또한 시각적 부분의 변화만을 제공하며 레이아웃에 직접적인 영향을 주지 않는다 (기존 공간 유지) .circle { transform: rotate(45deg) translateX(100px);} 변환 함수변환 함수는 띄어쓰기를 통해 조합하여 사용될 수 있으며, 이때 각각의 변환은 독립적으로 적용되지만,변환의 순서..

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

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