본문 바로가기
TIL

TIL[23.05.09.]웹개발종합반 1주차

by heediv 2023. 5. 9.
반응형

국비지원으로 스파르타코딩클럽 내일배움단과 내일배움캠프를 시작하였다.

내배캠은 5월15일 부터 시작이므로 사전캠프로 게더를 통해 팀원들과 소통하고 서로 응원하며 나태해질수 있는 혼공을 잘 진행할수 있도록 해준다.

현재 나는 웹개발종합반을 3주차 까지 듣고 혼자공부하는 자바스크립트를 5단원보다가

다음주 본캠프를 위해 웹개발 종합반을 완강하는 것이 좋겠다는 말을 듣고 다시 웹개발종합반을 보기로했다.

 웹개발종합반은 1주당 약 18강정도 5주차까지 강의가 있지만 짧아서 금방 볼수 있을것같다.

주말까지 하루에 한주차씩 듣고 웹개발종합반을 모두 수료한 뒤

다음주 15일부터 내일배움캠프 실전강의를 들을것이다.

 

 

1주차 배운내용

 

-VS code 다운로드

-확장프로그램: Live Server/ Korean Language Pack for Visual Studio Code 설치

-VScode에서 html:5 입력하면 html의 기본구조 자동생성

-html의 기본태그 

<!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>
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

html은 기본뼈대 CSS는 꾸미기 Javascript는 움직이기

<h1></h1> 태그는 웹페이지당 1개 꼭 넣어주기

 

-로그인 페이지만들기

-CSS 꾸미기

   박스는 무조건 <div></div> 이 태그는 한줄 다 먹음 구역을 알기위해 background-color 먼저 지정해줌

 

tip! VScode 정렬하기 : Shift+Alt+F

<!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;
          height: 200px;

          border-radius: 10px;  //모서리 둥글게;
          color: white;

          text-align: center;  //가운데정렬;

          padding: 30px 0px 0px 0px;      //padding-top: 30px;과 같음;

          background-position: center;
          background-size: cover;
      }
      .wrap{
        width: 300px;
        margin: 20px auto 0px auto; //위 오른쪽 아래 왼쪽순서, 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>

 

위 코딩의 결과물

-폰트변경

https://fonts.google.com/?subset=korean 

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

원하는 폰트 선택 후 Remove Regular 400 클릭 

오른쪽창에서 @import 선택후 복사 <style>바로 아래 붙여넣기

오른쪽창 아래쪽에 font-family 복사 후 *{} 중괄호 안에 넣기

코딩에서 *은 '모두다'라는 뜻

-주석:개발자 눈엔 보이는데 컴퓨터는 인식 못함

Ctrl+/

(위에서 //치고 썼는데 웹페이지에서 보이진 않았지만 하얀색 글씨여서 이상하다고 생각했는데 Ctrl+/ 써야하는 것을 알았음)

-파일분리

부트스트랩=예쁜 CSS모음집 사용하기

VScode에서 새파일'index.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/components/buttons/

 

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

위 주소에서 원하는 버튼 복사하여 <h1>태그 아래 붙여넣기 하였다.

 

 

*스파르타피디아(영화 리뷰페이지 만들기)

1) login.html과 같이 뒷배경에 제목및 버튼만들기

2) 부트스트랩을 이용하여 카드 만들기

    위에 버튼 만드는것과 같이 부트스트랩을 이용하여 카드를 만들어보았는데

    카드의 class를 clas로 오타내어 적용이 안되었다.

    오타를 주의하자!

3) 포스팅박스 만들기

    부트스트랩에서 Forms(양식)→Floating labels(플로팅 레이블) 복붙 및 수정 후 CSS 

*내가 만든 웹페이지 배포하기(정적웹페이지)

Github : 인터넷에 코드를 업로드 할 수 있는 사이트

https://github.com/

 

GitHub: Let’s build from here

GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...

github.com

 

 

Github사이트 문제로 웹페이지 배포하기는 직접 해보진 못했지만 강의보면서 눈으로 익히기를 해보았다.

내일 다시 해보는 걸로! 웹개발종합반 1-17,18,19강

강의 tip: Github에 파일 업로드시 index.html만 가능!

 

 

 

 

반응형

'TIL' 카테고리의 다른 글

[23.05.14.]웹개발종합반 4주차  (0) 2023.05.14
TIL[23.05.12.]웹개발종합반 3주차  (1) 2023.05.12
TIL[23.05.11.]웹개발종합반 3주차  (0) 2023.05.11
TIL[23.05.11]웹개발종합반 2주차 후반  (0) 2023.05.11
TIL[23.05.11.]웹개발종합반 2주차 전반  (1) 2023.05.11

관련글

티스토리툴바