@ id 는 똑같은 이름으로 중복될 수 없다, class는 똑같은 이름으로 중복가능
@ fonf-family 에서 폰트들을 나열해놓는데, 첫번째가 안되면 그다음 폰트 그다음폰트,, 띄어쓰기가 있는 이름의 폰트라면 "" 쌍따옴표에 넣어주자
@font-weight > 글씨 두께 (normal = 400 bold = 700)
@들여쓰기의 2가지 방법
html의 태그 안에 를 넣거나
css property (text-indent :~px;) 사용
@padding - border- margin
디자인 시안을 받았을때 머릿속으로 패딩값, 마진값을 계산하면 어려워진다.
css 에
*{box-sizing: border-box;}이렇게 가로를 맞춘 후 패딩값을 준다면 더 편리하다.
@ img이외에 css로 이미지를 추가하는 방법
html
<div class="bg-img">배경이미지</div>css
.bg-img {
background-color: yellow;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}여기서 width와 height의 크기를 주면 div자체의 사이즈가 맞게 조정되지만
사진의 크기는 그에맞게 조정되진 않는다.
그럴땐
background-size: 100%; // div 가로 크기에 맞게 이미지를 맞게 꽉 채워주라 css에 부피를 지정해 주지않고
html에 div를 생성하면 텍스트가 없을땐 보이지 않는다.
하지만 css에 그 가로세로를 지정해 준다면 화면에 보인다.
css에서 태그 안에
background-image : url(주소);넣어준다면 사진추가 가능하다.
! 다만 img와 같은 용도로 사용하기 보단
의미없는 데이터이거나 웹페이지를 꾸미는 용도일때 사용하는 것이 좋다.
의미를 부여할 수 없기 때문 !
@inline > block / block > css
-css를 통해 inline스타일을 block으로 바꿀 수 있다.
display : block;또는 화면에 안보이게 할 수 있다.
display : none;(왜 안보이게 해? 나중에 js로 클래스 교체하여 보이게 할 수 있다. 그 새로운 클래스 안에는 display : block; 이 있을것, ex) 초록창의 연관검색어 >> 많이 쓰이는 방법이다)
-css를 통해 block을 inline으로 바꿀 수 있다.
float : left; (or right, none)
@block요소일때
가로값을 주면 더 이상 늘어나지 않는다.
이때 margin에 좌우를 auto로 설정하면
내용을 가로 중앙에 오게 할 수 있다.
html
<div>강민지</div>css
div{
margin : 10px auto;}