[30일차] HTML Layout / Bootstrap / HTML canvas / 개발환경구축

20220901(목)

• 목차
  - HTML Layout
  - Bootstrap
  - HTML canvas
  - 개발환경구축

---

< HTML Layout >

출처 : w3schools

 

• header
  - (1) 문서 상단에 내용을 배치할 때 사용한다.
  - (2) 페이지 안의 특정 영역 안에서도 header 태그 사용이 가능하다.
• nav
  - 내비게이션 링크 모음 바
• section
  - 문서의 내용을 담으면 된다. 
• article
  - section과 비슷한 느낌이 부분이 있지만, article을 모아서 관리할 수 있는 게 section
• aside
  - 사이드 바 쪽 내용(section & article - 메인 내용 / aside - 그 외 내용)

https://www.w3schools.com/html/html_layout.asp

HTML Layout Elements and Techniques

---

< Bootstrap >

- 우리는 태그만 알면 돼! css 선택자가 다 만들어져 있다.
- Bootstrap을 잘 활용해서 css를 적용해 볼 예정이다.

출처 : Bootstrap

https://getbootstrap.com/docs/5.2/components/buttons/#examples

Buttons

 

---

< HTML canvas >

출처 : w3schools

• id와 class 차이 (스타일 정의)
  - id : 중복될 수 없음 / 한요소에만 사용
  - class : 여러요소에 중복사용 가능
• JavaScript?
  - 백엔드 관점 : 태그를 참조하여, 조작하는 기능을 제공
  
  
• 자주 일어나는 error ➡ = 때문에 많이 나는 에러! 앞으로 자주 나올예정 :)
  - NPE - Null Pointer Exception
  - Casting - 형변환
  
  
• 스프링 프레임워크 vs 스프링 부트
  - 스프링 프레임워크: 설정이 힘들다. / SI / 추후 스프링 부트 만지기 가능
  - 스프링 부트 : 설정이 쉽다. / 서비스 기업
  
  
• JDK 1.8 or 1.11
• 자바스크립트(순수)
• jQuery

---

< 개발환경구축 >

- 자바기반의 백엔드 개발목적에 맞는 구축

1) JDK 설치 (운영체제에 맞는 것으로 설정해야 함)
     - Java Development Kit (자바개발도구)
     - 자바명령어 지원, 실행환경 제공

     - 버전 : jdk 1.8 or jdk 1.11 (스프링 지원)

          자바8(jdk 1.8)

         폴더

         - jdk(with jre) : 학습 및 개발, 프로그램 실행

         - jre : 자바프로그램을 실행.(별도로 독립설치 가능 / 실행만 할경우엔 jre만 설치해도 무방)

 

     - 라이센스

        jdk(유료)

        openjdk(무료)

 

 

2) 환경변수등록

    새로만들기 : JAVA_HOME 등록

    편집 : PATH에 %JAVA_HOME%\bin 추가

             설정된 경로의 폴더들의 명령어는 위치와 상관없이 사용가능

 

PATH 설정이 정상적으로 동작되는지 확인

 - 명령프롬프트 시작 : 설정이 된 후에 사용

 

 

3) IDE - 개발툴

     - 이클립스(무료) web : 버전의 종류 ➡ java로 만든 응용 프로그램

 

        (1) portable : 다운받아 직접 실행(권장)

        (2) install : 설치과정

 

     - 인텔리제이(상업용)

     운영체제별 각각 존재

 

   - 워크스페이스 Workspace : 작업폴더

      .metadata 폴더생성 : eclipse를 처음 실행하면, 워크스페이스 폴더에 생성

                                       ➡ eclipse 설정 정도가 저장됨
                                       ➡ eclipse 실행 전에 .metadata 폴더를 삭제하면, eclipse 첫 실행상태와 같다. 

---

• 프로그래밍 개념
  - 컴퓨터 cpu : 기계어 사용. 0 or 1 비트 내용
  - 인간 : 기계어 모름
  - 인간 ➡ 컴퓨터에 작업(명령)을 전달.
     기계어 대신 중간언어. 프로그래밍 만듬.
  
  
• 자바소스 ➡ 컴파일러(Compiler) ➡ 바이트코드(중간언어) *.class(클래스파일) ➡ 기계어 변환
    ex) C, C++ 일 경우 컴파일러 사용시 기계어로 변환
  
  
• 자바컴파일러 : javac.exe (bin폴더 내 존재)
  1) 문법검사 에러 - 에러메세지
  2) 문법검사 성공 - 바이트코드 변환
• 사용법 : javac First.java
• 자바실행 : java.exe (bin폴더 내 존재)
                  자바 바이트코드를 기계어로 변환해서, 실행하는 기능.
     

---

< 명령프롬프트 - 명령어 >

1. dir : 폴더 내용보기

     옵션 : dir/w 

 

2. cd : 폴더변경

    사용법 > cd(한칸띄고)폴더경로

.은 자기자신 ..은 부모폴더(상위폴더)

cd..입력 시 ➡ 현재상태의 부모폴더로 변경

 

🤷‍♂️ 폴더 변경이 안돼요?!

같은 드라이브 내 폴더 이동은 cd 뒤 경로 붙이면 바로 이동

다른 드라이브 폴더 이동은 e:와 같이 드라이브 설정 따로 필요

*키보드 화살표 위/아래 : 명령프롬프트 상의 사용한 명령어 보기.(history)

 

• 이클립스 환경설정
  - Window - Preference
  - Perspective