5일차 개발자 공부

• 보일러 플레이트 
• 반복되는 작업 환경을 구성
• 데스크톱 , 모바일 사이즈 반응형 , 적응형 
• css 정렬 flex
• css 위치 
• 숙제(실습)

보일러 플레이트란?

모든 코드를 작성하기 위해 항상 필요한 부분 Import : 필요한 코드를 불러들이는 부분Commponent : 현 페이지를 구현하는 코드StyleSheet : 페이지의 객체를 꾸미기 위한 styleExport : 현 javaScript 코드를 타 javaScript에서 접근하기 위한 부분

 

 

반복되는 작업 환경을 구성

 

index의 이름으로 html 파일의 이름을 정의하는것 또한 작업하는 환경에서 index파일을 우선적으로 찾는다.

 

데스크톱 , 모바일 사이즈 반응형 , 적응형 

 

-반응형 : pc 사이즈에서 모바일 사이즈 혹은 텝 사이즈로 변환될 때 화면 사이즈에 비례해서 페이지의 내용이 맞게 변화한다.

 

-적응형 : pc 사이즈와 모바일 사이즈로 변화하는 것이 아니고 접속한 디바이스를 판단해서 요청 url이 달라질수 있다

 

-public : 정적인 파일을 이미지나 index.html파일을 관리하는 폴더 정적인 파일들 많이 변경이 일어나지 않는 파일을 관리하는 폴더 

 

모바일 사이즈는 데스크톱과 레이아웃 자체가 다르다 

 

css 정렬 flex 란 ? 

유연하게 속성들을 배치하여 레이아웃을 잡는 아주 유용한 기능이다 

- flex 종류 

1. flex-direction 

row : 왼쪽에서 오른쪽을 향하게 된다.

column : 위에서 아래로 향하게 된다. 

2. justify-content

space-between : 화면과 딱 맞도록 

space-around : 각각 박스 영역이 존재함 

space-evenly : 똑같은 간격을 가짐

center : 중앙 정렬 

flex-end : 끝정렬 

3.align items - 반대축에서 어떻게 정렬할 것인지 정렬해주는 속성이다. 

 

실습 

/* 테블릿 사이즈 이상으로 넘어가면 데스크톱의 레이아웃 */

@media only screen and (min-width : 992px) {

    #wrap {

        width: 100%;

        min-height: 100vh;

        background-color: blueviolet;

    }

}

/* 모바일 기준기본 스타일 */

/* 모바일 사이즈일 떄 */

/* 스타일 시트 작성할떄 TIP */

/* 최소 3뎁스 까지 사용하는게 좋다 가독성 이슈 */

*{

    margin: 0px;

    padding: 0px;

}

#wrap {

    width: 100%;

    min-height: 100vh;

}

#wrap .gnb {

    height:  60px;

    background-color: #444;

    display: flex; /* 태그의 내용을 나열할 때 정렬을 정의할 떄 사용한다. 요소의 display와 상관 없이 요소의 정렬의 정의한다. */

    /* flex를 사용할 때 사용할 수 있는 속성.  */

    /* align-items : 좌우의 정렬을 관리할때 row 기준 */

    /* justify-content : 좌우 정렬을 관리할 떄 row 기준 culumn 기준은 상하가 바뀐다.  */

    align-items: center;

    justify-content: space-between;

}

#wrap .logo {

    color: white;

    line-height: 32px; /* text의 높이 정의 font-size에 맞게 지정해서 스타일 작업을 하는것이 일반적 */

}

#wrap .gnb .gnb-button{

    display: block;

    width: 60px;

    height: 60px;

    position: relative /* 본인의 위치를 기준으로 위치를 정의한다. */;

    cursor: pointer; /* 마우스를 요소의 위로 올렸을떄 */

   

}

#wrap .gnb .user-icon {

    width: 60px;

    height: 60px;

    border: 1px solid;

    position: relative;

}

.gnb .user-icon span:nth-child(1) {

   position: absolute;

   top: 18px;

   left: 50%;

   transform: translateX(-50%);

   display: block;

   border: 5px solid white;

   border-radius: 5px;

}

.gnb .user-icon span:nth-child(2) {

    position: absolute;

    top: 28px;

    left: 50%;

    transform: translateX(-50%);

    display: block;

    border: 8px solid white;

    border-radius: 4px 4px 0 0; /* 4방면을 적용하는 스타일들은 띄어쓰기로 구분해서 정리할수 있다.*/

}

 .gnb .gnb-button span {

    width: 20px;

    height: 4px;

    display: inline-block;

    position: absolute; /* 부모 요소중에 relative를 가지고 있는 요소를 기준으로 */

    background-color: white;

    top: 50%;

    left: 50%;

    transform: translate(-50% , -50%); /* 본인 요소 기준으로 x축과 y축을 본인의 크기의 반지름 만큼 이동 */

    border-radius: 1px; /* 테두리를 얼마나 깎을지 테두리를 둥글게 적용할떄 높이의 px 수치를 주면 원으로 깎을수 있다.*/

}

 /*

 nth-child() 선택자: 자식의 순서를 괄호안에 작성해서 자신을 선택할 수 있다.

 1부터 자식의 순서

    top 속성을 줬는데 bottom을 주면 bottom 속성은 정의 되지 않는다.

    left , right 속성도 마찬가지

  */

  .gnb .gnb-button span:nth-child(2) {

    top: 24px;

}

  .gnb  .gnb-button  span:nth-child(3) {

    top: initial; /* 초기화 */

    bottom: 20px;

}

#wrap > .notification {

    width: calc(100% - 20px); /* calc는 css의 값을 계산해서 값을 반환해준다. */

    height: 50px;

    display: flex;

    align-items: center;

    border-bottom: 1.4px solid #333;

    padding: 0 10px;

   

}

#wrap > .notification > i {

    border: 4px solid rgb(174, 174 , 242);

    border-radius: 50%;

    margin-right: 10px;

}

#wrap > .title {

    width: calc(100% - 20px);

    padding: 0 10px;

    height: 65px;

    border-bottom: 1.4px solid #333;

    font-size: 20px;

    font-weight: bold;

    display: flex;

    align-items:  center;

}

#wrap > .content ul {

    list-style-type: none;

    display: flex;

    align-items: center;

    width: calc(100% - 50px);

    height: 45px;

    padding: 0 25px;

    border-bottom: 1.4px solid #333;

    box-shadow: 0px 2px 9px -4px;

}

.content ul li {

    font-weight: bold;

    margin-right: 20px;

    font-size: 20px;

}

#wrap > .card-wrap {

    background-color: #e5e4e4;

    padding: 20px 10px;

    min-height: calc(100vh - 263px) ;

}

#wrap > .card-wrap > .card {

    width: 100%;

    height: max-content; /* 부모 요소가 자식 요소의 내용의 크기만큼을 본인의 크기로 지정 */

    background-color: white;

    border-radius: 10px;

    overflow: hidden; /* 부모 요소 영역 밖으로 자식이 벗어나면서 벗어난 영역을 지워준다*/

   

}

.card-wrap > .card > img {

    width: 100%;

}

.card > .card-content > h3 {

    padding: 14px 10px;

    font-size: 20px;

    font-weight: bold;

    border-bottom: 1px solid;

}

.card > .card-content > .views {

        display: flex;

        justify-content: space-between;

        padding: 14px 10px;

}

 

/* 모바일 사이즈 이상으로 넘어가면 */

@media only screen and (min-width : 768px) {

    #wrap {

        width: 100%;

        min-height: 100vh;

        background-color: red;

    }

}

/*  모바일 기준 스타일 */

/* 데스크톱 사이즈 이상으로 넘어가면 */

@media only screen and (min-width : 1200px){

    /* #warp 아이디로 페이지의 전체의 영역을 묶어줬다고 가정하고 */

    #wrap {

        width: 1200px;

        /*height: 100%px*/

        /* vw , vh */

        /*

            vw : 현재 브라우저의 너비 100vw는 100% 비율로 보면 된다.

            vh : 브라우저의 높이 100vh 또한 100% 비율

            너비를 , 높이 등을 퍼센트로 주면 자식태그는 부모태그의 너비나 높이 만큼만 크기가 지정될수 있는데

        */

        min-height: 100vh; /*최소 높이 내용의 높이가 커지면 커지고 내용물이 없어도 기본 최소 높이가 정의 된다.*/

        margin: 0 auto;

        background-color: blue;

   }

}

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

    <!-- 읽는순서대로 css link 넣어주기 -->

    <link rel="stylesheet" href="./style/moblie.css">

    <link rel="stylesheet" href="./style/tap.css">

    <link rel="stylesheet" href="./style/destop.css">

</head>

<body>

   <div id="wrap">

       <div class="gnb">

        <div class="gnb-button">

            <span ></span>

            <span></span>

            <span></span>

        </div>

        <h1 class="logo">DBCUT</h1>

        <span class="user-icon">

            <span></span>

            <span></span>

        </span>

        </div>

        <div class="notification">

        <i></i>

        <!-- 아이콘 사용할때 사용하는 태그 -->

    오픈/리뉴얼 등록 권한을 모든 회원께 드립니다

        </div>

    <div class="title">

        오픈/리뉴얼

    </div>

    <div class="content">

    </div>

 

    <!-- 숙련되면 사용 html 영역에 클래스 표현식 또는 아이디 표현식 작성해서 자동 완성 예) .card-wrap 자동완성 ㄱㄱ-->

    <!-- 자동완성이 활성화되는 단축키 컨트롤 + 스페ㅣ스바  -->

    <div class="card-wrap">

        <div class="card">

            <img src="https://dbcut.com/data/file/websites/thumb-11063371e0db19695b28f02e5be512d3_Kls54wVt_89a64c8e1962bd2ee09e8bd300662ec54d12fa28_320x174.png" alt="사진">

            <div class="card-content">

                <h3>더블란츠 한강</h3>

                <div class="views">

                    <span>69</span>

                    <span>69 69</span>

                </div>

            </div>

        </div>

        </div>

    </div>

   </div>

</body>

</html>