23_10_14 CSS 공부정리

[코딩애플] HTML, CSS 기초모듈

 

-input을 타입에 따라 선택할 수 있음

input[type=text]{ // [type=타입명]을 하면 그 타입만 선택할 수 있음.

    padding : 10px;

    font-size: 10px;

    border : 1px solid black;

    border-radius: 5px;

}

-레이아웃을 짜기전 border-box를 지정해주는것이 좋음

div, input, textarea, button {

    box-sizing: border-box;

}

-가장 큰 컨테이너의 높이와 너비는 px, 안쪽의 박스는 편의를 위해 %로 하는 경우가 많음

-width : 100%를 사용해서 px단위의 미세조정을 없앨 수 있음.

.background-container {

    background-color: black;

    padding : 30px;

    width : 500px;

    height : 570px;

}

.container {

    background-color: white;

    padding : 30px;

    height : 100%;

}

.form-input {

    width : 100%;

    padding : 5px;

    font-size : 15px;

}

-자주 사용하는 속성을 클래스로 지정하여 반복사용하는것이 좋음

        <div class="w-50">

          <p>First name</p>

          <input type="text" class="form-input">

        </div>

        <div class="w-50">

          <p>Last name</p>

          <input type="text" class="form-input">

        </div>

 

.w-50 {

    width : 50%;

    float : left;

    padding : 0px 10px;

}

-label태그를 이용해서 체크박스를 클릭하지 않고도 체크박스를 클릭할 수 있음

-id와 for속성의 값이 같아야함.

            <input type="checkbox" id="check">

            <label for="check">Subscribe</label>

 

<thead>,<tbody>로 테이블구역 나누기 가능

 

-div태그로 table을 만드는법

-display : table/table-row/table-cell로 가능

div태그로 table을 만드는 코드

vertical-align : 텍스트 세로정렬(top/middle/bottom) / 테이블에서 텍스트 세로정렬시 사용
1.inline/inline-block 요소간의 세로정렬
*(table외)super : 윗첨자 sub : 아랫첨자
2.이미지와 함께 중앙정렬

 

-table 선을 한줄로 만들때 (td사이 공백없애기)

table {

    border-collapse: collapse;

}

세로 셀 병합하기 : rowspan

가로 셀 병합하기 : colspan

https://hianna.tistory.com/442

[HTML] 테이블(table) 가로, 세로 셀 병합하기 (colspan, rowspan)

 

-nth-child() : 태그순서에 따라 선택하는 선택자

.cart-table td:nth-child(even) {
  color: red;
} 

이러면 짝수로 등장하는 td에만 스타일을 줄 수도 있고

(odd라고 쓰면 홀수)

.cart-table td:nth-child(3n+0) {
  color: red;
} 

이러면 3의 배수로 등장하는 3,6,9,12.. 번째 등장하는 요소에만 스타일을 줄 수 있고

3n + 1 이렇게 작성하면 (3의배수 +1) 번째 등장하는 요소에만 스타일을 줄 수 있음

 

-border-radius가 table에서 안먹을때

table 태그에 border-radius가 안먹을 때 1. 

table {
  border-collapse : collapse;
  border-spacing : 0;
}

(왼쪽위에있는 td) {
  border-top-left-radius : 5px;
}

 

 

table 태그에 border-radius가 안먹을 때 2. 

table {
  border-collapse : collapse;
  border-radius : 7px;
  border-style : hidden;
  box-shadow : 0 0 0 1px #666;
}

box-shadow라는 속성을 이용해 테두리를 가짜로 만들어내는 편법.

box-shadow는 그림자 넣는 속성. 

 

-pseudo-class를 입력할때 hover- focus-active 순으로 입력해야함.

button:hover {

    background-color : rgb(75, 162, 255);

}

button:focus {

    background-color: blueviolet;

}

 

button:active {

    background-color: aquamarine;

}

 

-BEM 룰 : class명 작명법

Block__Element--Modifer(내용__역할--구분)

<div class="profile">

    <img class="profile__img">

    <h4 class="profile__h4">이름</h4>

    <p class="profile__content">소개글</p>

    <button class="profile__button--red">빨간버튼</button>

    <button class="profile__button--blue">파란버튼</button>

</div>

 

- Object Oriented CSS : class별로 나눠서 속성을 부여하는 방법 => 이것을 잘쓰는  라이브러리가 Bootstrap

*장점 : 중복된 스타일 재사용 / 유지보수 편리 / 코드 작성 효율 증가

.bg-red {

    background : red;

  }

  .bg-green {

    background : green;

  }

  .bg-blue {

    background : blue;

  }

-이렇게 나눠진 클래스들을 Utility Class라고 함.

 

-외부 font는 @font-face를 이용해서 가능

-웹용 폰트(용량이 작은거)는 .woff임. ttf는 용량이 너무 큼.

@font-face {

    font-family : '나눔'; // '작명'

    src : url(../font/NanumSquareB.woff) // src : url(폰트위치)

}

body {

    font-family: '나눔'; //body태그에 적용하면 모든 자식에 inherit됨.

}

 

-폰트 안티엘리어싱 : 태그들을 살짝만 회전시켜서 폰트를 부드럽게 하는것.

p,h4,h3,h2,h1,button,span,div {

    transform : rotate(0.03deg)

}

-Emmet문법으로 코드를 작성하면 빠르게 작성 가능.

https://inpa.tistory.com/entry/HTML-%F0%9F%8E%A8-Emmet-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

🏷️ 에멧(Emmet) 문법 모음 - 한눈에 정리

 

-절대경로와 상대경로

1. css/main.css

2. /css/main.css

참고로 위 두개의 경로는 다른 경로입니다.

1번은 현재 HTML파일과 같은 경로에 있는 css라는 폴더 내의 main.css 파일을 의미하고

2번은 현재 사이트의 메인경로 (codingapple.com)부터 시작해서 codingapple.com/css/main.css 파일을 첨부해라 라는 뜻입니다.

슬래쉬 기호가 첨부터 붙어있으면 사이트 메인경로부터 시작해라~ 라는 의미입니다.

멋진 말로 1번은 상대경로, 2번은 절대경로라고 합니다.

 

-head에 들어갈 수 있는 것들

1.CSS 파일 링크
2.스타일태그
3.사이트 제목
4.meta 태그 

<head>

    <meta charset="UTF-8">

    <meta name="description" content="html 잘하는 코딩애플입니다.">

    <meta name="keywords" content="HTML,CSS,JavaScript,자바스크립트,코딩">

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

 </head>

-사이트의 인코딩 형식을 지정할 때 charset="UTF-8"

- 사이트의 검색 결과 화면에 뜨는 글귀를 수정. name/content/description

-사이트 초기 zoom 레벨이나 폭을 지정해주려면 name="viewport" 라는 속성을 부여

width=device-width는 모바일 기기의 실제 폭으로 렌더링 해주세요 라는 뜻

initial-scale=1 이 부분은 접속시의 화면 줌레벨 설정.

5.open graph : og태그.

<head>

    <meta property="og:image" content="/이미지경로.jpg">

    <meta property="og:description" content="사이트설명">

    <meta property="og:title" content="사이트제목">

 </head>

og태그 예시

6.파비콘 : 웹사이트 제목 옆에 뜨는 아이콘을 커스터마이징

<head>

    <link rel="icon" href="아이콘경로.ico" type="image/x-icon">

</head>

파비콘 사용시 유의점.

 

vw(viewport width) : 브라우저 비례 너비 (50vw = 브라우저 너비의 50%)
vh(viewport heigth) : 브라우저 비례 높이 (50vh = 브라우저 너비의 50%)

rem : html 태그 폰트사이즈(16px)의 10배(10rem = 16px의 10배, 요즘은 쓸일 없음. 타이포그래피할때 쓴다함)
em : 내 폰트사이즈의 X배(20em = font-size설정값의 20배)

 

 

권장 Breakpoint 

 

media query 문법 max-width 안에 넣는 브라우저 폭을 breakpoint라고 합니다. 

breakpoint는 원하는 만큼 저렇게 여러개 넣을 수 있는데 

필요할 때 마다 사이즈를 임의로 넣고 작성하는 것 보다는

많은 사람들이 사용하는 breakpoint를 쓰는게 좋습니다. 

 

1200px / 992px / 768px / 576px

 

Bootstrap 라이브러리가 기본으로 권장하는 breakpoint 이며 그대로 따라하도록 합시다. 

 

반응형 레이아웃 코드 예시

<body>

    <div class="container">

        <div>

            <h4>Fast Shipping</h4>

            <p>lorem ipsum</p>

        </div>

        <div>

            <h4>Good Service</h4>

            <p>lorem ipsum</p>

        </div>

        <div>

            <h4>Free Coupons</h4>

            <p>lorem ipsum</p>

        </div>

        <div>

            <h4>New Products</h4>

            <p>lorem ipsum</p>

        </div>

        <div style="float:none;clear:both"></div>

    </div>

</body>

 

div {

    box-sizing: border-box;

}

.container {

    background-color: #eee;

    padding : 30px;

    width : 80%;

    max-width: 1000px;

    margin : auto;

}

.container>div {

    float : left;

    width : 25%;

    text-align: center;

}

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

    .container>div {

        float : left;

        width : 50%

    }

}

@media screen and (max-width:769px) {

    .container>div {

        width : 100%  

    } //이해가 안가는 부분. 모든 자식 div태그에 width100%를 주면 총 400%아닌가? 왜 제대로 작동하지?

}

pc버전

태블릿버전(max-width : 992px)

모바일버전(max-width : 769px)

 

-크롬브라우저 검사창에서 css는 가장 위에있는것부터 적용됨

위에서 부터 실행됨.

-Font Awesome 설치방법

1.CDN방식 : 아래 주소에서 all.min.css를 링크복사 후 헤드태그에 삽입

https://cdnjs.com/libraries/font-awesome

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

2.직접다운 방식 : 아래 주소에서 all.min.css를 다운로드 받아 html에 링크를 걸어 삽입

https://fontawesome.com/download

Font Awesome

-아래에서 검색 후 코드를 복사해서 붙여넣으면 끝

https://fontawesome.com/search

        <div>

            <i class="fa-solid fa-ship fa-2x"></i> // fa-nx로 n배만큼 크기를 키울 수 있음.

            <h4>Fast Shipping</h4>

            <p>lorem ipsum</p>

        </div>

 

-애니메이션 만드는 순서

1.시작상태 만들기

2.트리거 + 최종상태 만들기

3.애니메이션 삽입

-transition : all 1s로 하면 변하는 속성 모두가 1초에 걸처 서서히 변함

.overlay { //시작상태

    color : white;

    text-align: center;

    font-size: 5vw; //반응형 폰트사이즈

    position : absolute; //div위에 겹치게하기 위해서(부모박스에 display : relative)

    width: 100%;

    height: 100%;

    background-color: rgba(0,0,0,0.7);

    display : flex; //p태그 가운데정렬

    justify-content: center;

    align-items: center;

    opacity : 0;

    transition : all 1s;  //애니메이션 삽입

    /* transition : opacity 0.5s ease ;  */

    transition-timing-function: cubic-bezier(); /*애니메이션 타이밍관련*/

}

.overlay:hover {  //트리거(호버) + 최종상태

    opacity : 1;

}

.overlay>p {

    padding-bottom : 2vw; //가운데정렬 더 정확히 하기 위해(p태그 안 텍스트 상하정렬힘듬)

}

 

-한 요소에 이벤트가 발생했을때 다른요소에 애니메이션을 주는 방법

*선택자:pseudo-class 다른선택자 { 최종 상태 }

.overlay-black {

    box-sizing: border-box;

    color : white;

    width: 100%;

    height: 100%;

    background-color: rgba(0,0,0,0.3);

    padding : 20px;

    margin-top : 100%;

    transition: all 1s;

}

 

.overlay-wrap:hover .overlay-black { //해당부분

    margin-top : 50%

}

-다른 웹사이트 애니메이션 참고하는법
1.오른쪽위 점세개 > 도구 더보기 > 애니메이션
2.해당 애니메이션을 동작시키면 기록이 되어 확인가능

크롬 개발자도구 애니메이션 확인창