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

5449 단어 CSS대구AI스쿨VS CodehtmlCSS

□ CSS 추가 설명

★ 작성코드

Git 링크.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);
}

● 결과 스크린샷

□ 어려웠던 점

특별히 어려웠던 내용은 없었습니다.

□ 해결방법

강의 내용을 듣고, 코드를 작성해보면서 오타나 오류가 생기면 찾아서 수정하였습니다.

□ 학습 소감

CSS에 대한 보충 내용을 들을 수 있어서 좋았습니다. 그리고 앞서 들었던 Twitch 강의에서 어떻게 CSS 코드가 작성되었는지 알 수 있었습니다.

Lv3 블록 이동하기
[MVC1] 7. 스프링 MVC의 요청조회와 응답

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage