웹 페이지 만들기 - 2

12972 단어 CSSCSS

CSS

html이 뼈대였다면 css는 웹 문서들을 디자인하는 역할을 한다.
css를 적용해야 우리가 보는 웹페이지들이 그냥 글만 있는게아니라 이미지 색상등 꾸며져 나와 눈에 보기가 좋다. css는 자바스크립트와 연계해 동적인 콘텐츠 표현이나 디자인 적용도 가능하다.

CSS 적용하기

html 파일에 태그 사이에 태그 부분에 작성한다.
html 과 css 가 한 파일에 있으므로 작업이 쉽고 간편하다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>첫 웹페이지</title>
    <style>
      .css {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1 class="css">제목</h1>
  </body>
</html>

제목 h1의 class를 css로 선언해하여 이름을 만들어줘서 style 태그안에 css 이름을 입력하여 꾸밀 태그를 찾아준다.

다양한 css

위에 적용한 color 말고 다양한 css들이 있다.

배경관련

background-color
background-size
background-image

사이즈

width
height

폰트

font-size
font-weight
font-family
color

간격

margin
padding

간단하게 css를 적용하여 연습하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>첫 웹페이지</title>
    <style>
      .css {
        width: 300px;
        height: 200px;

        font-size: 20px;

        text-align: center;

        background-image: url("https://media.vlpt.us/images/kim-jaemin420/post/d7d8103c-656c-48bc-b549-4c20de84e2f5/css%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5.webp");
        background-size: cover;
        background-position: center;

        border-radius: 10px;

        padding-top: 40px;
      }
    </style>
  </head>
  <body>
    <div class="css">
      <h1>css연습하기</h1>
      <h5>다양한 css</h5>
    </div>
  </body>
</html>

div태그를 통해 박스를 만들었고 이름을 css로 지정해주었다
style태그 안에서 css이름을 가진 div태그를 꾸며준다.
박스 크기를 width와 heigth로 가로세로를 지정해서 너무 크지않게 했다.
background-img를 통해 이미지링크를 넣어 박스 안에 이미지를 나타나게 해주었고,
이미지를 박스안 가운데에 올 수 있게 background-size: cover, background-position: center;를 적용했다.
border-radius는 모서리들을 둥글게 만들기 위해 적용햇고 padding은 박스안쪽 여백을 조정하기위해서 위에서부터 40px정도 띄어 글씨가 가운데에 보이게 했다.

폰트 적용하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>첫 웹페이지</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap"
      rel="stylesheet"
    />
    <style>
      * {
        font-family: "Yeon Sung", cursive;
      }
    </style>
  </head>
  <body>
  	내용
  </body>
</html>

style 안 * 은 모든태그에 폰트를 적용하겠다는 뜻이다.
폰트는 마음에드는 것을 골라서 링크를 title태그 밑에 적어주었다.
폰트는 간단하게 적용할 수 있다.

1904 - 01타일
SpringBoot 초보 입문 (5)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage