[대구AI스쿨] 21.08.25 개발일지

임채업·2021년 8월 23일

□ CSS 추가 설명

★ 작성코드

1. Reset CSS와 노멀라이즈 CSS

1) Reset CSS

● CSS 작성시, 전부 초기화하는 내용을 작성해놓은 코드 – 원래 html 태그가 가지고 있는 고유의 CSS를 초기화시킴
링크 : https://meyerweb.com/eric/tools/css/reset/
※ 링크 코드 내용 복사하여 reset.css에 붙여넣기

● 코드 작성(캐스케이딩 효과)

[html]
<head>

    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

2) 노멀라이즈 CSS(normalize css) - 실무 사용비중은 조금 높지만, 작업 환경에 따라 다름

● 기존의 디자인을 약간의 가공을 한 형태로 만들어진 CSS
링크 : https://necolas.github.io/normalize.css/

● 브라우저마다 들어가는 CSS 디자인이 다르기에 디자인의 오차를 줄이고, 버그를 줄이는 방향으로 스타일을 정리할 때 사용하는 CSS

2. CSS 변수

※ 익스플로러에서는 사용할 수 없음

1) 변수 사용 예시(:Root는 전체 범위에 적용함)

:root {
    --black: #18181a;
    --brand-color: #9147ff;
    --font-size-16: 16px;
}

h1 {
    background-color: var(--black);
    font-size: var(--font-size-40);
    color: var(--brand-color);
}

● 결과 스크린샷

2) CSS 선택자 - 변수 사용범위 제한

예시)

[html]
<body>

    <header id="intro">
        <p>Header P</p>
    </header>

    <footer = id="footer">
        <p>Footer P</p>
    </footer>

</body>

[CSS]
#intro {
    --font-size: 50px;
    --font-color: blue;
}

#intro p {
    font-size: var(--font-size);
    color: var(--font-color);
}

#footer p {
    font-size: var(--font-size);
    color: var(--font-color);
}