코딩학습 기록 - web개발

OASIS-WIFAG 2022. 11. 25. 12:26

2022. 11. 25. 12:26

학습을 시작하며..

코딩 학습을 시작했다.
목표는 웹사이트를 제작하고 코딩을 통해 웹에서 데이터를 처리하는거.

웹개발과 파이선을 동시에 배우려니 힘은 들지만 하나하나 정복해 나가는 맛이 좋다.
이제 첫걸음!
html 과 낯설었던 css 를 익혔다.
파이참 설치로 많은 문제를 겪었는데 제대로 돌아간다. 이것때문에 진도가 안나갔었는데 이제 안정된거 같다.
css 라이브러리를 가져오는 것부터 변형해서 쓰는방법까지 막연했던 방법들이 정리가 되간다.
Bootstrap 에는 참 많은 것들이 있다.

크롤링은 구글스프레드시트에서 연습해 봤던 건데 파이선 코딩으로 구현하니 훨씬 더 편하다.
특히 좋은건 원하는 대로 가공할 수 있다는 거고.
좀더 학습하며 어디에 응용할지 생각해 봐야겠다.

브라우저의 Inspect 구조를 좀 더 파악해 봐야겠다.

1주차 pass

가운데정렬

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

구글폰트 사용하기

<!--  구글폰트 사용하기. 아래 style 밑의 *{font-family~} 와 짝이다-->
  <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

/*구글폰트 사용하기. 위 title 및의 link 와 짝이다*/
* {
  font-family: 'Gowun Dodum', sans-serif;
}

백그라운드 이미지

/*백그라운드 이미지 3종세트*/
/*1. 이미지 url*/
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)),url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
/*위 linear-gradient 부터 url 앞의 , 까지는 이미지를 어둡게 하는 설정이다*/
/*2. 이미지 위치*/
background-position: center;
/*3. 이미지 크기*/
background-size: cover;
color: white;

자동정렬

/*자동으로 정렬해주는 팁. 4종세트*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

class 경로지정

/*class 를 따로 지정하지 않고 경로로 class 지정을 할 수도 있다. 아래처럼.*/
.mytitle > button {
  width: 200px;
  height: 50;
  background-color: transparent;
  color: white;

  border-radius: 50px;
  border: solid white 1px;
  margin-top: 10px;


}

테두리 변화

/*커서가 올라가면(hover) 테두리가 두꺼워지는 설정이다. 2px 로 바뀌어 보여진다.*/
.mytitle > button:hover{
  border: solid white 2px;
}

입력상자 set

<style>
.mypost{
    width: 500px;
    margin: 20px auto 0px auto;

    box-shadow: 0px 0px 3px 0px gray;
    padding: 20px;
  }
</style>

<body>
<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="input-group mb-3">
    <label class="input-group-text" for="inputGroupSelect02">별점</label>
    <select class="form-select" id="inputGroupSelect02">
      <option selected>--선택하기--</option>
      <option value="1">★</option>
      <option value="2">★★</option>
      <option value="3">★★★</option>
      <option value="4">★★★★</option>
      <option value="5">★★★★★</option>
    </select>
  </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">
  </div>
<body>

2주차

jQuery $

card 붙이기 중단...

저작자표시 비영리 변경금지

'Computing' 카테고리의 다른 글

코딩학습 기록 - 파이썬 데이터분석 (0)	2022.11.28
코딩학습 기록 - 파이썬 데이터분석 (0)	2022.11.27
iPAD - 갑자기 애플펜슬이 이상하다....딜레이 발생문제 해결. (8)	2022.03.15
iPAD - Pages 섹션삽입은 어떻게? (0)	2022.03.14
Numbers - 환율을 불러오는 함수 (0)	2022.03.14

OASIS-WIFAG