티스토리 뷰

AI웹 개발자 과정 공부 (팀스파르타)/ChatGPT 웹 개발

24.02.13_TIL (HTML, CSS 웹 기본)

티아(tia) 2024. 2. 13. 21:27
728x90

 

[수업 목표]

  1. 웹 브라우저의 기본 원리에 대해서 이해한다
  2. HTML, CSS의 기초 지식을 이해하고 뼈대를 생성할 수 있다
  3. 부트스트랩을 활용하여 웹을 다양하게 구현할 수 있다

 

1. 웹 브라우저의 기본 원리

  1) 구글 검색 결과를 해킹해보자!

     

✅ 구글로 접속한 뒤 귀여움이라고 검색

  • 구글에서 귀여움을 검색하면, 오른쪽에 귀여움이 무엇인지 설명이 나오는데 귀여움의 설명을 한번 바꿔보자
  • 설명 부분(파란색 사각형)에 마우스 오른쪽 클릭을 눌러 검사 탭을 열자.

 

 

✅ 오른쪽에 뜨는 것은 개발자 도구. 개발자 도구에서 마우스를 올렸을 때 설명이 색칠되는 <span></span>부분을 더블클릭하고 내용을 바꿔쓰고 엔터를 눌러보자.

 

  • 내용에 '어떤것'을 추가하면 바로 바뀌는 것을 볼 수 있다. <span>귀여움의 정의에 '어떤것'을 추가</span>

 

   2) 웹의 동작 개념

 

✅  브라우저는 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 역할이다.

    • 우리가 보는 웹 페이지는 모두 서버에서 미리 준비해두었던 것을 “받아서” 브라우저에서 우리가 볼 수 있도록 “그려주는” 역할을 수행한다.
    • 즉 브라우저는 요청을 보내고, 요청의 답으로 받은 HTML 파일을 그려주는 역할
    • 요청은 서버가 만들어 놓은 API 라는 창구에 미리 정해진 약속대로 요청을 보내는데 바로 “주소창에 주소를 입력하고 엔터를 입력하는 것”으로 요청을 보내는 것이다.
    • 예시로 주소 창구에  https://naver.com/ 를 치면 네이버에서 그 대답으로 네이버 홈에 해당하는 HTML 파일을 주는 것이다. 우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML파일 돌려주고 브라우저는 받은 것을 화면에 그림으로 변환하여 보여준다. (HTML, CSS, JS 코드를)

 

   3) VS Code 설치하기 

 

✅ 프로그램 안에서 추가 프로그램을 설치해준다.

  • open in browser
  • Auto Close Tag
  • Auto Rename Tag
  • HTML End Tag Labels
  • indent-rainbow
  • Bracket Pair Color DLW

[파이썬 / SQLite / Flask]

  • Python
  • autopep8
  • SQLite
  • Flask-snippets
                •  

 

 

 

2. HTML, CSS 기본 내용

 

  1) HTML과 CSS의 개념

 

  • HTML 는 눈 두개 있다, 입 하나 있다 하고 말해줌 (뼈대)
  • HTML+CSS 는 그림으로 표현함.
  • HTML+CSS+JS 는 입체적으로 표현하고 움직이거나 늘리거나 할 수 있는 유동성이 주어짐. (동작)

 

 

✅ 프로그램을 만들어 보자.

  • 파일을 영어로 구성하여 만든다.(프로그램을 짤 때는 영어가 좋다.)

 

  • VS code 에서 파일 frontend를 연 후 새 파일 표시를 누른 후 index.html을 넣는다.

 

  • 코드를 적는 공간에 '!'를 넣으면 자동완성이 되어 html 뼈대가 만들어진다.

 

 

  • ctrl+b 를 누르면 탐색기 부분이 꺼진다.
  • <body> 밑에 빈칸에 h1을 입력후 tab을 누르면 코드가 생성된다. 그 안에 <h1>안녕하세요!<h1>을 친다.

 

 

  • index.html의 파일을 마우스 오른쪽 클릭후 Open In Default Browser을 누르면 인터넷 창이 뜨고 '안녕하세요!'라고 하는 흰 바탕에 글씨가 보인다.

 

 

  • head 부분의 title을 '웹개발'로 수정하면 Document가 웹개발로 바뀌어 보인다.
  • 아래의 코드를 복사해 입력하면 다음과 같이 나온다.

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

 

 

 

  • 주석 : 필요 없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 간단한 설명을 붙이고 싶을 때 쓰인다. [단축키 : ctrl+/ (맥은 Commend +/ )]를 코드에 입력하면 <!--구역 나누는 태그들-->로 표현할 수 있다.
  • 정렬 : 자동정리의 기능 [단축키 : Shift+Alt+f (맥은 Shift+Option+f)]  들여쓰기나 정리가 필요하면 수시로 눌러준다.
  • 개발자 도구 : 오른쪽 클릭 후 '검사'를 누르면 나오는 창에서 맨 위의 화살표 표시가 개발자 도구. 그걸 누르면 영역별로 확인하며 수정할 수 있다.

 

 

 

 

  ✅ 로그인 페이지를 만들어 보자.

      1) login.html 파일을 만든 후 '!'로 자동완성으로 코드를 만든다.

      2) title을 '로그인 페이지'로 바꾸어준다.

      3)  아래의 예시처럼 '로그인 페이지'를 만들기 위해 그 전에 썼던 tags.html에서 어떤 코드를 썼는지 가지고 와서 응용해 만든다.

 

 

 

* Alt+Shift+아래방향 화살표 : 윗줄을 아래줄로 복사 붙여넣기

 

 

 

 

3. CSS 기초 (선택자, 속성) 배우기

✅ CSS의 개념

 

  • 배경관련 background-color , background-image,  background-size
  • 사이즈 width, height
  • 폰트 font-size, font-weight, font-family, color
  • 간격 margin, padding
  • 배치 display

 

 

✅ CSS 기본 실습

 

 

 

  • /* css */ 주석 달기로 달아주었다.
  • id는 하나일 때, class는 여러개 일 때 쓴다.
  • </style></style> 안에 넣어야 색, 모양, 글자 크기등이 바뀐다.
  • id는 '#'과 함께 쓰이고 class는 '.'과 함께 쓰인다. class="mytitle" 이라고 제목을 정해주고 .mytitle{ color:red;}를 적으면 빨간색으로 바뀐다. class는 여러개이기 때문에 ID, PW 두개를 같은 제목으로 했을 때 같이 색이 변하는 것을 볼 수 있다.
  • <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /* css */
            .mytitle {
                color: red;
                font-size: 40px;
            }
            .mytxt {
                color: red;
            }
            #mybtn {
                font-size: 12px;
                color: white;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <h1 class="mytitle">로그인 페이지</h1>
        <p class="mytxt">ID: <input type="text" /></p>
        <p class="mytxt">PW: <input type="text" /></p>
        <button id="mybtn">로그인하기</button>
    </body>
    </html>

 

 

 

 

 

4. HTML로 레이아웃 만들기

✅ HTML 태그는 '누가 누구 안에 있느냐'를 이해하는 것이 가장 중요하다.

  • 빨간색 div 안에 초록색/파란색 div가 들어있습니다. 빨간색 div를 옮기면 내용물인 초록과 파란색 div도 같이 이동하고 색을 바꾸면 같이 글씨 색도 바뀐다.
  • 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다.

 

 

 

  • 여기에서 '자식 2' 코드를 [단축키 : Alt+화살표 아래키]를 누르면 코드 칸이 아래로 내려간다. '자식2'를 '부모2'로 옮겨본다.
  • 자식태그의 글자색도 변하는 것을 볼 수 있다. 이런 현상을 개발용어로 '상속'이라고 한다. 여백과 같이 상속이 되지 않는 속성도 있으니 참조만 한다.

 

 

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .parent1 {
                border: 2px solid black;
                padding: 10px;
                color: green;
            }
            .parent2 {
                border: 2px solid black;
                color: blue;
                padding: 10px;
            }
            .child {
                border: 2px solid red;
                margin: 10px;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <div class="parent1">
            부모
            <div class="child">자식1</div>
        </div>
        <br>
        <div class="parent2">
            부모2
            <div class="child">자식2</div>
            <div class="child">자식3</div>
            <div class="child">자식4</div>
        </div>
    </body>
    </html>

 

 

✅ Flex 연습 코드

 

레이아웃 배치를 위해서 사용하는 것이 Flex이다. Flex를 사용하면 메뉴 배치를 가운데 정렬을 할 때 많이 쓰인다.

 

 

 

  • 기본적으로 html은 박스의 형태로 차곡차곡 쌓이는 형태로 'block'과 'inline'이 있습니다.
  • Block : 위의 그림처럼 보라색의 긴 막대 형태로 1줄을 모두 차지하며 위에서 아래로 쌓인다.
  • Inline : 위의 글 'text' 처럼 가로로 배치된다.

 

 

  • Flex의 코드를 넣으면 원래 세로로 정렬되던 코드들이 가로로 정리되는 모습을 볼 수 있다.

 

 

 

  • justify-content: center 이라고 코드를 입력하면 가로축에서 가운데 정렬을 하는 모습을 볼 수 있다.

 

 

 

  • align-items 을 사용하면 세로축에서 가운데 정렬을 하게 된다.

 

 

 

 

  • 개발자 도구를 이용해 다양한 방향과 위치를 바꿀 수 있다.
  • <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
      .container {
        background-color: rgb(216, 216, 219);
        margin: 10px;
        padding: 7px;
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box {
        background-color: purple;
        color: white;
        margin: 5px;
        padding: 10px;
        border-radius: 5px;
        text-align: center;
      }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <span>text</span>
        <span>text</span>
        <span>text</span>
      </div>
    </body>
    </html>

 

 

 

반응형

'AI웹 개발자 과정 공부 (팀스파르타) > ChatGPT 웹 개발' 카테고리의 다른 글

24.02.17_TIL (자바스크립트 : 데일리모토)  (0) 2024.02.18
24.02.16_TIL (자바스크립트 : 함수, 리스트, 딕셔너리)  (0) 2024.02.16
1강 숙제  (0) 2024.02.15
24.02.15_TIL (멜로디쉐어 만들기)  (0) 2024.02.15
24.02.14_TIL (웹 페이지 구조 : 데일리모토 프로젝트)  (0) 2024.02.13
반응형
TAG
more
최근에 올라온 글