1. HTML, CSS 기초

Programming Language/HTML, CSS

1. HTML, CSS 기초

wakelight23 2024. 10. 22. 18:01

서버(Server), 클라이언트(Client)

● 웹(Web)의 동작 개념

- 브라우저는 그려주는 역할 > 요청을 보내고 받은 HTML 파일을 그려주는 것

즉, 브라우저는 요청을 보내고, 요청을 답으로 받은 걸 그려주는 것

● 요청은 어디에 보내는 걸까?

- 서버(Server)가 만들어 놓은 API 라는 창구에 미리 정해진 약속대로 요청을 보내는 것

=> 크롬 브라우저에서 주소 창에 주소를 입력하고 엔터를 입력하는 것으로 요청

● 우리가 흔히 쓰는 크롬(=브라우저)에서 주소를 통해 API로 요청을 보내고,

API는 요청에 맞는 HTML파일 돌려주고 크롬(=브라우저)는 받은 것을 화면에 그림

● 항상 HTML 파일로 돌려주는가?

- 데이터만 받아서 갈아 끼우는 식으로 작동

HTML

● 웹페이지에서 뼈대 역할

- <head> : 페이지 속성 정보 (대표적 요소들 : meta, script, style, link title 등)

- <body> : 페이지의 내용 (대표적 요소들 : span, img, inpujt, 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> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

▼ 각 기능별 설명

CSS

● HTML이 뼈대라면 그 뼈대를 꾸미는 기능

- CSS는 꾸미기를 할 때 필요한 기능을 검색해서 사용하면 됨

- 예시로 모서리를 둥글게 만든다라고 하면 ▼ ▼ ▼

배경관련
background-color
background-image
background-size

사이즈
width
height

폰트
font-size
font-weight
font-family
color

간격
margin
padding

● 로그인 페이지를 만든다면?

<!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>

▼ 결과물

HTML에서 CSS를 적용해서 글씨에 색깔이나 폰트 크기처럼

사용하는데 문제가 없도록 만들어 주는 것. (가독성이 좋은 것)

1. HTML, CSS 기초

서버(Server), 클라이언트(Client)

HTML

CSS

그것이 CSS