[웹개발] CSS 기본 지식

5963 단어 CSS웹개발pycharmCSS

💡CSS

• HTML 부모-자식 구조 : HTML 태그는, 나를 감싸고 있는 태그(부모 태그)가 바뀌면, 그 안의 내용물(자식 태그)도 모두 영향을 받습니다.
• CSS는 무언가를 꾸미기 위해 사용하는데, 꾸미기 위해서는 대상을 가르켜야합니다. 이처럼 명찰 역할을 하는 것이 class이고 class에 이름을 만들어, 꾸밀 대상을 지칭합니다.(아래 코드 참고)
• CSS는 head 안 style 공간을 만들어 작성 및 사용합니다.

예를 들어, mytitle라는 class를 가리켜 꾸미기 위해서는, head 안 style 부분에 .mytitle { ... } 라고 써줘야합니다.

• CSS에는 다음과 같은 것들이 있습니다.

👉배경
background-color
background-image
background-size
👉사이즈
width
height
👉폰트
font-size
font-weight
font-family
color
👉간격
margin
padding

👉전에 만들었던 간단한 로그인 페이지에서 h1 태그 부분을 꾸며봅니다.
h1 태그 부분에 class="mytitle" 부분을 추가해주어, 꾸밀 대상에 명찰을 만들어줍니다.
이후, head에 .mytitle{...} 부분을 추가해, mytitle class 대상으로 꾸미는 내용을 기술해줍니다.
저는 h1 태그 부분의 글씨를 빨간색으로 바꾸어주었고(color:red;) 글씨 크기를 60px로 해주었습니다.(font-size:60px)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <style>
        .mytitle{
            color:red;
            font-size:60px;
        }
    </style>
</head>
<body>
    <h1 class="mytitle">로그인페이지</h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인하기</button>
</body>
</html>

👉그 결과, 아래와 같이 h1 태그 부분이 원하는대로 바뀌었음을 확인할 수 있습니다.

스프링부트와 JPA활용2(API개발과 성능 최적화)1 - API개발 기본
[JavaScript30] 📋 24. Sticky Nav

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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