Web 3 24-08

Web 수업자료/Web 정규

Web 3 24-08

초코렛맛 2024. 8. 8. 18:25

■ 8월 8일 - 1일차

■ 반응형 웹 기본

○ 반응형 웹 기본

오늘날 다양한 기기와 해상도를 통해 웹 문서를 열람하고 있는데

이로 인해 특정 기기, 브라우저에 국한 되지 않고

다양한 환경에서 동일한 경험을 제공할 수 있는 웹 문서를 만들어야 한다.

이것을 반응형 웹 이라고 함.

○ 반응형 웹이란?

다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해 가며

반응하는 웹문서 또는 이를 위해 사용하는 기법

스마트 모바일 기기 등장 및 태블릿 등장으로 웹문서 설계에 변화가 필요함

모바일 전용 URL 제공, 데스크톱 전용 URL 따로 제공하는 방식도 있음.

그러나 기기의 유형의 다양해 짐에 따라 한계가 드러날 수 밖에 없음

그로인해 사용하는 기기에 적절하게 맞춰지는 사이트를 개발 하는 것이 바람직해졌고

가변성을 유지 시켜주는 것이 핵심 키워드가 됨.

○ 뷰포트 (Viewport)

현재 화면에 보여지는 영역을 의미

기기 별로 뷰포트가 다르기 때문에 동일한 웹 페이지 라도 기기에 따른 배율조정으로 화면의 크기가 다르게 보임

<meta name="viewport" content="width=device-width, initial-scale=1.0">

- 기기의 너비 기준으로 초기 크기를 1배율로 하겠다라는 의미 임.

- 작성하지 않으면 뷰포트 변경에 따라서 크기가 유지 되지 않고 사이즈가 각각 달라짐.

반응형 웹의 일반적 화면 크기는 모바일 768px 미만, 태블릿 1024px 미만, 데스크 탑 1024px 이상

■ 단위(상대 단위, 뷰포트 단위)

○ 절대 단위, 상대 단위

- 절대 단위 : px 은 절대 길이 단위로 화면이 변형되어도 변경되지 않고 고정되어있음

- 상대 단위 : rem, em 은 상대적인 길이 단위로 특정 요소에 고정되어 요소의 변경에 따라 변화됨

○ em, rem

- 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위

- em : 부모요소의 글꼴 크기를 의미함 부모가 20px 이면 1em = 20px, 2em = 40px

- rem : 루트 요소의 글꼴 크기를 의미함 1rem = 16px, 2rem = 32px

- 루트 요소는 Html요소를 말하고 기본값은 16px

- Hint : em으로 여백(margin, padding) 크기를 지정할 때는 부모가 아닌 가지 자신의 글자크기를 기준으로 함

○ 뷰포트 단위 (vw, vh, vmin, vmax)

- em 과 rem은 주변에 맞게 크기를 변경하지만 기기화면에 따른 변화는 불가능

- 기기 화면 크기에 맞춰 변화는 단위를 뷰포트 단위 라고 함

- 1vw : 뷰포트 너비의 100분의 1

- 1vh : 뷰포트, 높이의 100분의 1

- 1vmin : 뷰포트 높이와 너비중 작은 쪽

- 1vmax : 뷰포트 높이와 너비중 큰 쪽

○ %단위 가변 레이아웃

- % 백분율로 부모요소와의 상대적 크기를 지정시 사용

- 부모요소와의 상대적 크기를 지정할 수 있다.

- font-size : 부모 글자크기의 50% 비율

- height : 부모 높이의 % 비율

- width, margin, padding : 부모 너비의 %비율 / margin,padding은 너비를 기준으로 들어감

○ Calc

- Css 함수는 괄호안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용

- calc 사용시 주의 사항으로 사칙연산의 앞뒤는 1칸씩 띄어 써야 함.

width: calc(100% - 100px);

■ 미디어 쿼리

○ 미디어 쿼리(media query)

미디어 타입을 인식하고 물리적 속성을 감지할 수 있는 기능

- 두가지 구성요소를 가지고 있음 (미디어 타입, 조건에 대한 물음)

@media 미디어 타입 and (조건) {
    div{	/* 변경 요소 */
    
    }
}

/* 800px 이하를 뜻함 */
@media screen and (max-width:800px) {
    div{
        width: 300px;
        height: 300px;
    }
}
/* 500px 이하를 뜻함 */
@media screen and (max-width:500px) {
    div{
        width: 200px;
        height: 300px;
    }
}

- link로 사용하기 screen and (max-width:800px) 800미만 일때 style.css 적용

- 기존 link보다는 밑에 있어야 적용됨 (나중에 읽기 때문에)

<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style.css" media="screen and (max-width:800px)">

■ 8월 13일 - 2일차

■ 레이아웃(Layout)

전체적인 디자인 콘셉트와 계획에 따라 서체와 이미지 등 각각의

시각적 요소들을 한정된 공간 안에 적절하게 배치하는 것을 의미

인터페이스 디자인에서 레이아웃이란

화면의 전체적인 구도를 파악하고 심미적 요소들을

화면에 배치하는 것을 의미

시각적 인터페이스의 레이아웃을 결정하는데 있어서의 핵심은

정보의 분류와 위계, 체계 등의 정보 설계, 즉 콘텐츠 구조임

레이아웃을 구성할 때에는 그리드가 명확해야 하며,

페이지 간의 일관성이 뛰어나 사용자가 어떤 페이지에 머물든지 간에

원하는 정보를 빠르게 찾을 수 있어야 한다.

그러나 모든 페이지가 일관적이기만 하면 페이지의 인상이 지루해질 수 있기 때문에

일관성을 유지 하면서도 약간의 변화와 다양성을 줄 수 있어야 한다.

레이아웃은 웹사이트의 심미성 뿐 아니라

사용 편의성 및 효율성, 정보 전달성 등에 밀접한 영향을 미침

○ 그리드 시스템(Grid System)

같은 간격으로 배치된 수직·수평의 가상의 선, 즉 격자로 된 가이드라인을 의미하며,

그리드를 이용하여 디자인 요소들을 조화롭게 구성하고 배치하는 레이아웃 기법

○ 그리드의 종류

그리드를 단으로 나누는 것인데, 단(column)의 수에 따라 이미지가 달라진다.

그리드는 정확한 배치와 통합, 질서, 순서를 부여함으로써

웹사이트 공간을 체계적으로 활용할 수 있게 한다

시각적 조화와 심미성을 높여주며, 정보
를 조직적이고 명료하게 표현하도록 한다

그리드 시스템을 활용하게 되면 시각적 구성 요소들을 배치하는데

기준이 되기 때문에 단순히 감에 의지하여 구성 요소를 배치하는 것보다

레이아웃 작업이 훨씬 쉬워지며, 여러 페이지에 걸쳐 작업해야 하는

웹사이트의 경우에는 웹페이지들의 일관성과 통일성을 유지할 수가 있다

○ 해상도 및 배치

웹사이트를 디자인할 때에는 모니터에 따라 작업 해상도가 달라진다.

가로와 세로 각각 1024×768, 1280×1024, 1920×1080 해상도 등이 있으며,

각 해상도 안에 콘텐츠가 안전하게 보일 수 있도록

디자인 작업 시 좌우 여백을 주는 것이 일반적임

콘텐츠 영역의 폭을 12개의 칼럼으로 나누고

가로 사이즈를 960px로 설정하는 960 그리드 시스템을 적극 활용하는 것이 좋다.

가로 폭을 12개의 칼럼으로 나누는 이유는 12가 1, 2, 3, 4, 6으로 나누어지기 때문인데,

웹사이트 디자인에서 콘텐츠 배치를 위한 가장 일반적 분할이

2단, 3단, 4단임을 고려했을 때 12개의 칼럼은 콘텐츠의 종류와 크기에 따라

다양한 분할과 통합에 매우 효율적이다

■ 반응형 웹 레이아웃

○ 반응형 웹사이트의 레이아웃

사용자의 화면 크기에 반응을 한다고 하여 반응형 웹이라고 하며

반응형 웹디자인을 기반으로 하는 다양한 디바이스를 대응하는 웹을 말한다.

디스플레이 종류와 크기에 따라 자동으로 조절하며 정보 설계상에서 중요한 항목들을 도출하여

화면에 대한 레이아웃을 정한다

- 유동형 패턴(Mostly Fluid)

중대형 화면에서 중간 크기의 화면까지는 여백 정도만 조정하고,

작은 화면이 되면 그리드가 움직이며 콘텐츠를 수직으로 배치한다.

- 기본형태

<style>
    body{
        padding: 0;
        margin: 0;
    }
    #wrap{
        width: 960px;
        margin: 0 auto;        
    }
    #wrap > div {
        height: 400px;
    }
    .box1{
        width: 100%;
        background-color: hotpink;
    }
    .box2{
        width: 50%;
        background-color: aqua;
        float: left;
    }
    .box3{
        width: 50%;
        background-color: blueviolet;
        float: right;
    }


</style>

<body>
    <div id="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

- Media 쿼리 사용

    @media screen and (max-width: 960px){
        #wrap{
            width: 95%;
        }
    }
    @media screen and (max-width: 768px){
        #wrap{
            width: 100%;
        }
    }
    @media screen and (max-width: 480px){
        .box2, .box3{
            float: none;
            width: 100%;
        }
    }

- 칼럼드롭(Column Drop)

화면의 폭이 좁아져 더 이상 콘텐츠의 정상적인 표시가 힘들 경우 컬럼을 하단으로
하여 열을 수직으로 쌓는다.

콘텐츠가 서로 연관 되어 있지 않을때 효과적임

세 개의 콘텐츠가 연관되어 있다면 계층구조 관리가 힘듦

- 기본형태

<style>
    body{
        padding: 0;
        margin: 0;
    }
    #wrap{
        width: 100%;
        display: flex;
    }
    .box1{
        width: 25%;
        height: 600px;      
        background-color: hotpink;
    }
    .box2{
        width: 50%;
        background-color: aqua;
    }
    .box3{
        width: 25%;
        background-color: blueviolet;
    }

</style>

<body>
    <div id="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

- Media 쿼리 사용

    @media (max-width: 960px){
        #wrap{          
            flex-wrap: wrap;      
        }
        .box1{
            width: 30%;
        }
        .box2{
            width: 70%;
        }
        .box3{
            width: 100%;
            height: 300px;
        }
        
    }
    @media (max-width: 768px){
        .box1{
            width: 100%;
            height: 300px;
        }
        .box2{
            width: 100%;
            height: 600px;
            order: -1;
        }
        
    }
    @media (max-width: 480px){
        .box2{
            height: 1000px;
        }
        .box1, .box3{
            height: 600px;
        }
    }

- 레이아웃 시프터 패턴(Layout Shifter)

이 패턴은 스크린 크기 마다 다른 형태의 레이아웃을 사용하여 다른 패턴들 보다 복잡하다.

단순히 컬럼을 아래로 떨어뜨리는 배치 방식이 아닌

화면 크기마다 새로운 레이아웃으로 변형한다

- 기본형태

<style>
    body{
        padding: 0;
        margin: 0;
    }
    #wrap{
        width: 960px;
        display: flex;
        margin: 0 auto;
        height: 100vh;
    }
    .box1{
        width: 30%;
        height: 100%;
        background-color: green;
    }
    .boxwrap{
        width: 70%;
        height: 100%;
    }
    .box2{
        height: 50%;
        background-color: brown;
    }
    .box3{
        height: 50%;
        background-color: aqua;
    }

</style>

<body>
    <div id="wrap">
        <div class="box1"></div>
        <div class="boxwrap">
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
        
    </div>
</body>

- Media 쿼리 사용

    @media (max-width: 960px){
        #wrap{
            width: 95%;
        }
    }
    @media (max-width: 768px){
        #wrap{
            width: 100%;
            display: block;
        }
        .box1{
            width: 100%;
            height: 100px;
        }
        .boxwrap{
            width: 100%;
        }
    }
    @media (max-width: 480px){
        .box1{
            width: 100%;
            height: 50px;
        }
        .boxwrap{
            height: 200%;
        }
    }

■ 8월 16일 - 3일차

- 미세조정 패턴(Tiny Tweaks)

미니멀리즘에 따른 접근 방식으로 다른 패턴들 보다 단순한 패턴이다.

보통 하나의 컬럼을 사용하여 브라우저의 폭이 변하더라도 레이아웃의 변화가 크지 않아서

블로그에서 많이 사용되는 패턴

- 기본형태

<style>
    body{
        margin: 0; padding: 0;
        background-color: bisque;
    }
    #wrap{
        width: 80%; margin: 100px auto;
    }
    .box{
        width: 18%; height: 50px; margin: 1%;
        background-color: #fff;
        border-radius: 10px; float: left;
    }

</style>

<body>
    <div id="wrap">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

- Media 쿼리 사용

    @media(max-width:1024px){
        .box{width: 23%;}
    }
    @media(max-width:960px){
        .box{width: 31.333%;}
    }
    @media(max-width:768px){
        .box{width: 48%;}
    }
    @media(max-width:480px){
        .box{width: 98%;}
    }

- 오프캔버스 패턴(Off- canvas)

패턴들이 작은 화면에서는 길게 늘어나는 결과가 나타나기 때문에

페이지 컴포넌스를 스크린 밖으로 밀어냈다가 요청을 받으면

슬라이딩 도어처럼 다시 콘텐츠를 화면에 노출하는 방식이다

- 기본형태

<style>
    body{
        padding: 0;
        margin: 0;
    }
    #wrap{
        width: 960px;
        margin: 0 auto;
        height: 100vh;
    }
    #wrap-box{
        width: 100%;
        height: 100%;
        display: flex;
    }
    #wrap-box > div{
        width: calc(100% / 3);
    }
    .box1{
        background-color: aquamarine;
    }
    .box2{
        background-color: burlywood;
    }
    .box3{
        background-color: chartreuse;
    }

</style>

<body>
    <div id="wrap">
        <div id="wrap-box">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div> 
        </div>              
    </div>
</body>

- Media 쿼리 사용

    @media (max-width: 960px){
        #wrap{
            width: 100%;
        }
    }
    @media (max-width: 768px){
        #wrap{
            overflow: hidden;
            
            position: relative;
        }
        #wrap-box{
            position: absolute;
            width: 150%;
        }
    }
    @media (max-width: 480px){
        #wrap-box{
            width: 300%;
            margin-left: -100%;
        }

    }

○ 적응형 웹 디자인 (Adaptive Web Design)

많은 정보를 압축하여 한 화면에 표현하는 것을 선호하는 사람들이 늘어남에 따라

원 소스 멀티유즈를 적용하기 위한 가장 현실적인 방안으로 적응형 웹 디자인을 들 수 있다

- 유동형 테이블(Fluid Table)

여러 개의 열이 표현되는 표 형태의 화면 구성은 한 화면에 많은 정보를

표현할 수 있지만 가로 해상도가 극단적으로 줄어드는 스마트폰 환경에서는

가독성이 떨어지는 문제가 있다.

- 크로스탭 그리드(Crosstab Grid)

크로스탭 그리드는 세로 해상도가 가로 해상도보다 큰 스마트폰과 같은

기기 환경에서는 행과 열을 반대로 표현하여 한 번에 보면 좋은 각 열의 데이터를

가로로 배치하여 다수의 열을 가로 스크롤을 이용하여 사용이 가능하도록 하는 방식으로

스마트폰 화면에서 최적화된 적응형 웹 디자인 기술

- 점진적 컬럼 숨김 그리드(Progressive Hide Grid)

점진적 컬럼 숨김 그리드는 화면 해상도에 따라 중요성이 떨어지는 컬럼을 숨기는

기능을 제공하는 적응형 웹디자인 기술

데스크톱 PC에서는 넓은 화면에서 다양한 그리드 정보를 모두 표현하기 위해

다수의 컬럼 정보를 보여주지만,

모바일 기기 등에서는 다양한 정보가 우선이 아닌

정확한 정보를 전달하기 위하여 핵심 정보 위주로 표현할 때 매우 적합

- 반응형 스크롤 그리드(Responsive Scroll Grid)

반응형 스크롤 그리드는 일정 크기 이하의 화면에서는 중요 컬럼은 틀 고정되고

나머지 컬럼에 가로 스크롤이 생기는 적응형 웹디자인 기술

중요한 컬럼 정보는 항상 보이도록 유지시키고 선택적인 정보들은 스크롤을 이용하여

확인할 수 있도록 하여 정보 전달을 효율적으로 각인시킬 수 있는 기술

- 아코디언 탭(Accordion Tab)

아코디언 탭 기술은 데스크톱에서는 기존 방식의 탭 콘텐츠 사용 방식을 사용하며

터치 방식의 모바일 기기에서는 아코디언 탭 방식으로 전환시켜 주며,

세로 스크롤을 이용하여 콘텐츠를 유연하게 확인할 수 있도록 도와주는 유용한

적응형 웹디자인 기술이라고 할 수 있다.

■ grid layout

○ grid layout이란

- 이름 그대로 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식

- 그리드 아이템의 배치와 정렬은 컨테이너 내부 행과 열의 상호작용을 통해 결정

- flex는 주축과 교차축을 가지고 정리한다고 한다면 gird는 상호작용을 통해 결정

- grid container : 레이아웃을 그리드 방식으로 결정할 요소

- grid item : 컨테이너 내부에서 그리드 방식으로 배치

○ 사용법

grid container에서 display속성의 값에 grid 사용

div{
	diplay: grid;
}

■ grid-template-columns,rows

○ grid-template-columns

- grid container 트랙 중 열 내 아이템들의 크기를 지정할 수 있는 속성

- 기본형태는 열과 행 모두 container의 크기에 맞게 나온다.

- 트랙이란 행 또는 열을 뜻함

○ 사용법

- px형태로 3열을 구성하려면 px px px (개수에 따라서 열 구성, 차이는 남)

- %형태로 container의 크기의 %형태로 들어감

- fr형태 남은 사이즈를 가지고 fr의 전체를 가지고 나눔 1fr 2fr (남은것중 1/3 2/3) 크기

- 같이 사용 가능

○ 코드

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

<style>
    .container{
        height: 100px; 
        background-color: yellow;
        display: grid;
        grid-template-columns: 10% 100px 2fr;
    }
    .item{
        background-color: yellowgreen;
        border: 1px solid #000;
    }
</style>

○ grid-template-rows

- grid container 트랙 중 행 내 아이템들의 크기를 지정할 수 있는 속성

- columns와 동일하며 item이 부족해 남으면 빈공간을 남김

- columns과 같이 주어도 됨

○ 코드

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

<style>
    .container{
        height: 200px; 
        background-color: yellow;
        display: grid;
        grid-template-rows: 1fr 2fr;
        grid-template-columns: 1fr 2fr;
    }
    .item{
        background-color: yellowgreen;
        border: 1px solid #000;
    }
</style>

■ gap(grid-gap)

○ gap(grid-gap)

- gap으로만 사용가능

- grid cotainer에서 item들의 사이 간격을 지정하는 속성

- columns 와 rows가 수치로 되어 있으면 container를 넘어감

○ 사용법

- px로 사용해도 되고 %로 사용해도됨 그러나 너비와 높이가 다르면 %는 각각에 %임

○ 코드

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

<style>
    .container{
        height: 200px; 
        background-color: yellow;
        display: grid;
        grid-template-rows: 1fr 2fr;
        grid-template-columns: 1fr 2fr;
        gap: 30px 10px;
    }
    .item{
        background-color: yellowgreen;
        border: 1px solid #000;
    }
</style>

■ 트랙함수

○ 트랙 함수

- grid container의 크기를 지정할때 사용할 수 있는 유용 함수

- repeat(), minmax(), auto-fill, auto-fit 이며 template에서 사용한다.

- grid-template-columns: repeat( , ) 형태로 사용

○ repeat(반복개수, 크기)

- 반복적으로 수치를 설정할때 사용함

- 크기가 container를 넘어가면 넘어간다.

○ minmax(작은, 큰)

- 작은보다 작아질수 없고 큰보다 커질수 없다.

- repeat(개수, minmax(작은, 큰)) 으로 사용함

○ auto-fill, auto-fit

- repeat의 개수에 작성

- auto-fill은 공간이 남으면 개수를 늘리고 모든것이 열로 나오면 남은 공간을 남김

- auto-fit은 위와 동일하나 남은 공간을 체워준다.

- 수치값이 어떠냐에 따라 체워주지 않을수도 있다.

○ 코드

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

<style>
    .container{
        height: 100px; 
        background-color: yellow;
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(80px, 1fr));

    }
    .item{
        background-color: yellowgreen;
        border: 1px solid #000;
    }
</style>

■ grid-row, grid-column

○ grid-row, grid-column

grid-item에서 사용하며 그리드 컨테이너의 줄번호를 이용해 배치할 수 있다.

row는 위아래로 내려오면서 기준선을 따라서 번호 가장 윗선이 1

column은 좌우로 넘어가면서 기준선을 따라서 번호 가장 왼쪽이 1

○ 코드

<div class="main">
    <div class="a">1</div>
    <div class="a">2</div>
    <div class="a">3</div>
    <div class="a">4</div>
    <div class="a">5</div>
    <div class="a">6</div>
</div>

div{
    border: 1px solid #000;
    box-sizing: border-box;
}
.main{
    width: 300px;   height: 100px;
    display: grid;
    grid-template-columns: repeat(3,1fr);    
    grid-template-rows: repeat(3,1fr);
    background-color: yellowgreen;
}
.a{
    background-color: aquamarine;
}
.a:nth-child(2){
    grid-column: 2/4;
    grid-row: 2/5;
}

○ grid-row-start, end / grid-coumn-start,end

- grid-row : 1 / 3 == grid-row-start: 1; grid-row-end: 3 과 동일

■ grid-templare-areas, grid-area

○ grid-templare-areas, grid-area

- 그리드 영역의 이름을 이용해 레이아웃의 형태를 정의

- grid-templare-areas : grid container에서 형태를 지정

- grid-area : grid item에서 이름을 지정하는 형태

- grid item에서 이름지정방식

.a:nth-child(1){
    grid-area: a;
}

-grid container에서 areas 통제방식

.container{
	grid-template-areas: 
    "a a b"
    "d d b"
    "- - c"
    ;
}

- 빈칸은 다른 이름으로 넣어주면 됨 보통(.)으로 넣는다. 숫자는 사용하지 않을것

- 요소들이 분리되면 문제 발생

- 비어 있어도, 넘어가도 문제 발생

- 행과 열이 많이 편성되어 있을때 지역을 잡지 않으면 나오는 문제

<div class="main">
    <div class="a">1</div>
    <div class="a">2</div>
    <div class="a">3</div>
    <div class="a">4</div>
</div>

div{
    border: 1px solid #000;
    box-sizing: border-box;
}
.main{
    width: 300px;   height: 100px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(4,1fr);
    background-color: yellowgreen;
    grid-template-areas: 
    "a a b"
    "d d b"
    "- - c"
    ;
}
.a{
    background-color: aquamarine;
}
.a:nth-child(1){
    grid-area: a;
}
.a:nth-child(2){
    grid-area: b;
}
.a:nth-child(3){
    grid-area: c;
}
.a:nth-child(4){
    grid-area: d;
}

■ align-items,self / justify-items,slef

○ align-items,self / justify-items,slef

- align-items : grid container 에서 행트랙의 높이 기준으로 grid item 배치

- justify-items : grid container 에서 행트랙의 너비 기준으로 그리드 grid item 배치

- align-self : grid item 에서 행트랙의 높이 기준으로 개별 배치

- justify-self : grid item 에서 행트랙의 너비 기준으로 개별 배치

- 속성 값 : flex-end, flex-start, center 등

○ 코드

<div class="main">
    <div class="a">1</div>
    <div class="a">2</div>
    <div class="a">3</div>
    <div class="a">4</div>
</div>

div{
    border: 1px solid #000;
    box-sizing: border-box;
}
.main{
    width: 300px;   height: 100px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
    background-color: yellowgreen;
    align-items: center;

}
.a{
    background-color: aquamarine;
}
.a:nth-child(2){
    align-self: flex-end;
}

■ align-content, justify-content

○ align-content, justify-content

- align-content : 열방향에 container에 여유공간이 있을때 사용할 수 있다.

- justify-content : 행방향에 container에 여유공간이 있을때 사용할 수 있다.

- 속성으로 : flex-end, flex-start, center, space-around, space-bertween, space-evenly

○ 코드

div{
    border: 1px solid #000;
    box-sizing: border-box;
}
.main{
    width: 300px;   height: 100px;
    display: grid;
    grid-template-columns: repeat(2,40px);
    grid-template-rows: repeat(2,30px);
    background-color: yellowgreen;
    justify-content: space-between;
    align-content: center;

}
.a{
    background-color: aquamarine;
}

■ 8월 20일 - 4일차

자동 이미지 사이트 : lorem picsum

https://picsum.photos/id/237/200/300

id를 변경하면 다른 이미지가 나옴
뒤에는 너비와 높이 변경

https://picsum.photos/200/300

랜덤한 이미지 나옴

■ img 태그

○ img 태그

- 자체 닫는 태그로 끝에 별도의 닫는 태그가 필요하지 않는다.

- 기본 display = inline-block 임

○ 주요 속성

- src(source) : 이미지의 url을 지정

* 절대 url : https://www.abc.com/image.jpg

* 상대 url : img/image.jpg (현재 페이지에서 img폴더내 jpg파일 참조)

- alt(alternative text)

* 이미지가 표시되지 않을때 사용자에게 보여질 텍스트

* 검색 엔진 최적화에 도움이 됨, 검색 엔진은 이미지 자체를 읽을 수 없지만 alt텍스트로 내용을 이해함

- width와 height

* 이미지 크기를 픽셀 단위로 정의함

* 이미지를 로드하기 전에 이미지의 공간을 예약함, 레이아웃이 안정적 유지

* 크기 지정없이 큰 이미지를 로드 할 경우 레이아웃 변형될 수 있음

<div class="main">
    <img src="https://picsum.photos/id/2/100/100">
    <img src="https://picsum.photos/id/2/100/100" width="50px" height="100px">
</div>

<div class="main">
    <img src="https://picsum.photos/id/2/100/100">
</div>

.main{
    width: 50px; height: 50px;
    border: 2px solid #000;

}
img{
    opacity: 0.5;
    border: 3px solid red;
}

■ 이미지 중앙정렬 방식

○ inline-block 일때 정렬

.main{
    border: 1px solid #000;
    width: 150px; height: 150px;
    align-content: center;
    text-align: center;
}
.main > img{
   
}

○ block 요소로 변경 하여 정렬

.main{
    border: 1px solid #000;
    width: 150px; height: 150px;
    align-content: center;
    

}
.main > img{
   display: block;
   margin: 0 auto;
}

○ flex 요소로 변경 하여 정렬

.main{
    border: 1px solid #000;
    width: 150px; height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main > img{
   
}

○ 이미지와 글자 관리

<div class="main">
    <div class="box">
        <img src="img/연습.png" width="100px" height="100px">
        <p>이미지</p>
    </div> 
    <div class="box">
        <img src="img/연습.png" width="100px" height="100px">
        <p>이미지</p>
    </div> 
    <div class="box">
        <img src="img/연습.png" width="100px" height="100px">
        <p>이미지</p>
    </div> 

</div>

.main{
    display: flex;
    height: 500px;
    gap: 20px;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
}
.box{
    width: 100px; height: 130px;
    
}
.box > img{
   
}
.box > p{
    text-align: center;
    margin: 0 4px;
}

■ object-fit

○ object-fit

- 이미지가 본래 가지고 있는 형태가 비율이 변경되면 왜곡되어 보이는 문제가 발생

- fill : 기본값 요소의 크기를 늘리거나 줄여서 컨테이너를 체움

- cover : 콘텐츠의 비율을 유지하면서 컨테이너 전체를 채움 이미지가 잘림

- contain : 콘텐츠의 비율을 유지하면서 컨테이너 맞춰 조절

- none : 콘텐츠의 크기변경 안되고 원본 크기 유지하면서 나옴

<div class="main">
    <img class="a1" src="img/연습.png" width="100" height="100" alt="">
    <img class="a2" src="img/연습.png" width="100" height="100" alt="">
    <img class="a3" src="img/연습.png" width="100" height="100" alt="">
    <img class="a4" src="img/연습.png" width="100" height="100" alt="">
</div>

.main{
    border: 1px solid #000;
}

.a1{
    width: 50px; height: 100px;
    object-fit: fill;
}
.a2{
    width: 50px; height: 100px;
    object-fit: cover;
}
.a3{
    width: 50px; height: 100px;
    object-fit: contain;
}
.a4{
    width: 50px; height: 100px;
    object-fit: none;
}

■ object-position

○ object-position

- CSS에서 이미지, 비디오 등 대체 콘텐츠(replaced elements)의 위치를 조절하는 데 사용

이 속성은 object-fit 속성과 함께 사용되어 컨테이너 내에서 콘텐츠가 어떻게 배치될지 제어

- 키워드: center, top, bottom, left, right, 그리고 이들의 조합 예: top left, bottom right 등

- 백분율: 예를 들어 50% 75%는 콘텐츠의 가로 중심과 세로의 75% 지점에 콘텐츠의 중심을 맞추는 것을 의미

- 길이 값: 픽셀(px)이나 em 같은 길이 단위를 사용하여 정확한 위치를 지정

<div class="main">
    <img class="a1" src="img/연습.png" width="100" height="100" alt="">
    <img class="a2" src="img/연습.png" width="100" height="100" alt="">
    <img class="a3" src="img/연습.png" width="100" height="100" alt="">
    <img class="a4" src="img/연습.png" width="100" height="100" alt="">
</div>

.main{
    border: 1px solid #000;
}
.main > img{
    width: 50px; height: 100px;
    object-fit: cover;
}
.a2{
    object-position: center;
}
.a3{
    object-position: right;    
}
.a4{
    object-position: left;
}

■ background-image

○ background

- 콘텐츠의 배경을 정의한다.

- 단축속성으로 색상이미지 반복등 정의 할 수 있다.

하위속성	역할
background-image	배경 이미지를 정의
background-position	배경 이미지의 초기 위치 정의
background-size	배경 이미지의 크기를 정의
background-repeat	배경 이미지의 반복방법을 정의

○ background-image

- 기본적으로 배경이미지가 콘텐츠보다 작으면 배경이미지에 대해서 반복적으로 실행됨

○ background-repeat

- repeat: 이미지를 수평과 수직으로 반복 기본값

- repeat-x: 이미지를 수평으로만 반복

- repeat-y: 이미지를 수직으로만 반복

- no-repeat: 이미지를 반복하지 않음

- space: 이미지를 반복하되, 이미지 사이에 공간을 똑같이 두어 전체 요소를 균일하게

- round: 이미지를 반복하며, 필요한 경우 이미지의 크기를 조정해서 요소의 공간을 정확히 맞춤

○ background-size

- 길이 값 지정: 픽셀(px) 또는 백분율(%) 등의 길이 단위를 사용하여 배경 이미지의 크기를 직접 지정

- cover는 이미지가 요소의 전체 공간을 덮도록 확장되며,

이미지의 가로 세로 비율을 유지하면서 요소의 더 작은 면을 기준으로 크기가 조정

- contain은 이미지가 요소의 경계 내에서 완전히 보이도록 확장되며,

이미지의 가로 세로 비율을 유지하면서 요소의 더 큰 면을 기준으로 크기가 조정

○ background-position

- 배경이미지의 위치를 설정하는 데 사용됨 이 속성을 통해 배경 이미지가 요소내에서 어디에 위치할지 지정

- 기본값은 0% 0% 또는 top left

- 키워드 사용: top, bottom, left, right, center와 같은 키워드를 사용하여 이미지 위치를 설정

- 길이 단위 사용: 픽셀(px), 백분율(%) 등의 단위를 사용하여 정확한 위치를 지정

- 조합 사용: 키워드와 길이 단위를 조합하여 더 세밀하게 위치를 지정

- 예시 right 20px top 10px : 오른쪽에서 20px 왼쪽, 상단에서 10px 아래쪽

○ 코드

<div class="main">
    안녕
</div>

.main{
    width: 100px; height: 100px;
    border: 1px solid #000;
    background-image: url("img/연습.png");
    background-repeat: no-repeat;
    background-size: 30px 50px;
    background-position: 50% 10px;
    align-content: end;
    text-align: center;
}

■ Animation

■ 8월 22일 - 5일차

■ 메뉴바 만들기

<style>
    *{
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    header{
        height: 80px;
        background-color: black;
        color: #fff;
        display: flex;
        align-items: center;
    }
    .log{
        width: 20%;
        text-align: center;
        font-size: 2.5rem;
    }
    .box{
        width: 30%;
    }
    nav{
        width: 50%;
        display: flex;
        justify-content: space-around;
    }
    nav > div{
        width: 20%;
        height: 40px;
        font-size: 1.2rem;
        align-content: center;
        text-align: center;
        border: 1px solid #d4d4d4;
        border-radius: 10px; 
    }
    nav > div:hover{
        background-color: #fff;
        color: black;
        cursor: pointer;
    }
    
</style>

<body>
    <header>
        <div class="log">HomePage</div>
        <div class="box"></div>
        <nav>
            <div class="menu1">Home</div>
            <div class="menu2">Store</div>
            <div class="menu3">About</div>
            <div class="menu4">Blog</div>
        </nav>
    </header>
    
</body>

■ 반응형으로 변경하기

○ 1024px일때 Home박스 옆으로 이동

    @media(max-width: 1024px){
        .log{
            width: 40%;
        }
        .box{
            width: 0%;
        }
        nav{
            width: 60%;
        }
    }

○ 768px일때 nav 크기변경

    @media(max-width: 768px){
        nav > div{
            font-size: 1rem;
            height: 30px;
        }
    }

○ 480px일때 nav 없어지고 LOGO 크기 80% Menu 나오고 메뉴 hover시 nav 나오게

<style>
    *{
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    header{
        height: 80px;
        background-color: black;
        color: #fff;
        display: flex;
        align-items: center;
    }
    .log{
        width: 20%;
        text-align: center;
        font-size: 2.5rem;
    }
    .box{
        width: 30%;
    }
    nav{
        width: 50%;
        display: flex;
        justify-content: space-around;
    }
    nav > div{
        width: 20%;
        height: 40px;
        font-size: 1.2rem;
        align-content: center;
        text-align: center;
        border: 1px solid #d4d4d4;
        border-radius: 10px; 
    }
    .menu{
        display: none;

    }
    nav > div:hover{
        background-color: #fff;
        color: black;
        cursor: pointer;
        
    }
    @media(max-width: 1024px){
        .log{
            width: 40%;
        }
        .box{
            width: 0%;
        }
        nav{
            width: 60%;
        }
    }
    @media(max-width: 768px){
        nav > div{
            font-size: 1rem;
            height: 30px;
        }
    }
    @media(max-width:480px){
        header{
            position: relative;
        }
        .log{
            width: 80%;
        }
        .menu{ 
            display: block;
            border: 1px solid #fff;
            font-size: 1.2rem;
            width: 100px;
            height: 40px;
            align-content: center;
            text-align: center;
            position: absolute;
            right: 0px;
            bottom: 0px;
        }
        nav{
            display: none;
            width: 100px;
            position: absolute;
            right: 2px;
            top: 100%;
            background-color: #000;
        }
        nav > div{
            width: 100px;
            font-size: 1.2rem;
            height: 40px;
            border-radius: 0;
        }
        .menu:hover +nav, nav:hover{
            display: block;
        }
        
    }
</style>

<body>
    <header>
        <div class="log">HomePage</div>
        <div class="box"></div>
        <div class="menu">Menu</div>
        <nav>
            <div class="menu1">Home</div>
            <div class="menu2">Store</div>
            <div class="menu3">About</div>
            <div class="menu4">Blog</div>
        </nav>
    </header>
    
</body>

■ 8월 27일 - 6일차

■ 피그마 설치

○ 피그마 사이트

○ 피그마 로그인(구글과 연계)

○ 피그마 다운로드

■ 피그마 실행 / 주요 툴

○ 새 파일 만들기

- 단축키 Ctrl + N

- 위 메뉴에서 Design file 누르기

○ 이름변경

- 위의 이름을 클릭하면 이름을 변경할 수 있다.

○ 확대 축소

- Ctrl + 마우스 휠

- +, - 키

- Ctrl + 0 : 100% 크기

- 크기 수치조정

○ 이동과 크기

- Move : 단축키 V : 이동을할 수 있는 툴

- Scale : 단축키 K : 오브젝트의 크기를 변경하는 툴

○ Frame, Section, Slice

- Section : 아트보드를 전체 관리하는 부분 단축키 Shift + S

- Frame : 아트보드 영역, 하나의 화면을 의미 단축키 A

- Slice : 원하는 영역을 내보낼 수 있는 영역 단축키 S

○ Shape

- 기본 도형툴 사각형 R, 원형 O, 선 L

○ Pen, Pencil

- Pen : 단축키 P 곡선과 직선을 벡터로 그릴 수 있다.

- Pencil : 단축키 Shift + P

- 도형을 더블클릭하여 벡터 편집을 시작할수 있다.

○ Text 툴

- 단축키 : T

- 클릭 드래그 하면 텍스트 박스가 생김

- Ctrl + Enter, Esc 종료

○ Hand 툴

- 단축키 : space

- 화면을 이동

○ Comment

- 댓글기능 단축키 C

○ Layers, Disign, proto type panel 등

○ Preference 설정

- 숫자키를 투명도로 설정하기 위해서는 umber key for opacity를 체크 해야함

- 체크 해제시 0 : 화면 100%, 1: 화면구성 100%, 2: 선택 100%

- 체크 불투명도 넣어줌 숫자를 두개를 눌러주면 5와8 58%로 변경됨

숫자 1개는 3 == 30%

○ Ctrl, Alt

- Ctrl : 오브젝트 선택

- Alt : 간격 확인

○ 오브젝트 내에서

- Ctrl : radius 1개씩 변경, 다중변경 변화

- Alt : 중앙점 고정 크기 변경

- Shift : 배율 고정

○ pen에서

- Ctrl : 선택, 선위에서는 곡선으로 변경, 포인터 위에서는 각도 변경

- Alt : 한쪽 각 변경, 포인트 빼기

○ Shift + space

- prototype 화면으로 보기

■ 피그마기초

○ 특징

- 클라우드 기반으로 컴퓨터에 저장할 필요 없음

- 윈도우 맥 OS 제약을 받지 않는다.

- 팀원과 실시간 협업이 가능

- 커뮤니티에서 다양한 에셋 과 플러그인을 제공

- 기획 프로토타이핑 개발까지 최적의 툴임

○ 인터페이스

- 툴바

- 레이어 패널

- 캔버스

- 계정, 공유, 프로토 타입

- 속성 패널

○ 주요 단축키

- Ctrl + G : 그룹

- Ctrl + Alt + G : 프레임으로 그룹

- Ctrl + Shift + G : 그룹해제

- Alt 드래그 : 복제

- Ctrl + [, ] : 순서

- Ctrl + Shift + [, ] : 한번에 순서 이동

- Ctrl + D : 반복작업

○ 많이 사용하는 plugin

- Unsplash : 이미지 사용 사이트

- Pixabay : 이미지 사용

○ 레이어, 프레임, 섹션

- Section : 화면을 담는 단위로 프레임과 화면 요소들을 담을수 있다.

- Frame : 화면요소와 화면을 담는 컨테이너 그룹 (속성변경시 콘텐츠에 영향없음)

- Group : 화면을 묶는 단위로 컨테이너 역할을 하지 않는다.

○ 도형크기 조절

○ 모양(불투명도, 코너)

○ 색

■ Text

○ 글자 작성

- 클릭시 글자의 너비와 높이를 받아서 만들어짐

- 드래그시 글자박스를 기준으로 만들어져 정렬됨

○ 글자 Layout 크기

- Auto Width : 너비 자동맞춤 Enter가 없으면 1줄 높이

- Auto Hright : 높이 자동맞춤 Layout의 너비가 크면 1줄 나오고 Enter있으면 그에 맞는줄

너비가 작으면 글자가 넘어가며 높이를 맞춰준다.

- Fixed Size : 크기에 맞춰 글자가 나오고 너비가 줄어들면

밑으로 내려온다. 높이가 작으면 넘어감

○ 글자 Layer Align

○ 말줄임표 Truncate text

■ Image

○ 이미지 속성

- Fill : 체우기 크기변경에 따라 중앙을 기준으로 채운다

- Fit : 높이 너비중 작은쪽에 맞춰서 나온다.

- Crop : 자르기 하고 크기변경시 깨진다.

이미지 크기조절시 Ctrl 누르면 자르기로 자동변환

- Tile : 빈공간에 반복적으로 나온다.

■ Position

○ X : Y 축

부모의 frame에 위치를 지정한다. 고정은 기본 Constraints에서 설정하고

고정시켜주면 frame의 크기 변화에 따라 맞춰서 크기 조절됨

■ Auto Layout

○ Auto Layout

오토 레이아웃을 사용하면 반응형 작업 시 레이아웃을 편하게 조정할 수 있으며,

반복되는 콘텐츠 작업 시에도 손쉽게 수정할 수 있다.

○ Gap

내부의 간격으로 Auto 입력시

외부 박스의 크기변경에 따라서 Gap 값이 변화된다.

○ Width, height

너비 높이를 수치값으로 줄수 있다.

Fixed는 크기를 직접 줄수 있고

Hug는 내부 컨텐츠의 크기에 맞춰서 크기 조절을 해준다.

Padding값을 수치로 줄수 있고

Clip content는 부모요소를 빠져나오면 투명하게 해준다.

○ Align

○ Layout 배치

○ Gap, Padding, Align, Hug

○ Gap과 크기조절

Gap이 Auto 일때는 크기 조절시 Gap이 변경

아닐때는 왼쪽 기준일때는 왼쪽 기준으로 변경

○ 내부 Contents 에서의 Fixed, Fill

내부 컨텐츠에서 Fixed는 부모 크기 조절시 내부 크기가 고정되어 있음

Fill로 넣으면 부모크기에 맞춰서 크기 조절

Fill로 넣어도 Min - Max를 지정시 Fixed 효과도 같이 같고 있음

○ Fill에서의 Min Max

Min 속성과 Max 속성을 모두 줄수 있다.

■ 8월 29일 - 7일차

■ 피그마 Local file로 변경

- xxx.fig 파일로 로컬형태로 저장 가능

■ 피그마 협업 및 Icon

○ 많이 사용하는 Plug in

○ 피그마 협업

- Team project : 1개의 팀 프로젝트에 4개의 Design 파일을 제작 가능

그 이상은 유료

- Share를 눌러서 공유할 수 있으며

이메일을 통해 Invite 초대할 수 있다.

Can view, Can edit으로 사용가능함

○ 아이콘 및 플러그인 추가

Community profile을 활용 검색하여 Icon 및 기타 플러그인 추가 가능

Preview 를 활용하여 문제 없이 제공하는지 확인 필요

■ 피그마 컴포넌트

디자인에서 반복적으로 사용되는 요소를 한 번만 정의해두고,

다양한 곳에서 재사용할 수 있는 기능

컴포넌트를 사용하면 디자인의 일관성을 유지하고, 변경 사항을 쉽게 적용

○ Component (Master, Instance)

- Master : 컴포넌트의 원본이 되는 요소

- Instance : 원본 컴포넌트로 복제한 요소

- Master 컴포넌트를 변경하면 Instance를 같이 변경가능

- 변경된 Instance는 Master가 변경되도 변경안됨.

- 변경된 Instance의 속성을 제외하고는 변동됨

- 등록한 Component는 Asset에서

Local assets에서 Instance로 가져올수 있음

- Instance의 속성을 Master와 맞추려면

마우스 오른쪽 눌러서 Reset All Changes 클릭

- Instance 의 Component 해제로 일반 요소로 사용하던지

새로운 Master Component로 제작시

오른쪽 마우스 메뉴에서 Detach instance 사용

- Master component 이동 및

Instance로 변경한 요소로 Master component 변경

- Component는 제작후 해제 할 수 없지만

Instance를 만들어서 Instance를 Master와 연결을 끊어

일반 프레임으로 만드는 방법은 있음

○ Component 활용 버튼 만들기

- 1개의 Master를 수정하면 모든 Instence를 변경할 수 있다.

- Button 형태를 만들때는 버튼을 Auto Layout 으로 작성하는 것이 좋다.

○ 여러개의 Component를 한번에 등록하기

- 여러개를 선택한 상태에서 Multiple Components

○ Instance Swap

- 인스턴스 컴포넌트에서 다른 컴포넌트를 변경하기 위해서는

이름을 눌러주면 Swap Instance나와서 컴포넌트를

눌러주면 변경되며

다른쪽 컴포넌트를 사용하기 위해서는

Local Components를 눌러 주면됨

○ Component와 한글더미 사용하기

- 한글더미를 사용하면 일일이 텍스트를 입력할 필요없이

글자들을 만들어 준다. 디자인을 위해 글자 배치시 많이 사용됨

plugin에서 추가해서 사용하면 됨

■ 피그마 컴포넌트의 프로퍼티

컴포넌트를 여러개를 작성하여 쉽게 변경시킬 수 있는

여러가지 속성

○ Varient

- 여러 상태에 대한 변화되는 요소를 만들어

빠르게 어떠한 상태로 인스턴스 요소를 변경한다.

- 컴포넌트를 누르고 프로퍼티를 누르면 메뉴가 뜨고

Variant를 누르면 배리언트를 추가시키는 매뉴가 뜬다.

- 추가를 하고 요소의 속성을 변경한 후

우측에서 이름을 지정 해 줄 수 있다.

- 새로운 인스턴스를 만든 후 인스턴스에서 프로퍼티를

선택해 주면 적용할 수 있다.

- 여러가지 유형을 만들어서 한번에 만드는 방법

먼저 여러가지 유형의 프레임을 만들고

둘다 선택후 Create component set 이용

- 크기 변경 및 여러가지 형태 만들기

○ Boolean

- 참과 거짓으로 두가지 형태만 가지고 있음

맞고 아님만을 뜻함 (있고 없음)

컴포넌트를 선택한 후 블린을 넣으면 이름과 현재를 어떤 값으로 지정할지 선택

- 메인 컴포넌트에서 사라지게 할 요소를 선택한 후 모양에서 블린의 이름을 클릭

- 인스턴스 요소에서 끄고 킬것들을 선택하고 이름이 지정된 블린을 체크 및 체크 해제

○ Instance swap

- 여러 컴포넌트들을 등록해 놓고

새로운 화면을 작성할때 이전에 등록한 하나의 컴포넌트에 대해서

인스턴스화 하여 같이 작성하여 손쉽게 여러 컴포넌트들을 사용

- 여러 컴포넌트 제작

- 새로운 화면 구성 구성시 인스턴스 컴포넌트 작성

- 화면에서 인스턴스 스웹 클릭 이름 입력

- Value값 입력시 기본 컴포넌트 선택

- +눌러서 변경이 쉽게 인스턴스들을 등록

- 메인이 되는 컴포넌트 화면에서

내부 인스턴스 컴포넌트를 선택하고

Apply instance swap property 선택

- 화면구성한 컴포넌트의 인스턴스를 클릭하여

Instance메뉴에서 어떠한 컨포넌트를 사용할지 지정

■ 8월 30일 - 8일차

피그마 복습

■ 9월 3일 - 9일차

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  p{
    margin: 0;
  }
  header{
    padding: 0 8%;
    margin: 0 auto;
    height: 80px;
    background-color: rosybrown;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .menu{
    display: flex;
    width: 30%;
    justify-content: space-between;
    font-size: 1.2vw;
    font-weight: 600;
  }
  .logo{
    font-size: 32px;
  }
  .header-r{
    display: flex;
    width: 30%;
    justify-content: space-between;
  }
  .header-r > p {
    align-content: center;
    font-size: 1.2vw;
    font-weight: 600;
  }
  header .icon-box{
    display: flex;
    width: 50%;
    justify-content: space-around;
  }
  header .icon-box > .icon{
    width: 30px;
    height: 30px;
    border: 1px solid #000;
  }

  .contents > .contents-1{
    display: flex;
  }
  .contents-1 div{
    width: 50%;
    height: 500px;
  }
  .contents-1 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .contents-img1{
    position: relative;
  }
  .contents-img1 > img{
    opacity: 30%;
  }
  .contents-img1 > .text-box {
    position: absolute;
    bottom: 0;
    top: 100px;
    width: 100%;
    padding-left: 20%;
  }
  .contents-img1 > .text-box > .text1{
    font-size: 18px;
    margin-bottom: 10px;
  }
  .contents-img1 > .text-box > .text2{
    font-size: 30px;
    margin-bottom: 50px;
  }
  .contents-img1 > .text-box > .text3{
    font-size: 16px;
    margin-bottom: 20px;
  }
  .contents-img1 > .text-box > .viewmore{
    width: 200px;
    height: 50px;
    background-color: greenyellow;
    text-align: center;
    align-content: center;
  }
  .contents-2 > .contents-box{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .contents-2 > .contents-2-name1{
    text-align: center;
    font-size: 40px;
    margin-top: 60px;
  }
  .contents-2 > .contents-2-name2{
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 80px;
  }
  .contents-box > .box{
    width: 23%;
  }
  .contents-box > .box > .title{
    margin-top: 10px;
    font-size: 18px;
    font-weight: 600;
  }
  .contents-box > .box > .text1{
    margin-top: 5px;
  }
  .contents-box > .box > .text2{
    margin-top: 5px;
    font-size: 18px;
  }
  .box > img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 5%;
  }

  @media(max-width:1480px){

    header .icon-box > .icon{
      width: 25px;
      height: 25px;
    }
    header{
      padding: 0 2%;
    }
  }

</style>
<body>
  <header>
    <div class="menu">
      <p>브랜드 소개</p>
      <p>웹스토어</p>
      <p>포인트샵</p>
      <p>소식</p>
      <p>고객후기</p>
    </div>
    <div class="logo">
      <p>think very much</p>
    </div>
    <div class="header-r">
      <p>브랜드 박스</p>
      <p>고객센터</p>
      <div class="icon-box">
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
      </div>
    </div>
  </header>

  <div class="contents">
    <div class="contents-1">
      <div class="contents-img1">
        <img src="img/content-1-l.jpg" alt="">
        <div class="text-box">
          <p class="text1">THINK VERY MUCH</p>
          <p class="text2">후기만 작성해도<br>혜택이 한가득</p>
          <p class="text3">의견을 남겨주시면 현금처럼 사용가능한 포인트가 지급됩니다.</p>
          <div class="viewmore">VIEW MORE</div>
        </div>
      </div>
      <div class="contents-img2">
        <img src="img/content-1-r.jpg" alt="">
      </div>
    </div>

    <div class="contents-2">
      <p class="contents-2-name1">Best Product</p>
      <p class="contents-2-name2">베스트 상품을 지금 바로 만나보세요</p>
      <div class="contents-box">
        <div class="box">
          <img src="img/img1.jpg" alt="">
          <p class="title">[두손드림] 두손푸드 단팥죽</p>
          <p class="text1">기본 텍스트 부제목</p>
          <p class="text2">12,200원</p>
        </div>
        <div class="box">
          <img src="img/img1.jpg" alt="">
          <p class="title">[두손드림] 두손푸드 단팥죽</p>
          <p class="text1">기본 텍스트 부제목</p>
          <p class="text2">12,200원</p>
        </div>
        <div class="box">
          <img src="img/img1.jpg" alt="">
          <p class="title">[두손드림] 두손푸드 단팥죽</p>
          <p class="text1">기본 텍스트 부제목</p>
          <p class="text2">12,200원</p>
        </div>
        <div class="box">
          <img src="img/img1.jpg" alt="">
          <p class="title">[두손드림] 두손푸드 단팥죽</p>
          <p class="text1">기본 텍스트 부제목</p>
          <p class="text2">12,200원</p>
        </div>
      </div>
      <div class="contents-box">
        <div class="box">
          <img src="img/img1.jpg" alt="">
          <p class="title">[두손드림] 두손푸드 단팥죽</p>
          <p class="text1">기본 텍스트 부제목</p>
          <p class="text2">12,200원</p>
        </div>
        <div class="box">
          <img src="img/img1.jpg" alt="">
          <p class="title">[두손드림] 두손푸드 단팥죽</p>
          <p class="text1">기본 텍스트 부제목</p>
          <p class="text2">12,200원</p>
        </div>
        <div class="box">
          <img src="img/img1.jpg" alt="">
          <p class="title">[두손드림] 두손푸드 단팥죽</p>
          <p class="text1">기본 텍스트 부제목</p>
          <p class="text2">12,200원</p>
        </div>
        <div class="box">
          <img src="img/img1.jpg" alt="">
          <p class="title">[두손드림] 두손푸드 단팥죽</p>
          <p class="text1">기본 텍스트 부제목</p>
          <p class="text2">12,200원</p>
        </div>
      </div>
      <div class="contents-box">
        <div class="box">
          <img src="img/img1.jpg" alt="">
          <p class="title">[두손드림] 두손푸드 단팥죽</p>
          <p class="text1">기본 텍스트 부제목</p>
          <p class="text2">12,200원</p>
        </div>
        <div class="box">
          <img src="img/img1.jpg" alt="">
          <p class="title">[두손드림] 두손푸드 단팥죽</p>
          <p class="text1">기본 텍스트 부제목</p>
          <p class="text2">12,200원</p>
        </div>
        <div class="box">
          <img src="img/img1.jpg" alt="">
          <p class="title">[두손드림] 두손푸드 단팥죽</p>
          <p class="text1">기본 텍스트 부제목</p>
          <p class="text2">12,200원</p>
        </div>
        <div class="box">
          <img src="img/img1.jpg" alt="">
          <p class="title">[두손드림] 두손푸드 단팥죽</p>
          <p class="text1">기본 텍스트 부제목</p>
          <p class="text2">12,200원</p>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

■ 9월 5일 - 10일차

다운로드 링크

'Web 수업자료 > Web 정규' 카테고리의 다른 글

웹디자인 기능사 (0)	2024.10.15
Web 4 24-09 (1)	2024.09.10

현재글Web 3 24-08

Today :
Yesterday :

« 2024/10 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31