2024.08.08 (Day 9) - HTML/CSS [Flexbox II]

Flexbox에서의 width속성 알아보기 Flexbox로 만드는 사이드바 레이아웃 안정성 높이기 Flexbox로 만드는 그리드의 한계 -> 클래스 기반, 12단 그리드 시스템 구축 미디어쿼리를 이용한 반응형웹▲ flex items 부가설명flex items의 width의 개념은width:300px 일때 / flex-basis: auto -> 300px / min-width: auto -> 300px 의 특징을 가지고 있다.  만약 width:300px 일 때와 basis값이 200px 일 경우에는basis 값이 auto 였으면 300px을 받아오지만 basis값이 우선적 200px이 적용된다.  만약 width 값을 적용하지 않고 basis값 만 적용 할 경우 내부 컨텐츠 크기 만큼 잡힌다. ◆ (da..

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

2024.08.07 - Figma(특강)

Figma 학생모드 적용 방법 - https://www.youtube.com/watch?v=kWLfWPhxYIQ&t=45s위 상태로 보여지면 학생용으로 유료버전을 무료료 사용 할 수있다.UI3버전 패치 - https://chromewebstore.google.com/detail/enable-ui3-beta-for-figma/gdjldebhilhckhblmhklofdebemiahhihttps://chromewebstore.google.com/detail/enable-ui3-beta-for-figma/gdjldebhilhckhblmhklofdebemiahhi    vscode 처럼 단축키를 숙달하자 ex) .content -> , ul>li*3 처럼 ■ 단축키* 화면넓게보기  1.컨트롤+쉬프트+\    2..

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

2024.08.06 (Day 8) - HTML/CSS [Flexbox]

Flexbox 입문 Flexbox 가용 공간의 다양한 활용 Flexbox의 주요 속성 알아보기 flex-grow, flex-shrink, flex-basisFlex Item의 크기가 결정되는 원리 이해하기 Flexbox로 만드는 사이드바 레이아웃 만들기  실무코드 = 이상적인 코드 = 나의 맥락 안에서 최대한 가지고있는 자원을 이용한 최적의 이상적인 코드실무 코드 vs 이상적인 코드    실무 코드: 현재 상황 내에서 이용 가능한 자원을 최대한 활용하여 개발된 코드.    - 맥락: 특정 상황과 제약 조건을 고려했을 때 가장 효과적인 해결책.    - 효율성: 맥락을 제거하면 비효율적인 코드로 보임.    - 초점: 이상적인 코드보다는 문제 해결에 중점을 둠.이상적인 코드: 일반적으로 권장되는 표준안. ..

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

2024.08.05 (Day 7) - HTML/CSS

주어진 디자인을 적절히 해석하여 웹페이지 형식으로 구현 레이아웃 클래스 .l_wrapper 활용하기 네거티브 마진, 가상 요소 셀렉터, 마진 병합, 인라인 레벨 요소 등, 기존 진도 적절히 활용하기 유연한 다단 구조, 그리드 구성에 대한 이해    해상도의 개념이 중요하다. 모든 사람들이 똑같은 모니터를 쓰는게 아니기에...크롬 화면 축소를 해보면 문제점이 보인다.   PREVIEW  HTMLDOCTYPE html>html>  head>    title>woodtitle>    link rel="stylesheet" href="style.css">  head>  body>      header class="header">        div class="l_wrapper">            secti..

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

2024.08.01~02 (Day 6) - HTML/CSS [bucketlist,citrus,pokemon,timeline]

PREVIEW HTMLDOCTYPE html>html>    head>        title>My Bucket Liststitle>        link rel="stylesheet" href="style.css">    head>    body>        div class="layout_wrapper">            section class="bucketlist">                header class="bucketlist-header">                    h1>My Bucket listh1>                header>                div class="bucketlist-contents">                    ol cl..

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

2024.07.31~ (Day5) - HTML/CSS

RESULTHTML 마크업은 웹 규모가 클때 주로사용 --> Cute animal Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos beatae fuga ex, officia tempore repudiandae commodi blanditiis. Quaerat, quis dolore illo in eaque odit sunt modi omnis necessitatibus saepe veritatis?  CSS /*CSS Resets*/ /*h1이나..

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