웹개발 1주차 개발일지

박종성·2023년 2월 3일
0

<웹개발 1주차 배운내용>

  1. 서버/클라이언트/웹의 동작 개념
    1) 네이버 웹 페이지 해킹
  • 내 페이지만 조작할 수 있다.
  • 인터넷/와이파이를 꺼도 이미 보이고 있는 홈페이지에는 영향이 없다.
  • 새로고침을 하면 다시 처음으로 돌아간다.

브라우저의 역할_내가 요청한 자료를 가져다가 보여주기만 한다.

브라우저는 서버한테 요청을 함 → 서버는 HTML, CSS, Javascript를 제공함

이미 네이버는 받아왔기 때문에(다운로드 했기 때문에) 내 마음대로 고칠 수 있음

  1. 필수 프로그램 설치
  • VS code / live / korean
  • html:5
  • 저장: ctrl + s
  • 오른쪽 마우스 클릭 후 Open with Live server 클릭 시, 웹 페이지 생성
  • html은 head 와 body로 구성되어 있음
  • head: 눈에 보이지 않지만 웹페이지의 중요한 부분 ex) 검색엔진이 내 사이트를 퍼갈 수 있도록 하는 장치 , CSS, Javascript
  • body: 눈에 보이는 웹페이지의 아래 부분(작업되어 있는 페이지)
  • h1: 문서의 제목을 나타내주는 태그(페이지마다 꼭 하나씩 넣어주어야 함)
  1. HTML, CSS
  • HTML : 뼈대 / CSS : 꾸미기 / Javascript : 움직이기
  • tags.html 의 태그를 이용해 로그인 페이지 만들기
  • CSS: 꾸미는 대상의 이름이 있어야함(태그를 지칭하는 것도 마찬가지)
    - 꾸미려고 하는 태그에 명찰을 달아주기
    class= 객체 생성을 위한 틀
    style은 head 안에 생성
    button, h1 등 은 body안에 생성
    - 핵심: 가리키고 꾸민다! 변경하고자 하는 태그 내용을 모를 경우 구글에 검색! ex) “css 모서리 둥글게”
  1. 자주 쓰이는 css 연습
  • 박스 나오면 무조건 div(구역)

  • 박스의 경우 맨 처음 색 구분을 위해 컬러를 지정해 줄 것!

  • div는 처음 지정 시 한 줄을 다 차지함. 따라서 사이즈를 맞춰주어야함. ex) width: 300px; / height: 200px;

  • px은 코딩에서 쓰는 단위

  • border는 모서리 관련된 꾸며주는 태그(border, border-radius 주로 사용)

  • text-align: center 는 글자의 가운데 정렬

  • 여백

  • 바깥쪽으로 여백은 margin 사용 ex) margin: 20px 20px 20px 20px (위 오른쪽 밑 왼쪽 순으로 시계방향으로 설정)

  • 안쪽으로 여백은 padding 사용 ex) padding: 20px 20px 20px

  • 위 여백만 주고 싶은 경우 padding-top 사용 ex) padding-top: 30px;

  • 배경(background)

  • 배경은 항상 세 줄이 같이 다님(image / position / size)
    ex) background-image: url(’ 이미지 url 링크 주소 ’);
    ex) background-position: center(이미지의 가운데 부분);
    ex) background-size: cover; (cover: 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소)

  • 구역(div)과 문단(p)을 가운데 정렬하는 법

  • 구역과 문단을 박스로 씌운 후 (div) 양쪽 여백을 같게 설정

  • 태그 정렬하는 법 : shift + alt + F

  1. 폰트, 주석, 파일 분리
  • style 태그 안에 구글 웹 폰트에서 원하는 폰트 찾아 @import url 넣어주기
  • 원하는 폰트 찾아 클릭 후 selected family → @import url
  • 그리고 *(”모두 다” 의미) { font-family: 넣어주기}

- 주석: 개발자의 눈에는 보이는데, 컴퓨터한테는 안 보이는 것
→ 원하는 부분 전체 드래그 후 “ctrl + /” 클릭 시 초록색으로 바뀌게 됨

  • 내가 아직 정해지지 않은 것에 대해 메모를 하고 싶을때
    ex) 폰트 아직 고민중

  • 주석의 경우 태그마다 모양이 다르므로, 단축키를 외우는게 핵심!

  • 파일 분리: 내용이 너무 길어지게 되면 한 파일에서 보기 쉽게 하기 위함.

  • 인터넷에 있는 코드를 가져오는 것을 library라고 부름

    <부트스트랩, 예쁜 CSS 모음집>

    • css는 예쁘게 만들기 어렵기 때문에 누군가가 만들어 놓은 예쁜 코드 조각 혹은 꾸러미를 사용하는 것

    • 가장 유명한 꾸러미는 부트스트랩

    • 부트스트랩에 있는 코드 조각을 맞는 위치에 잘 붙이면 힘들게 코드를 입력하지 않아도 예쁘게 꾸밀 수 있음.

    • div의 내용물을 정렬시키려면

    • display flex : 내용물을 정렬시키는 방법

    • display flex는 항상 네 줄이 같이 다님(display: flex; / flex-direction: column; / align-items: center; / justify-content: center;) → 내용물을 세로로 정렬시켜라

    • display flex는 항상 네 줄이 같이 다님(display: flex; / flex-direction: row; / align-items: center; / justify-content: center;) → 내용물을 가로로 정렬시켜라

      div 안에 내용물을 건드릴때 padding을 쓸 필요가 없음.

    • 버튼은 마이타이틀 아래에 있는 버튼으로 .mytitle > button { } 이렇게 코드를 사용할 수 있음.

    • h1일 경우, .mytitle > h1 { }

    • background-color: transparent; → 배경색 없애기

    • border: 1px solid white; → 1픽셀의 실선 하얀색 이라는 뜻

    • button:hover {} → 버튼의 마우스를 올렸을 때 태그나 속성을 선택(효과를 주기 위해 사용)

      ex) .mytitle > button:hover {border: 2px solid white;}

    • 배경 이미지 어둡게 하기: background url 앞에 , (콤마) 넣고 그 앞에 linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) 입력

      ex) background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(' 이미지 링크');

    • 남이 만들어 놓은 코드를 쓸 때는 조금씩만 고쳐서 쓰는게 답!

    • 부트스트랩 card 복사 후 사용 시, div를 만들고 복사 내용 삽입 ex) div class=”my cards”

    • 코드 내용이 많은 경우 숫자 옆 방향 표시를 눌러 닫을 수 있음

    • card 코드의 md 는 한 열에 들어가는 카드 페이지 수를 의미

    • card 코드의 img 는 img 링크를 삽입하면 됨

    • 코드를 한 세트 만들어서 필요한 만큼 복사하면 됨(복사 할 때는 방향 표시를 눌러 닫은 후 복사하면 편함)

    • box-shadow 는 그림자를 주는 것으로 아래 옆의 방향으로 부터 얼마나 먼지를 나타내며, 보통 3번째 픽셀(그림자의 길이)만 주로 바꿔 사용

    • 지금 까지 만든 웹 페이지를 “정적 웹 페이지” 라고 함 → 페이지가 있고 내가 그냥 보는 것

      정적 웹페이지는 배포가 간단함. 가장 대표적인 경우가 “모바일 청첩장”

  1. 깃허브(github)
    • 인터넷에 코드를 업로드 할 수 있는 사이트

    • 개발자들이 서로 협업을 할 때 코드를 올려 놓을 장소가 필요. 깃허브에 코드를 올려 놓음으로써 협업 실시

    • 배포 방법

      • 로그인 후 Create repository 클릭 → repository name 기입 → Description 제목 작성 → Create repository 클릭 → uploading an existing file 클릭 → 업로드 파일(index.html) 끌어 넣기 → commit changes 클릭 → setting - pages 클릭 → source - Deploy from a branch 으로 설정 → branch - none을 main 으로 설정 → save 클릭

      **- 배포 시 유의사항!

      • 배포 할 때 파일은 반드시 1개, 이름은 index.html 이어야함.**
    • 저장된 깃허브를 수정하는 방법
      → 코드 프로그램에서 수정 후 저장한 뒤, 깃허브의 code 클릭 후 index.html 클릭 → 연필 모양 클릭 → ctrl + a 를 눌러 싹 지운 후 코드 프로그램 수정 코드를 전부 복사 (ctrl + a) 후 깃허브에 붙여넣기 하고 commit changes 클릭 후 잠시 시간이 지나고 새로고침하면 완료

    <1주차 나의 생각>
    비전공자로써 코딩을 한 번도 해본적이 없었기에 코딩이라는 것을 매우 어려운 것으로 생각했는데 html와 css에 대해 영상을 보며 따라해보니 신기하고 나도 할 수 있다는 것에 흥미가 생겼다. 물론 이것이 끝이 아니고 훨씬 방대한 양의 코딩을 공부해야겠지만 첫 걸음이 꽤나 성공적인 느낌이 든다. 아직 각 코드의 얼개를 완벽히 이해하지는 못했지만 연습을 하면서 적응해야 할 필요가 있다. 또한 코드의 뜻을 모르기에 구글의 힘을 많이 빌려야하고 앞으로도 그렇겠지만 많은 노력을 해보아야겠다는 생각이 들었다.
profile
뉴진스의 하입보이요

0개의 댓글