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 태그는..

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

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..

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..

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..

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

주어진 디자인을 적절히 해석하여 웹페이지 형식으로 구현 레이아웃 클래스 .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..

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..

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이나..

RESULT HTMLdoctype html>html>    head>        title>Profiletitle>        link rel="stylesheet" href="./style.css"> CSS연결-->    head>    body>        div class="wrapper"> div 태그에 wrapper 라는 클래스명을 지정하여 전체 틀을 잡기-->            div class="header"> wrapper 클래스 내에 header, contents, section 클래스를 만들어 3개의 레이아웃 구성 -->                img class="profile" src="./images/profile.png" alt=""> 이미지 태그에 profile 클래스..