HTML_기본적 웹페이지 스타일링

▶️기본적 웹페이지 스타일링

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

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

---

▶️자주 사용하는 글자 스타일들

  font-size : 20px;
  font-family : 'gulim';
  color : black;
  letter-spacing : -1px;
  text-align : center; 
  font-weight : 600;

영어 단어를 잘 알고 있으면 직관적으로 어떤 스타일을 관리하는지 감이 올 것이다. 영어공부를 하도록 하자.

---

▶️이미지 정렬과 폭 조정

  display : block;
  margin-left : auto;
  margin-right : auto;
  width : 150px;
  height : 150px; 

1. 이미지는 보통 width를 많이 사용한다. px과 %같은 단위로 폭을 조정 가능하다.
2. 이미지를 가운데 정렬하고 싶으면margin-left : auto; margin-right : auto; 를 기입한다.

---

▶️텍스트의 일부만 스타일을 변경하고 싶을 때

  <p>안녕하세요 저는 <span style="color : red;">응애</span> 개발자입니다.</p>

1. <span>태그로 감싼 뒤 스타일을 준다. <span>태그는 글자 일부를 싸매고 싶을 때 사용하는 큰 의미없는 태그이다.
2. <span>은 display : block이 아닌 display : inline 속성을 내포하고 있어, 폭과 높이 등을 조절할 수 없다. 따라서 이 경우엔 해당태그를 감싸고 있고 block 속성을 가진 위의 <p> 태그에 준다.