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)를 이용해서 네트워크 트래픽을 훨씬 더 적게 씀
-> 재사용성,가독성,유지보수 편리 등의 이유로
Front-Dev