HTML에 간단 스타일 넣기

HTML에 간단 스타일 넣기

<p style="font-size : 20px; color : red"> 글자 </p>

거의 모든 태그는 style="" 이라는 속성을 열 수 있다.
속성 안에 스타일이름 : 스타일값; 형식으로 넣으면 된다.
여러개를 넣고 싶다면 뒤에 쭉 나열 가능

자주 사용하는 글자 스타일

font-family : 'gulim';
color : black;
letter-spacing : -1px;
text-align : center;
font-weight : 600;
<strong></strong>

• 일부 글자만 스타일 주고 싶을 때

<p>안녕하세요 저는 <span style="color : red;">초콜렛을</span> 먹고 있습니다.</p>

안녕하세요 저는 초콜렛을 먹고 있습니다.

<span> 이라는 태그로 감싼 뒤에 스타일을 줄 수 있다.
(<span> 태그는 글자 일부를 따로 묶고 싶을 때 사용하는 큰 의미없는 태그)

(참고) span 태그는 display : inline 이라는 스타일 속성을 내포하고 있으며,
display : inline을 가지고 있는 요소는 폭, 높이 등을 단독으로 결정할 수 없다.
폭, 높이를 주고싶으면 얘를 감싸고 있는 <p>에 작성해야 한다.

배경 관련 CSS 속성들

.main-background {
  background-image : url(../img/shoes.jpg);
  background-size : cover;
  background-size : contain;
  background-repeat : no-repeat;
  background-position : center;
  background-attachment : fixed;
}

cover은 div박스에 배경으로 꽉 채워 주세요
contain은 배경이 잘리지 않게 꽉 채워 주세요
background-position : center;는 가운데 부터 배경을 채워주세요
background-attachment : fixed;는 background가 스크롤 될 때 동작을 줄 수 있는 속성

배경겹치기, 틴트 주기

.main-background {
  background-image: linear-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0.5) ), url(이미지경로~~) ;
  filter: brightness(70%)
 }

inear-gradient 이건 색이 점진적으로 변하는 gradient를 줄 수 있는 키워드이며,
여기에 투명도 0.5의 검은색을 입힌 후에 배경겹치기 사용하면 된다.

이미지 정렬과 폭 조정

margin-left : auto;
margin-right : auto;
width : 150px;

이미지는 width 많이 사용하며, px 혹은 % 이런 단위로 폭을 조정가능하다.
이미지 가운데 정렬은 display : block; margin-left : auto, margin-right : auto를 입력할 수 있다.