April 1~28, 2021 - Front-end(CSS)

#Front-end(CSS)

 

*4월1일~28일

-CSS의 경우 욕심이 생기면 한도 끝도 없다고 생각함. 따라서 나는 디자이너가 아니기에... 깔끔하게 정렬하고 스펙 수정할 수 있는 정도만 기능을 익히는 것에 초점을 맞추었다.

 

1)Selector

-과한 디자인 욕심이 없는 사람에게 가장 중요한 기능!

-p + h1는 p태그 바로 뒤에 오는 h1 찾기,  p > h1과 같이 안에 있는 구조랑은 다름

-'^'  ~으로 시작하는;  '$' ~으로 끝나는; '*' 모든/~을 포함하는;

 

*Basic Selector

-class 단위(중복으로 적용됨; 사용은 '.classname') / 하나에 2개의 클래스명 적용 가능,   class="nn ss"

-id 단위(하나씩만 적용됨; 사용은 '#idname')

-*은 전체

-h1, div, p 등 그룹핑

 

*Attribute-Selector

-세부적으로 선택 가능

 

    <style>

        input[type="text"] {

            background-color: darkgray;

        }

        input[type="number"] {

            background-color: darkblue;

            width: 200px;

        }

        input[size="10"], input[type="url"] {

            border-width: 0;

        }

    </style>

 

 

*Combination selector

-계층구조로 지목하기에 효율적임

 

        /* ul태그 아래에 있는 모든 li 태그 / 자손 선택자라고도 부름 / 아래에 있는 모든 계층 */

        ul li, div > h1 {

            color:green;

        }

        /* ol 태그 바로 밑에 있는 li / 자식 선택자 / 바로 아래 계층만, >로 지목했다고 생각하기 */

        ol > li {

            color:blueviolet;

        }

 

        /* 3번째 자리에 있는 ul li */

        ul li:nth-child(3) {

            color:red;

        }

        /* sub라는 클래스명을 가진 ul태그 */

        /* ul .sub 라는 결합 선택자와 혼동하지 말 것 */

        ul.sub {

            font-size: 50px;

        }

 

*테이블 tag css 처리할때는 tbody, thead, tfoot 조심하기! 자동으로 생성됨!

 

        /* table 사용시에는 tbody를 넣어줘야함 */

        table > tbody > tr > th {

            font-size: 40px;

        }

 

        tr > th {

            color:red;

        }

 

 

*pseudo-selector

-브라우저의 히스토리라는 객체가 방문 내역을 기록.

 

        /* 모든링크 */

        a:link {

            color: red;

            text-decoration: none;

        }

        /* 방문한 사이트 */

        a:visited {

            color: purple;

        }

        /* 마우스 올렸을 때 컬러 */

        a:hover {

            color: cyan;

            text-decoration: underline;

        }

        /* 링크 눌렀을 때 컬러 */

        a:active {

            color:gold;

        }

 

        /* 클래스명으로도 적용 가능 */

        a.c1:hover {

            text-decoration: line-through;

        }

 

        /* em은 2배~ */

        a.c2:active {

            font-size: 2em;

        }

 

 

*nth-selector 구조선택자

-모두 ul로 이어져있으면 first-child, last-child, nth-child(2) 등 무난하게 가져오지만 중간에 ol이 섞이면 아예 못찾음! 1부터시작~

-2n은 수열로 2n의 2의 배수만~  2n+1은 홀수만~  / 여기서 n은 0부터 시작....

 

 

        ul:first-child {

            border: 1px solid red;

        }

        ul:last-child {

            border: 3px dotted green;

        }

 

        /* 아래서부터 게시글 상 격자 음영처리 할때 사용 */

        ul:nth-last-child(2n) {

            

        }

        /* 위에서부터 */

        ul:nth-child(2n) {

            

        }

 

        ul li:nth-child(2n) {

            text-decoration: line-through;

        }

 

        ul li:first-child > a {

            color:red

        }

 

 

*text-selector

-쌍따옴표, 온따옴표 차이 없음

 

       .t1::before {

            content: "이것은 ";

            font-style: italic;

            font-weight: bolder;

        }

        .t2::after {

            content: " 정말 그렇더라구요";

            font-weight: bolder;

        }

 

 

2)border, margin, padding

-padding은 content와 border 사이 공간 / margin은 border와 다른 tag 사이 공간

-margin은 맞닿아있는 2개의 태그 margin값의 합임.

Source : w3schools.com

*border

-dotted, dashed, solid, double, none, hidden 정도 많이 씀... 

-border width px(1920, 1080이라는 모니터 내 단위)/em(배수) 정도 많이 씀

-top을 기준으로 시계 방향으로 돈다~ 즉, border-width: 25px 10px 4px 35px; (top, right, bottom, left 순서임)

-border-style을 최우선적으로 적용해야 다음 기능을 적용할 수 있음

-border: 1px solid red; // 축약형으로, width, 스타일, 컬러 순서임!

-border-top-style 식으로 라인마다 다르게 할 수 있음

-상하좌우값

 

        p.one {

          border-style: solid;

          border-width: 5px; /* 5px all sides */

        }

        

        p.two {

          border-style: solid;

          border-width: 20px 20px; /* 20px top and bottom, 5px on the sides */

        }

        

        p.three {

          border-style: solid;

          border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */

        }

        p.four {

          border-style: solid;

          border-width: 25px 4px 45px; /* 25px top, 4px sides, 45px bottom */

          }

 

        p.five {

            border: 1px dotted black;

            /* width / style / color 축약형 순서 지켜서 써야함~ */

        }

 

 

*height & width

-min-width, max-width는 컨텐츠 모양 유지를 위해서 최대 최소값을 잡아주는 것~

 

    <style>

        * {

            box-sizing: border-box;

        }

        #outer {

            width: 500px;

            height: 300px;

            border: 1px solid red;

        }

        #inner {

            width: 100%;

            height: 50%;

            border: 1px dashed orange;

        }

    </style>

</head>

<body>

    <div id="outer">

        외부 div

        <div id="inner">

            내부 div

        </div>

    </div>

</body>

 

*margin & padding

-margin은 외부 tag와 선택된 tag의 거리

-padding은 border와 contents 사이의 거리

 

 

3)정렬, display, background 등

-block은 margin-auto; 한줄 전체 차지하기에 좌우 margin 맞춰서 정리하는것

-inline은 text-align center; 일자로 쭉 정렬되기에, text-align으로...

-text-align: justify 양쪽 정렬; 모바일용임!!

-좌우정렬은 기본적으로 좌측부터 시작, 즉 기준이 이미 존재하는 것... 하지만 vertical-align은 상은있지만 하의 크기가 없어서 크기를 잡고 정렬해야함

-vertical-align : top, middle, bottom;  bottom은 default와 같음...

 

 

*수직정렬

-div안에 p가 있는 경우, 해당 div를 inline-block 설정 및 height & line-height를 잡아주고, p를 vertical-align: middle; text-align: center; 로 잡아줌!

 

display : table-cell;

 

*간편한 수직정렬 div -> a 구조

 

    <div class="d5">

        <a href="">VIEW MORE</a>

    </div>

 

.d5 {

    height: 200px;

    line-height: 200px;

    text-align: center;

    border: 1px solid red;

}

.d5 > a {

    display: inline-block;

    line-height: normal;

    vertical-align: middle;

    border: 4px solid black;

    color: black;

}

 

 

*로그인창 정중앙 정렬

 

상위 tag는 relative로 놓고,

 

position: absolute;

fransform: translate(-50%, -50%);

top: 50%;

left: 50%;

 

 

 

*text & font

-text-decoration: overline / line-through / underline

-text-transformation:uppercase/lowercase

-text-indent: 50px;

-spacing:

-letter-spacing, word-spacing

-line-height: 1.8;   // 기존에 가지고 있던 크기 대비 얼마나 더 늘릴지에 대한 것

-white-space: nowrap; // 문자 줄글로 쭉 이어가게 만드는것.. (창 크기 조정에 관계없이)

                : pre-line; // 코드창에 쓴 형태 그대로 보여줌

                : normal // 일반적인 형태로 보여줌

-test shadow: 2px 2px 5px red;  // x축, y축, blur정도, 컬러 순서;  감각적인 부분임.. 나는 버리자...

-text-font : sans-serif / serif(끝부분 꺾기가 있는 언어, 활자체)

-font-style, font-weight, font-size(px, 16px = 1em)

 

*font import

-구글폰트 접속

-head 내 복붙

-style 내 입력

font-family: 'Yeon Sung', cursive;

 

 

*아이콘

-importing 후, <i class="명칭"></i>와 같은 식으로 사용 가능~

 

 

*table

-테이블은 레이어가 겹치는 구조기에, 레이아웃 잡는 용도로는 사용하면 안됨.. 너무 느림 (div로 하면됨~)

-width 100%라는 것은, 부모태그의 100%라는 것.. body 바로 아래면 body에 꽉찬다는것. 퍼센트로 놓으면 화면 크기에 따라 자동으로 변환됨 / 실제 표를 위해서는 px로 표시해야지 자료의 형태 정확하게 구현 가능

-text-align: center;로 정렬 처리

-border-collapse : 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현 합니다. <-> border-separate;

-tr:hover: 테이블 위 커서 둘 시 효과 / 바둑이무늬 tr:nth-child(2n) = (even)

-caption-side: bottom, top 테이블 캡션 위치 조정 가능~ 

 

*background

-이미지는 body에 넣으면 전체 노출되지만, 다른 곳에 넣으면 그 곳의 크기가 지정되어 있지 않은 이상 노출이 되지 않음. 하지만 대부분은 body 사이즈만한 div를 만들고 거기에 img 넣음

 

        body {

            background-image: url('images/home.png');

        }

 

-background-position: 50% 100px;  // 좌우는 % 단위 되지만, 상하는 픽셀 단위로만 움직임

-background-position: right top; // 노출되는 부위 설정 가능

-background-size: 100% 100%; = cover  // 이미지 1개로 전체 늘여서 꽉 채워짐

-background-repeat가 이미지 여러장으로 나뉜 것을 하나로 만들어줌

 

*box-sizing

-width + padding + border = actual width & height

-box-sizing: border-box; 를 통해서 실제 width/height에 맞춰서 박스를 맞춰줌 <-> content-box

 

*{

    box-sizing: border-box; // 시작할때 아예 이렇게 맞추고 시작함..

}

 

*position

-기본 position은 static값.. 

-relative는 기본적으로 자기를 감싸고 있는 static tag에 영향을 받는다.

-fixed로 놓고, bottom, left, middle 값 0으로 지정해서 딱 붙일 수 있음.. / center는 적용 불가

-body - relative - absolute 순서로 관계를 잡으면 포지셔닝 하기 좋음... absolute위에 relative가없으면 body를 기준으로 함.

 

*z-index

-누가 가장 위에 있어야 하는지 설정하는것.. (depth 느낌)

-z-index: -1;로 놓으면 뒷부분에 놓을 수 있음. 숫자가 작으면 작을수록 아래로 가는 것임.. (최하단을 주로 -1, 0, 위를 100, 200, 300)

 

 

*전체 메우는 기본 세팅

 

        body {

            box-sizing: border-box;

            padding:0;

            margin:0;

        }

 

*opacity(투명도)

        div.main {

            background-color: blue;

            opacity: 0.55;

            height: 800px;

        }

 

*overflow

-text-overflow:ellipsis;  노출되지 않은 부분은 '.....' 형태로 표시해서 사용자가 뭔가 있겠구나 하는 것.

 

*float

-float : right; 텍스트 사이에 자연스럽게 녹아들게 하기

-div에 float 적용해서 자주 씀,,, 레이아웃용~

-clear: left; 통해서 float left를 종료함, right, both 등 사용해서 기능 초기화 가능함. 대부분의 footer에는 clear가 걸려있음.

 

*기본 레이아웃 구성

-semantic tag는 이름만 붙어있는 div 태그임! 모바일용으로만들면 사실 float left, right가 큰 의미가 없음.. 

<style>

        * {

            box-sizing: border-box;

        }

 

        div {

            border: 1px solid black;

        }

 

        .header {

            background-color: aqua;

            width: 100%;

            height: 100px;

        }

 

        .nav {

            background-color: coral;

            width: 30%;

            height: 500px;

            float: left;

        }

 

        .content {

            background-color: cornsilk;

            width: 70%;

            height: 500px;

            float: right;

        }

 

        .footer {

            background-color: blueviolet;

            width: 100%;

            height: 100px;

            clear: both;

        }

    </style>

 

    <div class="wrapper">

        <div class="header"></div>

        <div class="nav"></div>

        <div class="content"></div>

        <div class="footer"></div>

    </div>

 

-'!important' CSS상 가장 최우선해야 할 스타일링임 / 편집할때 그룹별로 스타일링 빠르게 하기 위해 함..

-navigationbar / dropdowns / image gallery 등 W3C 참조하기

-HTML+CSS+JS 잘하면 잘할수록 좋음... back-end 하나에만 치중된건 가점이 없음

 

 

-grid layout 관련; float: left !important로 잡고 순서대로 쭉 나열하면 됨

 

    <div class="red"></div>

    <div class="w25 first"></div>

    <div class="w50 first"></div>

    <div class="w25 second"></div>

    <div class="w50 second"></div>

    <div class="w50 third"></div>

    <div class="purple"></div>

 

layout 예시

 

 

*기타

-border: inherit; // 부모의 값을 자동으로 세팅 받음

-box-shadow; // 활성화된 창 아래 그림자 만드는 css

-사이드바는 position:fixed;로 잡아야 고정되게 옆에 붙어있음

-아무 표시 없는 리스트 list-style-type: none; 

-리스트 기준 가장위 아래만 마진 값

-object-fit: cover; contain; // object-position: 80% 100%;

-navigator에는 주로 list 사용함

-디자인 감각없으면 bootstrap으로 다하면 됨~

-border-radius: 50%; 동그라미

 

li:first-child {

  margin-top: 50px;

}

 

li:last-child {

  margin-bottom: 60px;

}

 

-사이드바를 아예 fixed로 고정 시킨 후, 메인화면은 margin-left로 사이드바 크기만큼 확보하여 시작

 

#side-navbar {

  background-color: black;

  height: 100%;

  width: 250px;

  position: fixed;

  text-align: center;

}

 

#main {

  margin-left: 250px;

}

 

#main .hero-header {

  text-align: center;

  background-image: url("../images/hero_header.jpg");

  background-size: cover;

  background-position: center center;

  height: 1000px;

  line-height: 1000px;

}

 

#main .info {

  display: inline-block;

  line-height: normal;

  vertical-align: middle;

}

 

 

*block-level/inline-level

 

-block-level

-<p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address> 등

-혼자 한줄 차지, 너비는 100%

-화면 구성이나 레이아웃에 주로 사용

 

-inline-level

-<a>, <img>, <object>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>

-상, 하단 외부 여백(margin-top, margin-bottom) 속성 적용 되지 않음. 대신 상, 하 여백은 line-height 속성에 의해 조절됨.

-너비(width)와 높이(height) 속성이 적용되지 않음. 대신 태그가 가지고 있는 내부 요소에 의해 크기가 맞춰짐.

-인라인 속성을 가진 태그끼리 연속으로 사용되는 경우, 최소한 간격 유지 목적으로 좌우 5px 가량의 외부 여백이 자동 발생함.

 

*column/resize/textarea/outline

-column-rule: 1px solid lightblue;  column-width: 100px;

-resize: auto; none;

-<textarea rows="5" cols="40">

-outline은 margin에 영향 미치지 않음!!

 

*media query

-@media screen and (max/min-width: 480px) {   //가질 수 있는 최대/최소 크기!! 

    body {

        background-color: lightgreen;

    }

}

 

-> 최소 480px은 되어야 lightgreen 유지,, 그보다 작을 시 바뀌어버림

-> 레이아웃 동적으로 적용 시키기 위한 툴

 

-@font-face {

    font-family: myFirstFont;

    src : url(location);

}

->google Fonts에서 다운받아 쓸 수 있음.

->font는 public인지 꼭 확인해서 사용하기

 

-orientation:landscape 가로 / portrait 세로-기본형

 

 

*트래픽 = 돈

-쇼핑몰은 하루 트래픽이 15gb나옴... 월 5~10만원.. 성능따라 다름..

-한국 php 잘 안씀 

-상업용 서버.. 한달 거의 2천만원..

-기획 단계에서 다 고려함.. 네트워크/서버쪽 다루다보면 계산 하게 되어 있음...

-매출 안나오는데 서버 비용만 더럽게 나오는 경우도 발생함..

 

*flexbox

-display:flex; div 알아서 정렬된 느낌 주는것,

-flex-direction: column;

-flex-wrap: wrap;

-justify-content: space-between; center;

 

*반응형 레이아웃 과제

-600, 900 하던지, 맘대로하면됨 변하는 기준은!! max, min

 

/* 모바일 */

@media screen and (min-width: 0px) and (max-width: 700px) {   

 

/* 테블릿 */

@media screen and (min-width: 701px) and (max-width: 1499px) {   

 

/* 데스크톱 */

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

 

*grid

-layout 잘 안잡음.. responsive 시 너무 작업량이 많음

-display:grid;

-grid-template-columns: auto auto auto;

->간격이 일정하지 않기에, grid-column-gap / grid-row-gap 등으로 조정해서 맞춰야함

-grid 12 column으로 나누는 이유는 약수가 많아서

 

*이미지

-이미지 깨지는 점 확실하게 인지하기; 이미지 왜곡 되는데 괜찮은가? 그림판으로 50% 줄이기; 

 

 

 

3)bootstrap

-easily create responsive designs / free front-end framework

-sm : 768px 이하 최적화?

-원래 front/back 붙어서 몇개월 걸리던걸, bootstrap 사용하면 back만해서 일주일안에 킬 가능

-mobile-first approach

-bootstrap, jquery, popper 등 직접 파일 다운 받아서 하는 이유는, 링크로 했을 때 대비 버전 고정 시켜서 안정적임... 링크로했을 시 만약 링크 변경되거나 업뎃되면 개발한게 망쳐질 수 있음 -> 로컬화함! 그러나 트래픽은 내 서버에서 발생하기에 약간의 단점은 있음. 따라서 로그인 창과 같이 트래픽이 큰 곳은 링크로 하는게 맞고, 내정보보기, 장바구니 등은 로컬화 하는게 나음..

-사용자가 자주 접속하거나 사용하는 곳은 사용자 컴퓨터 브라우저가 캐싱함.. 그래서 상기 문제 실제 생기지는 않음..... 실제 조심해야할 것은 DDOS 공격이지.. 이러한 트래픽이 아님!

-보안 등 신경쓰이면 로컬 대신 외부 저장소 소스 코드 복붙해서 하는게 나음~

-클래스 이름만으로 모든 CSS 구현하는 느낌~~

-기본적으로 container를 넣고 시작; 

-모든 색상 primary(확인), secondary(취소) success(이동 및 확인) info(팝업) warning(수정) danger(취소 삭제) dark(비활성화) 

 

source: w3schools.com

 

-class="table table-striped"> ; 기본 타입 적고, 스타일 넣는 식으로 진행

-carousel -> 갤러리 형식 구현 가능

-modal 팝업창

-list group / navbar

-bg-success 등으로 수정~

-commercial license 사서 걍 쓰면됨 / 풀버전은 사진 등 다 포함됨 / 홈페이지 계약 시, 사진은 업체한테 달라고 하면됨..

-전체에 대한 레이아웃을 기본적으로 짬;;;

-back-end에 치중된 개발자에게 최고의 작품~ ㅋㅋㅋㅋ

-BS card4~

 

 

Dropdown, carousel, alert 예시

 

 

card 예시

-alert창!

    <div class="alert alert-success alert-dismissible">

        <button type="button" class="close" data-dismiss="alert">×</button>

        <strong>튜터 모집! </strong> 재능을 나누어봐요.

      </div>

 

-card!

 

    <div class="container" style="width:700px">

        <div class="card">

            <img class="card-img-top" src="images/visa.png" alt="Card image" style="width:100%">

            <div class="card-body">

                <h5 class="card-title">종목상세조회 : 내부자비율, 공매도비율</h5>

                <div>

                    <img src="images/man.png" alt="" width="20px" height="20px" style="display: inline">

                    <h6 class="card-text" style="display:inline">박종빈</h6>

                </div>

            </div>

        </div>

    </div>

 

-dropdown

 

        <div class="dropdown dropleft float-right">

            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">

                <img src="images/drop-down-arrow.png" alt="" width="10px" height="10px" style="margin-right: 10px;">

            </button>

            <div class="dropdown-menu">

                <a class="dropdown-item" href="#">튜터 신청</a>

                <a class="dropdown-item" href="#">강의 목록</a>

                <div class="dropdown-divider"></div>

                <a class="dropdown-item" href="#">회원가입</a>

                <a class="dropdown-item" href="#">로그인</a>

            </div>

        </div>

 

-carousel

 

  <div id="demo" class="carousel slide" data-ride="carousel">

 

        <!-- Indicators -->

        <ul class="carousel-indicators">

            <li data-target="#demo" data-slide-to="0" class="active"></li>

            <li data-target="#demo" data-slide-to="1"></li>

        </ul>

 

        <!-- The slideshow -->

        <div class="carousel-inner">

            <div class="carousel-item active">

                <img src="images/coca.png" alt="Coca-cola">

                <div class="carousel-caption">

                    <button type="button" class="btn btn-secondary">바로 구매</button>

                    <h3>Coca-Cola</h3>

                    <p>일상의 선물</p>

                </div>

            </div>

            <div class="carousel-item">

                <img src="images/ibm.png" alt="IBM">

                <div class="carousel-caption">

                    <button type="button" class="btn btn-secondary">바로 구매</button>

                    <h3>IBM</h3>

                    <p>양자컴퓨터</p>

                </div>

            </div>

        </div>

 

        <!-- Left and right controls -->

        <a class="carousel-control-prev" href="#demo" data-slide="prev">

            <span class="carousel-control-prev-icon"></span>

        </a>

        <a class="carousel-control-next" href="#demo" data-slide="next">

            <span class="carousel-control-next-icon"></span>

        </a>

    </div>

 

*테이블들 간격은 padding으로

 

td.third {

    width: 150px;

    padding-top: 7px;

    border-bottom: 1px solid lightgray;

}

 

*input type 너비는 size로

 

<input type="text" name="address" size=35>

maxlength=8