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

<p>
    <a href="https://naver.com">
    </a>
</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <img src="v.jpg" style="width: 100px; margin-left: auto; display: block; margin-right: auto">
  <h3 style="font-size: 20px; color: brown;letter-spacing: 2px; text-align: center;">LEEAN</h3>
  <p>FullStack Developer</p>


</body>
</html>

거의 모든 태그는 style="" 이라는 속성을 열 수 있습니다.

거기 안에 스타일이름 : 스타일값; 형식으로 스타일을 넣으면 됩니다.

여러개를 넣고 싶다면 뒤에 쭉 나열해주시면 됩니다.

세미콜론 까먹으면 안됩니다.

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

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

이미지 정렬과 폭 조정

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

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

 <p>
  <span style="color : red;">  FullStack </span>
  Developer
 </p>

<span> 이라는 태그로 감싼 뒤에 스타일을 주면 됩니다.

<span> 태그는 가끔 글자 일부를 싸매고 싶을 때 사용하는 큰 의미없는 태그입니다.

<strong> 태그로 글자 일부를 싸매면 간단히 굵게 표현도 가능합니다.

(참고) span 태그는 display : inline 이라는 스타일 속성을 내포하고 있으며,

display : inline을 가지고 있는 요소는 폭, 높이 등을 단독으로 결정할 수 없습니다

폭, 높이를 주고싶으면 얘를 감싸고 있는 <p>에 주십시오

개발자 포트폴리오 사이트

✨ 과제. 내 프로필 페이지 꾸미기 (20분)

짤막한 소개글

Last updated