백엔드 학습 과정/Section 1 [HTML, Linux, Git, Java] (8) 썸네일형 리스트형 코드스테이츠 백엔드스쿨 42기 Section1 회고록 -Code States BackEnd School 42기 Section1을 마치며- -느낀점- 2022.10.20 ~ 2022.11.16 약 한달간의 코드 스테이츠 부트캠프의 Section1 이 완료되었다. 생각해보면 너무나 짧게 느껴진 시간이었는데 벌써 약 한달이 지났고 Section1이 종료되었다. 주변의 우려를 뿌리치고 대학 전공4년 + 6년 간의 커리어 + 해외 커리어 2년, 도합 12년의 시간과 승진의 기회를 모두 포기하며, 두려움 반, 걱정 반 그리고 약간의 의심을 가지고 참여하게된 코드 스테이츠 백엔드 42기. Section1이 지났다. 돌이켜보면 이 짧은 기간 동안 코드스테이츠의 부트 캠프에서 참 많은 내용을 배운 것 같다. 부트 캠프에대한 전반적인 교육 방식과 거기에 대한 학습 방법과 향.. Java #1-1 자바 기초-변수, 문자열, 연산자, 입출력 1. 변수 [변수] : 값을 저장할 수 있는 메모리 공간을 확보하고, 사람이 식별할 수 있는 이름을 붙인 것. [변수 선언] : 저장하고자 하는 값의 데이터 타입, 변수 이름에 할당하는 것. [값 할당] : 변수에 값을 저장하는 것. 좌항 = 우항;과 같은 형식으로 사용하며, [우항]에는 값이, [좌항]에는 변수가 위치해야 한다. 이와 같이 대입 연산자를 사용하면, 우항의 값이 좌항의 변수에 할당됩니다. [초기화] : 변수를 선언하고 값을 할당하는 것. [상수] : 변하지 말아야할 데이터를 임시적으로 저장하기 위한 수단으로 변수명 앞에 final 이라는 키워드를 사용한다. 상수를 저장하면 값을 저장하고 있는 상수명을 값으로 사용할 수 있기 때문에 코드 가독성이 향상된다. ex) final int PI =.. 6. Git & Github 목차***************************** 1. 용어 정리 2. 환경설정 3. SSH 등록 4. 기본 브랜치 이름 변경 5. Git의 영역과 기본 명령어 6. 혼자 작업 workflow 7. 함께 작업 workflow 8. 자가 점검 list ********************************* [Git 용어 정리] [스냅샷] : 특정 시점에 생성된 코드 변경 전 백업 복사본, 이를 통해 이전의 기록에 대해 추적이 가능함. [Commit] : 스냅샷을 만들어주는 작업 [Git] : 소스 코드 기록의 변경을 버전 별로 관리하고 추적할 수 있는 버전 관리 시스템. [1] 파일의 변경 사항을 추적, 각 파일의 버전을 관리 [2] 파일을 백업할 수 있게 한다. [3] 협업자들과 함께 파일을.. 5. Linux [명령줄 인터페이스 (Command-Line Interface, CLI)] VS [그래픽 사용자 인터페이스 (Graphic User Interface)] : 그래픽 작업을 거치지 않아도 되기 때문에 CLI는 높은 안정성과 빠른속도를 가지고 있다. [입력] : 키보드나 마우스, 카메라, 마이크등 컴퓨터에 새로운 명령을 전달하는 모든 소스. [출력]: 입력 소스에 의해 또는 작성된 프로그램에 의해 모니터에 화면, 소리를 스피커로 사용자가 인식하게 하는 일. >> 이를 간단히 I/O (Input/Output)이라고 표기하고 “아이오”라 읽는다. [프롬프트 (Prompt)] 터미널 프로그램 내에 키보드의 입력을 확인하고 편집할 수 있는 한 줄의 공간. [CLI 기본 명령어] Explorer.exe . : 우분투.. 4. 와이어 프레임 & 목업 -와이어프레임 설계 및 목업 구현- [와이어프레임] 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어 프레임이라고 한다. 아주 단순하게 레이아웃과 제품의 구조를 보여주는 용도. [목업 Mock-Up] 웹 또는 앱을 제품이라 했을 때, 목업은 실제 제품이 작동하는 모습과 동일하게 기능을 뺸 HTML문서와 CSS를 작성. [와이퍼프레임, 목업 진행 시 주의사항] 요소는 일반적으로 사용자가 입력한 값을 다른 페이지로 전송하는 역할. 를 사용하여 과 같은 자식 요소를 감싸는 경우에 자주 사용. 목적이 명확하므로, 단순히 영역을 나누기 위해 사용하는 요소보다는 더 sementic한 요소 사용이라고 볼 수 있다. >> 와이퍼프레임/목업 진행 URL : https://ovenapp.io/ 3. 레이아웃 : 화면 나누는 법 [레이아웃 : 화면을 나누는 방법] 1. HTML 구성하기 대부분의 경우 콘텐츠의 흐름은 좌 > 우, 상 > 하 로 진행된다. CSS로 화면을 구분할 때에는 수직분할/수평분할을 차례대로 적용하여 콘텐츠의 흐름에 따라 작업을 진행. a. 수직 분할 : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록. b. 수평 분할 : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록. [Flexbox로 레이아웃 잡기] 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법. 1.display: flex 분석하기 display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법. EX) 요소를 자식으로 가진 . box1 box2 box3 .. 2. CSS 2. CSS : 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어. 예제 URL : https://codesandbox.io/s/html-cssgico-rur0eq Index.html : HTML의 내용 (웹 페이지의 구조와 내용) Index.css : HTML 내용의 배경 색상과 내용 위치 Layout css : HTML 내용의 화면을 재배치 : HTML파일과 다른 파일을 연결하는 목적으로 사용. 태그의 rel =은 연결하고자 하는 파일의 역할이나 특징을 나타냄. CSS는 이름처럼 기본적으로 stylesheet 이므로, rel속성에 stylesheet을 추가한다. Href= 속성에는 파일의 위치를 추가한다. 만일 다른 폴더에 파일이 존재할 경우, 절대 경로 또는 상대 경로를 입력해 원하는 파일을.. 1. HTML 1. HTML : 웹 페이지의 구조를 담당하는 마크업 언어. HTML은 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어 [HTML의 기본 구조와 문법] [TREE STRUCTURE / 트리 구조] EX) : 이 문서가 HTML 문서임을 명시 : html 시작 태그로, 문서 전체의 틀을 구성 : 은 해당 태그가 끝났음을 의미 : body 태그는 문서의 내용을 담는 곳 Hello world : heading을 의미하며, 크기에 따라 h1 ~ h6 까지있음. Contents here : content division을 의미하며, 줄바꿈됨. Here Too! : 줄바꿈이 없는 content 컨테이너 : div 태그가 끝났음을 의미 : body 태그가 끝났음을 의미 : html 태그가 끝났음을 의미 [H.. 이전 1 다음
