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 클래스..

RESULT HTML DOCTYPE html>  html>     head>         title>Fruitstitle>          link rel="stylesheet" href="./common.css">     head>     body>         div>             img src="orange.png" >             h1>orangeh1>             ul>                                   li>a href="./orange.html">orangea>li>                        li>a href="./kiwi.html">kiwia>li>                                 ..

RESULT HTML 삽입 미리보기할 수 없는 소스 body Section Btn1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Section Btn2 Hello, It's Section2 Hello, It's Section2 Hello, It's Section2 Section Btn3 Hello, It's Section3 CSS style .accordion{ background-color: whitesmoke; /* 배경색상 화이트스모크 */ cursor: pointer; /* 커서 포..

RESULT HTML 삽입 미리보기할 수 없는 소스 body 클릭하면 메뉴 모양이 X로 변경됩니다. Click on the Menu Icon to transform it to "X" CSS style .container{ /* bar1,2,3 전체의 컨테이너 클래스 지정 */ cursor: pointer; /* 마우스 커서를 요소에 갖다 대면 클릭 모양으로 바뀜 */ } .bar1, .bar2, .bar3{ width: 35px;/* 각각의 bar들을 너비 높이 지정*/ height: 5px; background-color: #000;/* bar색상을 검정색으로 지정 */ margin: 6px 0;/* bar 여백을 상하 6px, 좌우 0px로 지정 */ transition: 0.4s;/* 애니메이션 속..

이전 글 확인 하기 HTML 삽입 미리보기할 수 없는 소스 body 클릭하면 메뉴 모양이 X로 변경됩니다.." data-og-host="seop-e.tistory.com" data-og-source-url="https://seop-e.tistory.com/2" data-og-url="https://seop-e.tistory.com/2" data-og-image="https://scrap.kakaocdn.net/dn/d1RlWr/hyORK1V8tn/MWnty5uVuHybWxFxDUhk1K/img.png?width=800&height=800&face=0_0_800_800,https://scrap.kakaocdn.net/dn/dAEnHc/hyOSU9Io0E/T7HRO4yKFNNFJRSipjmKBK/img.pn..