본문 바로가기
코딩 공부

코딩 공부 1주차 기록

by rovertlee 2021. 5. 16.

이번 주 공부 목표

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

기록

  1. 서버와 클라이언트의 역할에 대해 이해한다.
    • 웹 동작 개념
      • 브라우저가 하는 일
        • 서버에 요청을 보낸다.
        • 서버로부터 받은 HTML 파일을 그려준다.
        • 데이터만 받는 경우 "JSON"형식의 데이터 형식으로 받아 사용자한테 보여준다.
    • HTML, CSS, Javascript
      • HTML과 CSS의 개념
        • HTML은 구역과 텍스트를 나타내는 코드이며, CSS는 HTML로 만든 구역과 텍스트를 꾸며주는 역할을 한다. Javascript는 특정 요소가 동작하는 기능을 만드는 역할을 한다.
        • HTML은 크게 head와 body로 구성되며, head 안에는 페이지의 속정 정보를, body안에는 페이지의 내용을 담는다.
      • CSS 기초
        • HTML 부모, 자식 구조 살펴보기
          • <div> 태그로 부모-자식 구조를 구분할 수 있다.
            • div 태그로 특정 영역을 정의하고 그 안에 다른 영역이 있다면 하위 개념의 div를 정의하여 개별적으로 CSS를 적용할 수 있도록 만들 수 있다.
        • CSS 사용하기
          • <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성한다.
          • 만약 myclass라는 클래스를 지정해서 CSS를 부여하고 싶다면 .myclass{...}을 head 영역에 style 추가하여 사용한다.
          • 꼭 외워야 하는 CSS!
            • 배경관련
              • background-color
              • background-image
              • background-size
            • 사이즈
              • width
              • height
            • 폰트
              • font-size
              • font-weight
              • font-famliy color
            • 간격
              • margin
              • padding
          • CSS로 만든 화면을 가운데로 가져오려면?
            • width를 주고, margin:auto를 사용하자!
            • 근데 이 방법이 안 통한다면 display:block을 추가하자
          • 폰트, 주석, 파일 분리
            • 구글 웹 폰트 적용 방법
              • 구글 웹 폰트를 접속한다.
              • 마음에 드는 폰트를 클릭한다.
              • [ + Select this style ]을 클릭한다.
              • 우측 상단의 모음 아이콘을 클릭한다.
              • Embed 탭을 클릭합니다.
              • link 태그를 복사해서 <head> ~ </head> 사이에, CSS를 복사해서 <style> ~ </style> 사이에 넣는다.
            • 주석 적용법
              • Ctrl + /
                • 안된다면 Ctrl+Shift를 한번 누르고 다시 사용하자
                • 키보드 적용이 MS 키보드로 되어 있지 않기 때문이다.
          • 부트스트랩?
            • 예쁜 CSS를 미리 모아둔 곳
            • 사용방법 - 아래 코드 블록을 head 태그 내에 삽입하고 시작한다.

 

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

 

          • CSS 파일 분리
            • style 부분이 너무 길어지면 지저분해 보일 수 있다. 
            • 이럴 땐 파일을 분리해두자!
            • 단, 같은 폴더에 설치해놔야 한다!
          • 자바스크립트
            • 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
            • head 태그 안에 자바스크립트 함수를 정의하고 HTML에서 실행시킬 수 있도록 코드를 작성한다.

내가 만든 최종 페이지 -

'코딩 공부' 카테고리의 다른 글

[Flutter] 하단 앱 바(bottomNavigationBar)높이 조절하는 방법  (0) 2021.12.27
코딩 공부_첫 번째 완주 회고  (0) 2021.06.14
코딩 공부 3주차 기록  (0) 2021.06.05

관련글

댓글

티스토리툴바