CSS 기록

Steve·2021년 3월 6일

뭘까

목록 보기

1/1

WEB2 CSS-6. CSS 속성을 스스로 알아내기

property 스스로 알아내는법 ->구글 신 검색하기

Selector(셀렉터,선택자) -> a {
Declaration(효과) -> property: value;
}

핵심 키워드들만 검색하면 나옴.
css text center
css text size 등.

WEB2 CSS-7. CSS 속성을 스스로 알아내기

#id > .class > tag(element)
선택자
효과(declaration)
속성(property): 값(value)

WEB2 CSS-8. 박스 모델

h1{
        border:5px solid red;
        padding:20px; 컨텐츠와 보더 사이 간격(패딩)
        margin:20px; /* 테두리끼리의 사이 간격 */
        width:100px; /* 폭 */
		height:100px; /* 높이 */
      }

WEB2 CSS-9. 박스 모델 써먹기

가로선, 세로선 태그에 맥이기
border-bottom: 1px solid gray;
안쪽부터: padding border margin
body태그의 margin값도 변경가능

WEB2 CSS-10. 그리드 소개

<style>
#grid{
        border:5px solid pink;
        display:grid;
        grid-template-columns: 150px 1fr;
      }
      div{
        border:5px solid gray;
      }
</style>
  </head>
  <body>
    <div id="grid"> <!--감싸는 부모 태그-->
      <div>NAVIGATION</div> <!-- block레벨 -->
      <div>activation</div>
    </div>
  </body>

WEB2 CSS-12. 미디어 쿼리 소개

@media(max-width:800px) {
        div{
          display: none;
        }
      }

WEB2 CSS-14. CSS코드의 재사용

style.css 라는 파일을 하나 따로 만들어

<style></style> 안에 넣을 정보들을 몽땅 넣는다.

html파일에는

<link rel="stylesheet" href="style.css">을 넣어 연결 시켜준다.

(link입력하고 엔터치면 자동완성)
캐싱(cache)를 이용해서 네트워크 트래픽을 훨씬 더 적게 씀
-> 재사용성,가독성,유지보수 편리 등의 이유로

Steve

Front-Dev