Dev/HTML-CSS

[HTML/CSS] HTML, CSS (기초)

syuare 2025. 3. 18. 17:26

 

오늘 할 것 

  • HTML, CSS 기초 공부
    • (왕초보) 웹개발 종합반 - 강의 듣고 예시 따라해보자.

오늘 배운 것

  • 앱, 게임 등 개발은 웹개발로 입문!?
  • 기존 HTML / CSS 코드를 수정해본 경험이 있긴 한데, 기초부터 배운 적은 없어서 처음부터 해보니 C언어 배울 때 printf 처음 써봤을 때의 느낌!

 

 

웹브라우저의 동작원리

  • "클라이언트"가 요청하면 "서버"가 요청 내용을 제공한다.
  • 손님이 원하는 것을 요청하면 가게 주인이 손님이 원하는 것을 준비해서 제공한다는 느낌인듯!

예시 따라하기

  • 로그인 페이지에서 보여주고 싶은 것의 뼈대를 그린다. → HTML

(왼) 직접 해본 것 / (오) 강의 예시

 

  • 보여주고 싶은 것을 보기 편하게 꾸며준다. → CSS

강의 예시 직접 따라하기

 

더보기

HTML/CSS 코드

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

        *{
            font-family: "Jua", sans-serif;
        }

        .mytitle {
            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

            padding-top: 30px;
            border-radius: 8px;

            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
        }
        .wrap {            
            width: 300px;
            margin: 50px auto 0px auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="mytitle">
            <h1> 로그인 페이지 </h1>
            <h5> 아이디, 비밀번호를 입력해주세요 </h5>
        </div>

        <p>ID: <input type="text" /></p>
        <p>PW: <input type="text" /></p>
        <button>로그인 하기</button>
    </div>
</body>

</html>

 

오늘 배운 것 중에 어려운 점이 있었나? 

  •  아직 너무 기초라 어려운 점은 없었음.

내일은 무엇을 해볼까?

  • [왕초보] 웹개발 종합반 강의 시청 및 예시 따라해보기 (1주차 마무리, 2주차)
    • HTML, CSS - 추억앨범 프로젝트 (부트스트랩 활용)
    • Javascript - 기초

시간이 좀 더 남으면 이후 주차도 진행해보자!