HTML과 CSS의 기초

Cozler·2024년 8월 12일

CSS body div h1 head html vscode 기초 로그인 만들기 정렬 태그

WEB기초

목록 보기

2/9

HTML과 CSS의 기초

1. HTML과 CSS의 개념

HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드이다. 웹의 전반을 HTML을 통해서 작성할 수 있다. CCS는 HTML을 통해 작성된 뼈대를 예쁘게 꾸며주는 코드이다.
하지만 CSS를 잘 사용할 줄 아는 것과 '예쁘게' 만드는 것은 다른 영역이기 때문에, 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 된다.

2. HTML의 시작

VSCode에서 !를 입력하고 엔터를 누르면 VSCode에서 제공하는 기본 HTML 뼈대가 자동으로 생성된다.

위 그림처럼 !를 입력하면 자동완성 추천 선택지가 뜬다. 그대로 엔터키를 누르면 선택된다.

그러면 위 그림처럼 HTML의 가장 기초적인 뼈대가 자동으로 생성된다. 보이는 것처럼 HTML의 기본 뼈대는 크게 <html> 태그와 <head>, <body> 태그로 이루어져있다.

3. HTML의 기본적인 태그들

<html> : HTML 전체 속성 정보를 담는다.
<head> : 페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다. 즉 눈에 보이지 않는 필요한 것들을 담는 역할을 한다. head 안에 들어가는 대표적인 요소들로는 meta, script, style, link, title 등이 있다.
<body> : 페이지의 내용을 담는다. 실질적인 뼈대를 담당한다. 즉 눈에 보이는 것들을 담는 역할을 한다. body 안에 들어가는 대표적인 요소들로는 span, img, input, textarea 등이 있다.

아래의 예시를 보며 태그들이 어떤 방식으로 사용되는지 확인해보자.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>구역을 나누는 역할을 한다.</div>
    <p>하나의 문단을 입력할 수 있게 한다.</p>
    <ul>
        <li> 리스트1 </li>
        <li> 리스트2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그. 페이지마다 하나씩 써주는 것이 좋다.</h1>
    <h2>h2는 소제목이다.</h2>
    <h3>h3~h6. h 뒤 숫자가 커질 수록 글씨가 작아지며 6이 끝이다.</h3>
    <hr>
    <span style="color:red">특정 글자</span>를 꾸밀 때 사용한다.
    <hr>
    <a href="http://www.naver.com/"> 하이퍼링크 </a>
    <hr>
    <img src="https://jubangtong.com/web/product/big/201811/413e7798011fedb0a38507e9c267a807.jpg" />
    <hr>
    input 만들기 : <input type="text" />
    <hr>
    버튼 만들기 : <button> 버튼 </button>
    <hr>
    textarea 만들기 : <textarea> 무엇이든 입력하세요 ~ </textarea>
</body>

</html>

TIP1> 코드를 정렬해주면 훨씬 가독성이 좋아진다. 본인의 코드는 물론이고, 타인과 협업을 함에 있어서도 정렬은 필수이다. VSCode에서 Shift + Alt + F (맥은 Shift + Option + F)를 누르면 자동정렬 기능을 사용할 수 있다.

TIP2> Live Server 익스텐션이 설치되어있다면 Alt + B 키를 눌러 구글탭으로 현재 작성한 HTML 문서의 실제 모습을 확인해 볼 수 있다.

위 코드의 실제 모습을 보면 아래 사진과 같다.

4. HTML로 간단한 로그인 페이지 만들어보기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인</title>
  </head>
  <body>
    <h1>로그인 페이지</h1>
    <p>ID : <input type="text" /></p>
    <p>PW : <input type="text" /></p>
    <button>로그인</button>
  </body>
</html>

5. CSS로 로그인 페이지 간단하게 꾸며보기

5.1. CSS는 어떻게 사용하나?

<head> ~ </head> 안에 <style> ~ </style>로 공간을 만들어서 작성한다. style 태그 안에 CSS 문법에 맞게 꾸밀 내용을 적어주면 된다.

CSS로 HTML을 꾸미기 위해서는 지칭하는 대상이 중요하다. 예를 들어 mytitle이라는 클래스를 꾸며주고 싶다면 .myltitle { 어떻게 꾸밀지 작성 } 이런 형식으로 .을 붙여 해당 클래스를 지목해야한다.

5.2. CSS 사용 예시

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .mytitle {
            color: red;
            font-size: 40px;
        }

        .mybtn {
            font-size: 12px;
            color: white;
            background-color: green;
        }

        .mytxt {
            color: red;
        }
    </style>
</head>

<body>
    <h1 class="mytitle">로그인 페이지</h1>
    <p class="mytxt">ID: <input type="text" /></p>
    <p class="mytxt">PW: <input type="text" /></p>
    <button class="mybtn">로그인</button>
</body>

</html>