그저 내가 되었고
CSS:: 박스모델 & 그리드 & 반응형 디자인 rough note 본문
* css 주석은 /* */
e.g.
/*
block level element
*/
* style tag 中 border로 부피감 알아채기
e.g. h1{
border-width: 4px;
border-colour: orange;
border-style: solid;
display: inline; - 이건 h1이 비록 블락 레벨(화면 꽉 채워서 줄 바꿔버리는 애)이더라도 인라인 레벨로 강등(?)
}
a{
border-width:3px;
border-colour:orange;
border-style:solid;
display: block; - 이건 a 태그가(링크) 비록 인라인 레벨(줄 바꿈 없이 자기 자리에서만 쓰이는 애)이더라도 블락 레벨로 승진(?)
☞중복 싫어!!! h1과 a 동시에 적용도 가능
e.g. h1, a{
border-width: 4px;
border-color: orange;
border-style: solid;
}
중복 여전히 싫어....!? 이렇게 하나로 합치는것도 가능
h1, a{
border: 4px solid orange
}
* box model: 말 그대로. . 박스 모델링 하는 것😂 이 속성 사용해서 다양한 일 可
BOX MODEL
e.g. <style>
h1, a{
border: 4px solid orange; -이건 박스 테두리 !! 두께 & 줄 모양 & 색 순서는 노상관
padding: 10px; -이건 박스 내부의 글자와 박스 사이의 간격 만들어줌
margin: 5px; -이건 박스와 타 개체 사이의 간격 만들어줌
display: block; -이건 원래 h1은 기본으로 가진 속성, a만 우리가 부여하는 것 인데!(아랫줄)
width: 300px -갑자기 그걸 또 걍 300px로 지정해버리는 것(..)
}
</style>
* <div> & <span>: 디자인이란 목적을 위해서 아무 의미 없는 태그를 사용
✔<div>(ision)은 기본적으로 블락 lv 엘리먼트라 사용하면 줄 바뀜
✔<span>은 기본적으로 인라인 lv 엘리먼트라 사용해도 줄 안바뀜
✔grid 이용해서 박스 디자인 조정하기
e.g.
<style>
border: 5px solid pink;
display: grid;
grid-template-columns: 150px 1fr; -fr은 유연한 크기(fraction). 앞의것은 고정되고 뒤의것은 사용자가 창 늘렸다 줄였다 하는 것에 맞춰 자동으로 크기가 조정됨
}
div{
border: 5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>Lorem......</div>
</div>
</body>
✔✔어떤 ul인지 확실하게 분간하려면?!! [부모태그]를 명시!!
#grid ul { -이렇게 하면 이 페이지의 모든~! ul 중 grid에 속한 ul임을 나타냄
border-right: 0.8px solid gray;
width: 70px;
margin: 0;
padding-top: 10px;
padding-bottom: 3px;
padding-right: 20px;
padding-left: 40px;
}
* 반응형 디자인: 화면의 크기에 따라 웹페이지의 요소들이 반응하여 동작하게 하는 것
☞이것을 구현하는 핵심 기술이 미디어쿼리(media query)
1] 만약 화면 크기 800px을 기준으로 그보다 커지면 어떤 요소가 안보이고, 그보다 작아지면 안이게 하고싶다?
((일단 우클릭>검사 누르면 바로 우측 상단에 현재 화면 크기 px로 보임))
→1)오직 디자인만을 위한 <div> 먼저 body에서 묶어줌
<body>
<div>
Responsive
</div>...
</body>
2)<style>
@media(min-width: 800px) { -이게 뭔? div가 보이려면 최소 크기가 800px는 되어야 한다는 뜻....!!!!
div{
display: none;
}
}
</style>
</head>
* link 태그: 근데 이러면.. 네가 만든 모든 html 코드에 <style></sthle>이 존나 중복으로 다 적혀있잖아? 이걸 합.칠.수.있.다.!!!!!! 즉, 링크 태그는 이 웹페이지가 어떤 css 파일과 연결되어있는지 웹브라우저에 알려주는 것!!!!!
1] 아무 페이지에서나 <style>...</syle>여기서 앞뒤로 서타일 빼고 ... 부분만 긁어서 새로운 파일(style.css)에 복붙
2] <style>...</syle>은 전부 지워주고(;;;) 대신 <link rel="stylesheet" href="style.css"> 한 줄 적으면 끄-읏(......WoW)
'개발 > CSS & HTML' 카테고리의 다른 글
| CSS:: 스타일 태그 & 스타일 속성 & 선택자 rough note (0) | 2022.09.04 |
|---|---|
| HTML:: 실습 rough note (0) | 2022.09.04 |
