ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 웹개발 1주차 (서버-클라이언트, HTML, CSS)
      Python 2023. 4. 26. 22:06

      수업 목표
      1. 서버와 클라이언트의 역할에 대해 이해한다.
      2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
      3. Javascript 기초 문법을 익힌다.

       

      비주얼 스튜디오 코드 (Visual Studio Code) -> File -> Open Folder -> 기존에 만들었던 폴더 지정

      마우스 오른쪽 -> Open with live server 하면 실제 웹페이지가 나옴.

      html:5 하면 자동완성되어서 클릭하면 기본 폼이 나온다.

       

      저장하려면 Ctrl+S 누르기.

       

      ▼ 하면 아래와 같이 나온다.

       

      <head> 와 <head> 사이에 title 상우의 페이지 는 페이지의 제목

      </body>와 </body> 사이에 내용은 웹페이지의 내용

       

      <Head>에 사용되는 대표적인 태그는 <meta>, <title>, <script>, <link>등

      <body>에 사용되는 태그는 너무 다양해서 외우는것 불가능.

       

       

      1. 자주쓰이는 HTML 태그

       

      <div> : 구역을 나누는 태그 (박스 등)

      <p> : 문단을 나누는 태그

      <h1> : 큰글씨 (제목)  → 제일중요 (문서의 제목!)

      <h2> : 그다음 큰글씨 (부제목)

      <h3> : 그그다음 큰글씨

      <span> : 특정 글자를 꾸밀때.

       

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

       

      간단한 로그인 페이지 만들기

       

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>로그인페이지</title>
      </head>
      <body>
          <h1>로그인 페이지</h1>
          <p>ID: <input type="text"/></p>
          <p>PW: <input type="text"/></p>
          <button>로그인하기</button>
      </body>
      </html>

       

       

      2. CSS

       

      1. <head>태그 안에 <style>태그 추가
      2. <div>로 CSS적용할 부분을 묶고, 클래스명 지정
      3. .클래스명으로 원하는 클래스를 선택하고 {}안에서 CSS 적용

       

      <head>안에 <style> 태그를 생성하고,  .mytitle { }  ,  .mybtn { }  ,  .mytxt{ }  세개 만들어서

      color,   font-size,   background-color 입력하고 (이거 세개는 기본)

      그 아래 body에도 첫번째 꺽쇠 앞에 class="mytitle",   class="mybtn" ,   class="mytxt"  입력

       

      <!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{
                  color: red;
                  font-size: 40px;
              }
              .mybtn{
                  font-size: 40px;
                  color: white;
                  background-color: green;
              }
              .mytxt {
                  color: blue;

              }
          </style>
      </head>
      <body>
          <h1 class="mytitle">로그인 페이지</h1>
          <P class="mytxt">ID : <input type="text" /></P>
          <p class="mytxt">PW : <input type="text" /></p>
          <button class="mybtn"> 로그인하기</button>
      </body>
      </html>

       

      ▼CSS 더 꾸미기

      <style>  .mysytle { } 괄호안에 들어가는것

      background-color : 배경색
      width : 너비
      height : 높이
      border-radius : 박스 모서리 둥글게
      text-align : center;  글씨체 가운데


      margin: 20px 20px 20px 50px; (시계방향 -> 위, 오른쪽, 아래, 왼쪽) 바깥쪽 여백
      padding:  20px 20px 20px 50px; (시계방향 -> 위, 오른쪽, 아래, 왼쪽) 안쪽 여백

       

      백그라운드 이거 3개는 세트.
      background-image: url('  ');    괄호쉼표안에 이미지파일 url주소

      background-position: center;
      background-size: cover;

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

              background-position: center;
              background-size: cover;
          }
         </style>

      </head>
      <body>  
          <div class="mytitle">
              <h1>로그인페이지</h1>
              <h5>아이디, 비밀번호를 입력하세요</h5>
          </div>

          <P>ID : <input type="text" /></P>
          <p>PW : <input type="text" /></p>
          <button class="mybtn"> 로그인하기</button>
      </body>
      </html>
       
       

      tab버튼 : 오른쪽칸으로 한칸 정렬

      shift+tab : 왼쪽칸으로 한칸 정렬

      shift + alt + F : 정렬할 범위 드래그하고 단축키 누르면 자동정렬

       

       

      만든 로그인 화면을 가운데로 가져오기.

       

      ▼ <body>태그 안에 전체 내용물을 다시 <div>태그 안에 넣고,     <div class="wrap">으로 묶음.

       

      그리고 <style>태그에 . wrap { } 태그 넣어서 아래와 같이. background-color는 처음 화면의 범위를 알아야 하므로 색깔을 지정해주는 것이고, 나중에 없에도 됨. 

       

      margin:  20px  auto  0px  auto;  -> 여기서 auto는 쭉 밀어준다는 의미. 시계방향 순서대로 2번째, 4번째에 auto가 들어있으므로 좌, 우가 되는데 이렇게 하면 가운데 정렬이 됨. 감싸서 양쪽여백을 동등하게 만듦.

       

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

                  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>

       

      2-2 타인이 만든 CSS 활용법
      CSS 또한 모든 속성을 다 외우는 것이 아니라 구글링을 통해 필요한 부분을 찾아서 사용하는 것이 좋다. 

       

      폰트, 주석, 파일분리


      1. 구글 웹폰트 링크 : https://fonts.google.com/?subset=korean 
      2. 부트스트랩 링크 : https://getbootstrap.com/docs/5.0/components/alerts/

      3. 부트스트랩 카드 : https://getbootstrap.com/docs/5.0/components/card/

       

      ▼구글 웹폰트

      원하는 글자체에 select (view selected families) 클릭, @import 클릭후

      <style> 사이의 문자를 붙여넣기. 그 밑에 CSS rules to specify families 내용도 복사해서 * {  } 하고 중괄호 가운데 넣기.

       

      ▼주석 : 개발자에게는 보이나, 컴퓨터에게는 안보임.

      Ctrl + /

      타이틀 아직 고민중, 폰트 아직 고민중   이런식으로 사용가능. 코딩창에는 뜨나 웹페이지에는 안 뜸.

      <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>
              * {
                  /* 폰트 아직 고민중 */
                  font-family: 'Jua', sans-serif;
              }

       

      ▼CSS 파일분리

      <style> ~ </style> 부분이 너무 길어지면, 보기가 어려우므로 파일 분리가능.

       

      frontend에 새파일 (style.css) 만들고, 기존 html 파일 <style>에 있던 내용물 옮기기.

      <style>태그는 지우고, 원래 있던 자리인 <head>안에  <link rel="stylesheet" type="text/css" href = "style.css">넣기.

      "style.css"자리에 내 컴퓨터에 있는 파일을 넣을수도 있으나, 인터넷에 있는 파일을 넣을수도 있다. Library. 누군가가 써놓은 코드의 조각.

       

      ▼디스플레이 플렉스 (내용물 정렬) 4가지 기본 

      display: flex;
      flex-direction: column;  (가로정렬은 row)
      align-items: center;
      justify-content: center;


      background-image의 url 앞에있는 내용물은 이미지 어둡게하기 기능.

          <style>

              * {
                  font-family: 'Gowun Dodum', sans-serif;
              }

              .mytitle {
                  background-color: green;
                  color: white;

                  height: 250px;

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

                  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');   
                  background-position: center;
                  background-size: cover;
              }

              .mytitle>button {
                  width: 250px;
                  height: 50px;

                  background-color: transparent;

                  border: 1px solid white;
                  color: white;
                  border-radius: 50px;

                  margin-top: 20px;
              }

              .mytitle > button:hover {       →  꺽쇠 (>)표시는 mytitle 아래에 있는 button이라는 뜻., :hover는 버튼위에 마우스커서 올리면 모양바뀐다는 뜻
                  border: 2px solid white;      → solid는 실선이라는 뜻.
              }
          </style>
      </head>

      <body>
          <div class="mytitle">
              <h1>내 생에 최고의 영화들</h1>
              <button>영화 기록하기</button>
          </div>
      </body>

       

      .부트스트랩 카드 링크에서 Card 카테고리 여러개 있는 카드 클릭, 카드 크기가 일정한 것으로 골라야함.

      이미지 넣고, 개수 조절하기.

      `row-cols-md-3` → `row-cols-md-4` 로 바꾸기  → 한 줄에 3개에서 4개로 보여주겠다는 것을 의미

       

      <body>안에 <div class="mycards"> ~ </div> 만들고 그 안에 복사한 내용물 넣음.

      <img src = "  "> 여기에 카드 이미지 주소 넣기

       

      아래 "card title", "card text"도 내용수정.

      별점넣기, 코멘트 달기 : <p> 태그 활용. 코멘트는 class를 줘서 회색 글씨로

       

      위에 <style> ~ </style>     
        .mycomment {
                  color: grey;
              }
               
       
            <div class="card">
                          <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                          <div class="card-body">
                              <h5 class="card-title">영화 제목이 들어갑니다</h5>
                              <p class="card-text">여기에 코멘트가 들어갑니다</p>
                              <p>⭐⭐⭐</p>
                              <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
                          </div>
                      </div>

       

      포스팅박스 완성하기

      라벨 : https://getbootstrap.com/docs/5.0/forms/floating-labels/

      버튼 : 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

       

              .mypost {
                  background-color: green;     ->처음 코딩할때 하고 나중에 지우기.
                 
                  width: 500px;
                  margin: 20px auto 20px auto;
                  padding: 20px 20px 20px 20px;

                  box-shadow : 0px 0px 3px 0px grey;     -> 시계방향, 그림자. 
              }
              .mybtn {
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: center;

                  margin-top: 20px;   -> 버튼과 윗 간격
              }

              .mybtn > button {          ->mybtn 아래있는 button이라는 뜻
                  margin-right: 10px;   -> 버튼사이 간격
              }
       
       
      <div class="mypost">
              <div class="form-floating mb-3">
                  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                  <label for="floatingInput">영화 URL</label>
              </div>
              <div class="form-floating">
                  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
                  <label for="floatingTextarea">코멘트</label>
              </div>
              <div class="mybtn">
                  <button type="button" class="btn btn-dark">기록하기</button>
                  <button type="button" class="btn btn-outline-dark">닫기</button>
              </div>
          </div>

       

      별점 추가

      https://getbootstrap.com/docs/5.0/forms/input-group/

      -> custom forms

       

      GitHub에 파일 업로드하는 경우 index.html 이름이 있는 파일만 업로드가능

      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

       

      파일업로드하기 : create repository -> uploading an existing file  (이미 repository 있으면 안만들고 바로 파일 업로드)

      index.html 이름이 있는 파일만 업로드가능. 파일 업로드하고 commit changes

       

      setting -> branch -> none을 main으로 수정 save하면 공개파일로 전환됨.

       

      Visual Studio Code 에서 수정한뒤 GitHub에서 수정하려면, 

      <>code -> 업로드된파일 (index.html) 클릭-> 우상단 연필모양버튼 -> 내용 다 지우고 Visual Studio Code 코딩내용 복붙.

      'Python' 카테고리의 다른 글

      웹개발 4주차 - 2 (메타태그)  (0) 2023.05.03
      웹개발 4주차 (백엔드-프론트엔드, 프로젝트1 : 화성땅 공동구매)  (0) 2023.05.02
      웹개발 3주차 (파이썬, 크롤링, 지니뮤직 예제)  (0) 2023.05.01
      웹개발 2주차 (Java Script, JQuery, Fetch)  (0) 2023.04.27

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바