비전공자의 코딩 도전일기 : “스파르타 코딩클럽 개발일지 1주차 ”
웹의 동작 개념/HTML, CSS 기본 내용/bootstrap/자바스크립트
웹의 동작 개념 (HTML을 받는 경우) : 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서", "불러오는" 것이다. 즉, 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 불러오는 것이다.
클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML+CSS+Javascript를 준다.
요청을 보내는 곳 : 서버가 만들어 놓은 "API"라는 창구
웹의 동작 개념 (데이터만 받는 경우) : 데이터만 받을 경우 JSON 형식을 사용한다.
HTML : 구역과 텍스트를 나타내는 코드 -> 뼈대
CSS : 잡은 구역을 꾸며주는 것 -> 꾸미기 용도
HTML 구성요소 : 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보, body안에는 페이지의 내용을 담습니다.
HTML 부모-자식 구조 : html 태그는 "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받기 때문이다.
CSS 사용방법 : <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다.
CSS는 파일 분리도 가능하다.
bootstrap : 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다.)
자바스크립트란 : 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
배경 관련 : background-color, background-image, background-size
사이즈 : width, height
폰트 : font-size, font-weight, font-famliy, color
간격 : margin, padding
margin : 바깥쪽 여백 영역을 지정
padding : 내 안쪽여백 영역(내용영역과 테두리 사이)를 지정
content속성 : 내용영역을 의미하고 width/height속성으로 영역의 크기를 지정
border : 테두리 영역을 지정합니다.
가운데로 가져오기 : 똑같이 width, margin를 활용
경계선을 둥글게 그리는 방법 : border, border-radius
경계선과 내부 요소의 간격 : padding으로 조절
단축키 : ctrl+alt+L 자동정렬 기능
단축키 : 주석 처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시)
주석 : 1) 필요 없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용합니다. 주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않아요.
참고 링크 :
부트스트랩 컴포넌트 4.0 : https://getbootstrap.com/docs/4.0/components/alerts/
구글 웹폰트 : https://fonts.google.com/?subset=korean
Quiz_첫 번째 (실습)
강의 보면서 코딩을 처음 작성해보았다. 간단해 보이는 코딩이지만 나에겐 용어도 낯설고 이것도 어려웠다 ㅋㅋ
다른 사람들보단 시간이 조금 더 걸린 것 같다.
Quiz_ 2번째 (실습)
두 번째 코딩 작업!! 코딩은 낯설고 어렵지만 동작되는 거 비교하며 신기하기도 하고 재밌기도 하다.
자바스크립트 실습 및 기초문법
Javascript 기초 문법 : [크롬 개발자 도구]를 열어서, console 탭으로 연습
크롬 개발자 도구 콘솔 창 : 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구
console.log(변수) : 콘솔 창에 괄호 안의 값을 출력
let으로 변수를 선언 <- 변수는 값을 저장하는 박스이다.
리스트 : 순서를 지켜서 가지고 있는 형태 ( let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능 )
딕셔너리 : 키(key)-밸류(value) 값의 묶음 ( let a_dict = {} )
순서를 표시할 수 있고, 정보를 묶을 수 있다.
함수 : function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 } // 사용하기 함수이름(필요한 변수들);
이외 조건문 , 반복문
1주차 숙제
이제 1주차가 끝났다. 최대한 혼자 하려고 [기획서(레이아웃) 보기] 이것만 보고 코딩은 이전에 배운 강의들 돌려보며 스스로 하였다.
에러도 많이 나고 다시 해보고 다시 쓰고 시간은 오래 걸렸지만 코드를 적고 테스트하고 지우고 다시 넣고 하는 과정에서 그래도 조금은 형태를 알 수 있었던 거 같다.
이제 1주차가 끝났다. 어렵지만 5주차 까지 완주 성공해보자!
1주차 할 일 및 참고사항 :
1) 웹의 동작 개념 알기
2) 파이참 라이센스 등록
3) HTML, CSS 기본 내용 알기
4) Bootstrap 알기
5) 자바스크립트 기초 알기
* 매일 출석체크할 것 (게더에서) 매표소 X 눌러서 출석체크 -> 황토방 목표 공유 후 강의 듣기
* 11일 챌린지 도전 내용 : 공식적인 완주일은 13일 이며, 주말까지 허용되기 때문에 8월15일까지 가능.
[ 총 87강, 숙제 포함, 8개 제한이므로 정확히 11일 걸리게 되어있다 ]
[ 수강은 언제든 가능하나 하루 8강 이상 시청 불가 (복습은 상관없음) ]
* 개발일지 작성하기
