웹개발 1주차

yurimLee·2023년 1월 29일

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>