> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/html-css/undefined.md).

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

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

```html
<!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="" 이라는 속성을 열 수 있습니다.

거기 안에 <mark style="color:green;">**스타일이름 : 스타일값**</mark>**;** 형식으로 스타일을 넣으면 됩니다.

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

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

&#x20;

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

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

**이미지 정렬과 폭 조정**

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

\
**텍스트의 일부만 스타일을 변경하고 싶을 때**&#x20;

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

```

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

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

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

&#x20;

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

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

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

&#x20;

개발자 포트폴리오 사이트

{% embed url="<https://kijepark.com/>" %}

{% embed url="<https://zero-base.co.kr/event/media_insight_contents_FE_frontend_portfolio_web>" %}

{% embed url="<https://altmshfkgudtjr.github.io/>" %}

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

&#x20;    짤막한 소개글&#x20;
