[TIL] CSS_기초상식

dayhun🌞·2022년 4월 5일
CSSTIL개발일지멋쟁이사자처럼프론트엔드스쿨
0

🔥TIL🔥

목록 보기
11/26

📌 CSS

Cascading Style Sheets : 폭포가 되어 떨어지는 스타일 시트
css에서 스타일 적용시, 우선순위에 따라 적용된다!!
그 모양이 마치 폭포같아서 css~

html : 웹의 뼈대!
css : 웹의 살, 가죽, 옷!
javascript : 웹의 움직임, 동작!

# css 기본 구조
선택자 {
	프로퍼티: 값;
}

  • 선택자 (Selector)
    html의 태그를 가져오면 해당 태그를 선택자라고 한다.
    즉, 스타일을 지정할 html의 요소!

  • 속성 (Property)
    지정하고 싶은 스타일 속성의 이름

  • 값 (Value)
    특정 키워드, 수치, 단위를 값으로 사용
    프로퍼티와 짝을 이루어 사용한다.(속성에 대응되는 값)

  • 선언 블록 (Declaration block)
    {} 안에 있는 덩어리를 선언블록이라고 한다.
    선언마다 ;로 구분해주어야한다.

📌 인라인 방식 CSS

: html body의 요소 안에 직접 style이 적용된 방식

<body>
<h1 style='color:red; background-color:yellow;'>Hello world</h1>
</body>

📌 내부 CSS

: html head 안에 style이 적용된 방식

<head>
	<style>
		body {font-size: 14px;}
	</style>
</head>

📌 외부 CSS

: html과 css 파일을 따로 만들어주어 연결시키는 방식

파일의 경로 (href)를 맞춰주기 위해 html 파일과 css 파일이 같은 프로젝트에 위치해야 함!

<!--html-->
<head>
	<link rel="stylesheet" href="foo.css">
</head>
/* foo.css */
h1{
	color: red;
	background-color: yellow;
}

📌 다중 CSS

: CSS 파일 안에 CSS 포함하는 방식
@(at-rule)을 사용한다.

<!--html-->
<link rel="stylesheet" href="파일1.css">
/*파일1.css*/
/*파일1에서 파일2.css 가져오기*/
@import "파일2.css";

📌 RESET CSS

브라우저 제작사들마다 각각 브라우저가 제공하는 요소의 기본 스타일이 모두 다름
따라서, 브라우저의 모든 기본적인 스타일 속성들을 완전히 초기화 시켜서 모든 스타일을 처음부터 만들도록 한다.
이를 reset css라고 한다!

각 회사에서 제공하는 reset css를 사용하면 된다.
필요하면 추가로 더 작성해도 된다.

/* reset.css */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

reset css 추가

어차피 회사거 사용하기 때문에 굳이 외우고 그럴 필요 없음.

기본 폰트 사이즈 16px인데 왜 또 지정해줄까? 아이폰에도 적용해주기 위해서!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>reset</title>
    <style>
        /* reset.css */
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed, 
        figure, figcaption, footer, header, hgroup, 
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure, 
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        body{
            font-family:'회사에서 사용하는 기본 폰트', '맑은 고딕','Malgun Gothic', AppleGothic,sans-serif;
            font-size: 16px;
            font-weight: 400;
            /* 아이폰에 reset font가 설정이 안되는 경우기 있어 설정해주어야 함  */
            -webkit-text-size-adjust:none;
        }
        p,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,select,button,code,label,em,span,strong {
            /* 단어 단위로 떨어져 내리게끔 */
            word-break:keep-all;
        }
        /* 익스플로러 하위 버전에서 a > img일 경우 보더가 생김 */
        img,fieldset{border:0}
        legend{
            position:absolute;
            left:-9999px;
            font-size:0;
            overflow:hidden;
        }

        input,select,textarea{
            /* 모바일 기본 제공 스타일 제거 */
            -webkit-appearance:none;
            -moz-appearance:none;
        }
        /* IE 셀렉박스 기본 화살표 제거 */
        select::-ms-expand{display:none;}
    </style>
</head>
<body>
    <h1>hello world</h1>
    <h2>hello world</h2>
    <h3>hello world</h3>
    <h4>hello world</h4>
    <h5>hello world</h5>
    <h6>hello world</h6>
    <p>hello world</p>
</body>
</html>

📌 Normalize CSS

브라우저의 기본적인 스타일 속성들을 모두 제거하지 않음
어떤 브라우저에서든 비슷하게 보이도록 통일
브라우저 고유의 스타일을 존중하면서 거기에 스타일을 첨가하는, 좀 더 부드러운 방법
normalize css

📌 Remedy CSS

떤식으로 브라우저에게 기본 스타일을 주게 될까 라는 생각에서 출발한 차세대 CSS reset 프로젝트
하위 브라우저 호환 걱정없이 CSS가 브라우저에서 효율적으로 작동하도록 하는 것이 목표
아직 진행중인 css!
remedy css

cf )
읽어보기
google html/css style guide
naver convention

📌 벤더프리픽스

Vendor-Prefix
벤더(브라우저 제조사)와 프리픽스(접두어)의 합성어

: 아직 비표준이거나 실험적인 CSS 속성을 특정 브라우저에서 실행할 수 있도록 CSS 속성 앞에 브라우저 제조사 만의 접두어(prefix)를 붙이는 문법

벤더프리픽스 종류

  • -webkit- : 크롬, 안드로이드, 사파리, ios 기반 파이어폭스, 오페라 등 웹킷 기반 브라우저
  • -moz- : 파이어폭스 브라우저
  • -ms- : 마이크로소프트 인터넷 익스플로러, 레거시 엣지
  • -o- : 레거시 오페라 브라우저

VSC로 Autoprefixer 사용하기

autoprefixer 설치 후 > 환경설정 > Format On Save 체크 > Autoprefixer:Options의 settings.json에서 편집 선택

{
  "editor.fontSize": 20,
  "editor.wordWrap": "on",
  "workbench.editorAssociations": {
    "*.ipynb": "jupyter-notebook"
  },
  "notebook.cellToolbarLocation": {
    "default": "right",
    "jupyter-notebook": "left"
  },

  "explorer.confirmDelete": false,
  "workbench.colorTheme": "Material Theme",
  "workbench.iconTheme": "material-icon-theme",
  "editor.formatOnSave": true,
  // "editor.defaultFormatter": "esbenp.prettier-vscode",
  "git.enableSmartCommit": true,
  "autoprefixer.formatOnSave": true,
  "autoprefixer.options": {
    
    "browsers": [
      "last 4 versions" /* 가장 최신 버전에서 4단계 아래 버전까지 지원합니다. */,
      "ie >= 9" /* IE9 버전 이상만 지원합니다. */,
      "> 5%" /* 전 세계 브라우저 사용률 중 5% 를 초과하는 브라우저만 대응합니다. */
    ]
  },
  "window.zoomLevel": -2
}

cf )
vsc 화면 크기 단축키

  • command + - : 글씨작아짐
  • command + + : 글씨커짐
profile
dayhun🌞
아기 개발자
이전 포스트

[TIL] CSS_빔캠프 특강 (이종찬 강사님)

다음 포스트

[TIL] CSS_Selector

0개의 댓글

관련 채용 정보