2021.07.26 기록

2021.07.25 시작

WEB2 > CSS 수강

 

• 박스모델 16:21
• 그리드 9:54
• 반응형 디자인 9:17
• CSS 코드의 재사용 11:48
• 수업을 마치며 2:59

학습내용 요약

- <h1> </h1> 태그는 한 단락을 다 가져감

   반면, a태그로 감싼 문장은 해당 문장 범위만큼만 가져감

  - 내부 스타일시트를 사용하여 <style> <style>안에서 h1{display: inline;} or a{display: block;} 할경우 두개의 본성을 사용자 마음대로 바꿀 수 있다.

-display:none 을 통해 해당 태그 내용을 사라지게 할 수 있음

- h1,a{ 속성:값;} 컴마를 통해서 중복을 제거 가능

-

        border-width: 5px;

        border-color: red;

        border-style: solid;   >>   border:5px solid red;  로 중복 제거 후 변경 가능

 

 

- 컨텐츠와 테두리 사이의 간격 padding 

- 테두리와 테투리 사이의 간격 margin

- <div> <span>을 사용해서 구간을 나눠줌

-

        display: grid;

        grid-template-columns: 150px 1fr;

                                   //픽셀로 고정, 뒤에는 나머지를 다 가진다.

- https://caniuse.com/ 통해서 어느 브라우져에서 해당 기능이 사용가능한지 판단 가능

 

 

- 반응형 웹 디자인 (미디어 쿼리)

- 800px보다 화면이 작다면 나타나게 진행

-    @media(min-width:800px){

        div{

        display:none;

    }

    }

- 외부 CSS 파일을 별도로 저장해 중복을 제거하여 사용

   <link rel="stylesheet" href="style.css">