GPT 활용 웹개발 기초 1주차 HTML, CSS

웹의 동작 개념

브라우저는 요청을 보내고, 받은 HTML 파일을 그려준다.

 

• 우리가 보는 웹 페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서" 브라우저에서 우리가 볼 수 있도록 "그려주는" 역할을 수행
• 브라우저는 요청을 보내고, 요청의 답으로 받은 HTML 파일을 그려주는 일을 함

요청을 보내는 곳?

• 서버가 만들어 놓은 API 라는 창구에 미리 정해진 약속대로 요청을 보냄
• 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML 파일을 돌려주고 브라우저는 받은 것을 화면에 그려줌.

반환 형식?

• 항상 HTML 파일 형식으로 주지 않고 데이터만 내려줄 때가 더 많음.
• 많은 웹서비스에서는 API로 요청을 보내면 서버의 DB에서 데이터를 돌려주고, 브라우저에서 JS를 통해 새로운 데이터로 바꿈.
• 데이터만 내려올 경우에는 JSON 형식으로 내려옴.

 

HTML은 뼈대, CSS는 꾸미기

• HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드, 웹의 전반을 HTML을 통해서 작성할 수 있음.
• CSS는 HTML을 통해 작성된 뼈대의 속성을 선택해 예쁘게 꾸며주는 코드.
• HTML 내 style 속성으로 꾸미기를 할 수 있지만, CSS 파일을 HTML 코드 내에 불러와서 적용할 수 있음.
• CSS를 잘 사용하는 것과 '예쁘게' 만드는 것은 다른 영역임.

HTML-CSS-JS 예시

https://html-css-js.com/

 

HTML 파일 기본 뼈대 작성 방법 (VS Code 사용)

1.  VS Code에서 "파일명.html" 파일 작성
2. 코드 입력 부분에   !  입력 후 tab 키 사용
3. 내용 작성 후 alt + b 키로 웹페이지를 열어서 확인

HTML은 크게 head와 body로 구성

• head는 페이지의 속성 정보를 body는 페이지의 내용을 담음.

주석 사용

• 필요 없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
• 코드에 대한 간단한 걸명을 붙여두고 싶을 때
• ctrl + /(윈도우) 또는 command + /(Mac)

코드 정렬

• 코드를 쉽게 파악할 수 있게 정렬하는 기능
• shift + alt + f(윈도우) / shift + option + f(Mac)

유용한 단축키

1. 같은 코드, 같은 단어, 반복되는 코드 한번에 선택하는 단축키 Command + D = CTRL+D
2. 코드 한 줄을 위/아래로 이동하는 단축키 Option + ↑ 또는 ↓ = Alt+↑ 또는 ↓
3. 코드 한 줄을 위/아래로 복사하는 단축키 Option + SHIFT + ↑ 또는 ↓ = SHIFT만 누른상태에서 ↑ 또는 ↓

CSS 사용방법

• 꾸며줄 태그에 명찰(id, class)을 달아줌
• 선택자로 꾸며줄 태그를 정한다. (id는 #id명, class는 .클래스명, 태그는 태그 사용)
• 속성을 사용해 태그를 꾸며줌. (속성: 속성값 형식으로 사용)

HTML의 parent 구조

• html 태그는 하위 태그가 상위 태그에 영향을 받는다. (상위 태그의 내용이 바뀌면 그 아래 내용물이 모두 영향을 받음)

Flex 배치

• 레이아웃 배치를 위해 사용되는 기능
• block 속성 태그는 1줄 모두 차지하며 위에서 아래로 쌓임
• inline 속성은 글자처럼 가로로 배치됨

/* flex 사용 예시 */
.container {
    background-color: rgb(216, 216, 219);
    margin: 10px;
    padding: 7px;
    height: 50vh;

    display: flex;
    justify-content: center;
    align-items: center;

  }
  
<style>
	.navbar {
	    display: flex;
	    justify-content: space-between;
	  }
</style>

.weather {
    display: flex;
    align-items: center;
    margin-right: 30px;
  }
  
  .container {
  display: flex;
  flex-direction: column; /* Flex 안의 아이템들을 세로 방향으로 배치합니다. */
  justify-content: center; /* 주축 방향으로 가운데 정렬합니다. */
  align-items: center; /* 교차축 방향으로 가운데 정렬합니다. */
  height: 100vh;
	text-align: center;
}

 

• justify-center: 주축 방향으로 배치(주축이 가로일 경우 가로로 배치)
• align-item: 교차축(주축의 90도)으로 정렬(주축이 가로일 경우 세로 방향으로 정렬)
• space-between: 좌우 간격을 조정하여 수평 배치(3개를 정렬 할 경우 왼쪽, 오른쪽, 가운데로 정렬)
• margin: 요소 바깥 쪽 공간으로 다른 요소와의 거리를 조절함. (테두리 밖)
• padding: 요소와 테두리 사이의 거리를 조절함.
• flex-direction: column : flex 아이템들을 세로 방향으로 배치하고 가운데 정렬함
• 100vh: 화면 전체 높이만큼 크기 조절가능

css 파일 분리

• <style>태그 부분을 복사하고 style.css 파일을 html과 같은 폴더에 만든 후 파일 내에 내용을 붙여 넣는다.
• html 파일의 head 태그에서 style.css 파일을 불러온다

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

 

부트스트랩 사용 방법

• 부트스트랩 홈페이지의 Search 창에서 원하는 내용을 검색 혹은 좌측 사이드 바에서 선택
• 부트스트랩의 코드를 복사하여 html 파일 내에 부트스트랩을 사용할 위치에 붙여넣어 사용

/* 부트스트랩 주소 */
/* https://getbootstrap.com/docs/5.3/getting-started/introduction/ */

/* 사용 예시 코드 */
<nav class="navbar bg-dark border-bottom border-bottom-dark" data-bs-theme="dark">
  <!-- Navbar content -->
</nav>

/* <!-- Navbar content --> 위치에 부트스트랩 코드를 붙여넣어 사용 */
<nav class="navbar bg-dark border-bottom border-bottom-dark" data-bs-theme="dark">
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid ">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>

 

1주차 학습 내용 웹페이지 파일

motto.html

0.00MB

music.html

0.01MB