웹개발 1주차

yurimLee·2023년 1월 29일
0

1. 브라우저

클라이언트가 서버에 네이버에 대한 정보를 요청하면, 서버는 클라이언트에게 HTML, CSS, Javascrpit을 전달한다.
ex) 크롬, 인터넷 익스플로러, 웨일

2. 코드 복붙

코딩에는 수많은 태그와 문법이 존재한다. (다 외우질 못 함)
필요한 게 있으면 복사해서 가져다 쓰고 내 입맛에 맞게 고친다 (코딩의 본질)

3. HTML 기본 골격

VS CODE에서 HTML을 입력하고 자동완성되는 HTML:5를 선택한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

4. CSS

CSS를 사용하기 위해선 명찰이 필요하다.
예를 들어, 누군가를 부르기 위해 이름을 불러야 한다.
h1 태그에 명찰을 달고 (HTML)
그 명찰에 스타일을 명령한다. (CSS)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mytitle {
            background-color: green;
            width: 300px;
      		border-radius: 10px;
            color: white;
      		text-align: center;
            padding: 30px 0px 0px 0px;
            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
        }
      
        .wrap {
            background-color: green;
            width: 300px;
            margin: 20px 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>

5. div

구역 div은 보이지 않기 때문에 을 제일 처음 꾸밀 때는 background-color를 사용하면 편한다.
기본적으로 div은 한줄을 다 먹는다.

<style>
  .mytitle {
      background-color: green;
      color: white;
 	  width: 300px;
  }
</style>

6. div 여백 주기

외부 margin, 시계 방향으로 위부터 시작 (위 - 오른쪽 - 밑 - 왼쪽)
내부 padding, 시계 방향으로 위부터 시작 (위 - 오른쪽 - 밑 - 왼쪽)

<style>
  .mytitle {
      background-color: green;
      color: white;
 	  width: 300px;
  
  	  padding: 30px 0px 0px 0px; /* 위 - 오른쪽 - 밑 - 왼쪽 */
  	  padding: 30px /* 4방향 모두 30px의 패딩값 */
  }
</style>

7. div안의 contnet를 정렬시키기 (4줄)

<style>
  display: flex;
  flex-direction: column;  /* column 세로 정렬, row 가로 정렬*/
  align-items: center;
  justify-content: center;
</style>

8. div안의 image 출력시키기 (3줄)

<style>
  background-image: url('https://movie-	phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
  background-position: center;
  background-size: cover; /*사진이 딱 맞게 나온다.*/
</style>

9. 단축키

  • 정렬 : shift + alt + f
  • 주석 : ctrl + /
  • 자동 완성 : tab

10. * 모두다

<style>
  * {
      font-family: 'Gowun Dodum', sans-serif;
  }
</style>

11. 주석

개발자에겐 보이는 컴퓨터에겐 안보이는 것
주석 단축키 : ctrl + /

/* 주석 처리할 내용 */

12. 라이브러리

style.css를 내 컴퓨터에 있는 것으로 가져올 수 있지만 (파일 분리), 인터넷에 있는 코드를 가져올 수 있다 (라이브러리).
누군가가 써놓은 코드 조각을 활용해서 개발한다.
login.html 파일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
    <!-- style.css 파일을 불러오기 -->
    <link rel="stylesheet" type="text/css" href="frontend/style.css">
</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>

style.css 파일

<style>
  @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
  
  .mytitle {
      background-color: green;
      width: 300px;
      border-radius: 10px;
      color: white;
      text-align: center;
      padding: 30px 0px 0px 0px;
      background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
      background-position: center;
      background-size: cover;
  }
      
  .wrap {
      background-color: green;
      width: 300px;
      margin: 20px auto 0px auto;
  }
</style>

13. 부트스트랩

예쁜 css 모음집
글을 쓰는 것도 이쁘게 글을 쓰는 것은 다르다.
css을 쓸 줄 알아도 이쁘게 만드는 것은 어려운 일이다.
이쁘게 만들기 쉽지 않은 개발자들을 위해 누군가 만들어 놓은 css를 가져다 쓰는 것이다.
[부스트트랩 시작 템플릿]

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
    <h1>이걸로 시작해보죠!</h1>
</body>
</html>

[부스트트랩 컴포넌트 5.0]
https://getbootstrap.com/docs/5.0/getting-started/introduction/

14. 깃허브 배포 주의할 점

index.html인 파일 하나만 있어야 한다.


1주차에는 정적 웹 페이지(단순 화면)을 개발해보았다.
이번 주차를 통해 모바일 청첩장 정도는 스스로 개발할 수 있어 만족한다

0개의 댓글