세상은 내가 정하는 대로 세상은 내가 정하는 대로

웹은 기본적으로 프론트엔드와 백엔드로 구성! 프론트엔드는 우리가 접하는 화면 자체의 디자인, 내용 등을 다루는 것 백엔드는 그 웹 페이지를 띄우기 위한 서버나 데이터 베이스를 다루기 위한 것 프론트엔드 : html + CSS + Javascript + ... 1) html : 화면에 들어갈 글, 이미지 등의 정보 2) CSS: 화면에 들어갈 정적인 디자인 3) Javascript: 화면에 들어갈 동적인 디자인 (만약에 동적인 디자인 안 넣을 거면 공부 안해도 됨) -> html, css, js 모두 생활코딩에서 듣고 개념 이해! 활용은 혼자 웹페이지 만들어 보면서 익힐 것 백엔드 : 사용자의 기호에 따라... (나의 경우엔 Flask) 1) 웹 서버의 개념 이해 : flask 다루기 전에 웹 서버의 구동..

진도: ~수업을 마치며까지 WEB 공부를 마치며... 결국 javascript 강의까지 끝! 진짜 내 자신이 정말 대단하다! 강의를 다 듣고 나니 이 웹페이지에도 개선점이 여러모로 많다는 것을 느꼈지만, 그건 다음 3학년 1학기 웹페이지에 반영하기로... ㅋㅋㅋㅋ 이 다음 목표! 일단 생활코딩으로 html, css, javascript 강의까지 가볍게 들었으니, 이제는 노마드 코더의 웹 개발 커리큘럼을 따라 2학년 겨울방학 때 배운 내용들(html+css+javascript)를 좀 더 다져볼 예정이다. 다 들을 수 있을진 모르겠지만, 듣고 싶은 강의가 크게 네 가지 강의가 있다! 코코아톡 클론 코딩 (html+css) -> 2주 예상 바닐라 JS로 크롬 앱 만들기 (javascript) -> 2주 예상 ..

진도: ~배열과 반복문의 활용까지 3. 웹페이지 제어하기 -> CSS 선택자는 크게, 태그, id, class 선택자 있음 제어할 태그 선택하기 ->document.querySelector(".myclass"); #".myclass" = 이 웹페이지의 모든 태그 중에 클래스 명이 myclass인 태그를 선택하는 선택자 선택한 태그의 style 바꾸기 -> document.querySelector("body").style. style 중에서 background-color:black으로 바꾸고 싶다 -> document.querySelector("body").style.backgroundColor='red'; 4. 조건문 4-1. 비교연산자와 불리언 -비교연산자는 좌항와 우항 값을 비교 후, 불리언을 반환함..

javascript 자, 드디어 이 2학년 겨울방학의 마지막에, html과 css 강의를 다 듣고 마침내! Javascript를 시작하게 되었다! 진짜 html이나 css까지는 그래도 호딱호딱 재밌게 들었는데, JS를 시작하려니 막막... 하기도 하고(생활코딩 강좌만 30개) 그냥 딱 깔끔하게 개강하고 나서부터 시작할까? 싶기도 했다. 하지만 또 막상 생각해보니 개강하면 개강하는대로 과제와 밀린 강의에 치여 살 게 뻔하고 방학 때도 꾸준히 하기 어려운 자기 공부가 학기 중이라고는 잘 될까 싶어서 얼른 시작했다! 또 막상 강의 수강 계획을 짜보니 (아주 낙관적으로) 하루에 6~8개 정도 들으면 생활코딩 JS 강의도 개강하기 전에 끝낼 수 있겠더라! 동기 부여 차원에서 나의 우물 안 개구리 시절을 생각해보자..

진도: ~수업을 마치며까지 4. 그리드-위에서 만든 웹페이지에 글을 나란히 배치하도록 끌어올리고 싶다면? -> 그리드 -여기서 새로운 html 태그 등장! 아무 의미 없는 정보를 담는 태그는 division의 약자인 div 태그 사용! (block level element) 아무 의미 없는 정보를 담는 태그는 span 태그 사용! (inline element) -display:grid; 다음에 grid-template-columns 를 써주면 하나의 컬럼에 써줄 수 있음 -> 150px라고 하면 고정적으로 저 부피를 갖게 되고, 1fr이라고 하면 현재 화면 전체를 쓰게 자동으로 조정하는 단위 (2fr 1fr이라고 하면 2:1 비율로 현재 화면의 크기에 맞춰 자동으로 조절됨 ->grid의 장점은 박스 안에..

진도: ~박스 모델까지 1. css 속성 스스로 알아내기 -text size 키우고 싶으면 'css text size property' 등으로 검색해서 찾아볼 수 있다! -text center로 옮기고 싶으면 'css text center property' 등으로 검색해서 찾아볼 수 있다. 강의 중 배운 css 속성 정리 text-align:글자 배열 조정 (중간으로 옮기는 등...) font-size:글자 크기 조정 padding:컨텐츠와 테두리 사이에 여백을 주고 싶다면 margin:테두리와 테두리 사이에 여백을 주고 싶다면 border-bottom:박스(4면 테두리)가 아니라 아래(1면 테두리)에만 선 그어주고 싶다면 display:어떤 태그가 가리키는 범위를 완전히 바꾸는 중요한 속성! displ..

진도: ~혁명적 변화까지 html만 쓰는 데에는 한계가 존재한다! -> "CSS"라는 새로운 언어의 등장 계기 -html과 달리, 웹에 대한 정보(a, p, h1 태그와 같은...) X-> 디자인에 관한 내용 O html과 css는 완전히 다른 언어기 때문에 html 파일이 css가 쓰인다는 것을 알 수 있도록 선언해줘야 함 ->웹페이지에 css 삽입하는 2가지 방법 존재한다! style 태그를 사용한다 -> "선택자"=이 웹페이지에 주고 싶은 효과를 누구에게 줄 것이냐 선택! style 속성을 사용한다 = 원하는 특정 태그 내에 직접 넣어준다 1번 style태그를 사용하는 경우엔 head 태그 내에 style이라는 css 태그를 넣어준다 그리고 그 사이에 a{ color:red }를 적어주면, '이 h..

진도: ~수업을 마치며 3까지 웹 호스팅과 웹 서버 시스템 프로그래밍과 컴퓨터 구조 및 시스템에서 열심히 배웠듯이, client는 server와 여러가지를 주고 받으며 상호작용한다. 웹의 경우에는 html을 호출하고 주는 경우다. 그리고 server에 의해 내 컴퓨터에 있는 문서를 전 세계가 볼 수 있도록 할 수 있다. 그런 server의 역할을 누가 하느냐에 따라 web hosting과 web server로 나눌 수 있다. web hosting의 경우는, 웹 호스팅 업체와 같은 회사에 맡기는 것으로 비교적 쉽다는 장점이 있다. 단적으로 github가 그 예시다. 두 번째로 web server는 사용자가 직접 그 역할을 하는 것이다. 이 방법은 까다롭고 어렵고 컴퓨터를 계속 커놔야 한다는 단점이 있으나,..