개발 공부
컴퓨터 프로그래밍을 배울때는 5가지에 대해 알아야 함.
위와 같은 개발에서 웹 개발이 가장 쉬운 편임
1.
프론트엔드에는 HTML, CSS, 자바스크립트가 있고, HTML과 CSS는 마크업 업어로 로직이 없음
2.
자바스크립트는 로직이 존재함. >> 조금더 복잡.
HTML은 프로그래밍 언어가 아님.>> 마크업 언어라서 로직을 작성할 수 없음 .
2.
백엔드
언어별 프레임 워크 - 자바 (스프링), 파이썬(장고, 플라스크), 자바스크립트(노드 js)
3.
DB (SQLite, MySQL, ORACLE, PostgreSQL,) -관계형 데이터 베이스,
mongo유, redis
프로그래밍 언어를 기계어로 번역해주는 것을 컴파일러라고 함.
프로그래밍 언어에는 고급언어와 저급언어가 있고, 고급언어는 사람의 말과 조금 더 가까운 언어임.
컴퓨터에 더 가까운 언어는 저급언어라고 함, 어셈블리언어.
스크래치나 엔트리 : 블록을 쌓아서 코딩
코드를 가져다 쓰는 방식으로 위와 같은 방법이 있음.
스택 오버플로우 : 네이버 지식인같은 질문 답변 사이트.
깃허브 : 오픈소스
요즘에는 스택오버플로우에서 복사해서 붙여넣기만 해도 코드가 작성되는 시대임.
앱껍데기에 아고라라는 API를 붙인것임.
>>>
폴더명은 한글로 되면 오류가 잦으니, 영어로 된 것으로 해야함.
c드라이브에 설치
vs에서 !누르고 엔터를 누르면 자동완성됨.
언어에 따라 번역하시겠습니까가 나옴.
CSS
>>> CSS가 얼마나 사이트에 많은 변화를 줄 수 있는지 볼 수 있는 사이트.
주석 다는 법 : 컨트롤 + /
비쥬얼 스튜디오 코드에서 화면 바로 보는 방법 :
1.
라이브 서버 설치
2.
GO LIVE 클릭
줄 선택 후 다중 커서로 붙여넣기:
아래로 붙여넣고 싶은 줄 수만큼 커서를 추가하려면, Alt + Shift + ↓(아래 방향키)로 커서를 아래로 확장합니다.
CSS 요소 추가하기
style.css. 페이지를 추가함.
2.
스타일 태그로 컬러 지정하기
위와 같은 구조로 입력함.
3.
인라인 방법 : 각각의 문장에 적용할 때.
적용 우선 순위가있어서 위에서부터 적용되므로, 결과는 빨간색으로 적용됨.
뒤에 임포턴트를 붙이면 초록색이 됨.
개발자 도구>>> computed 에서 조정 가능함.
박스 모델을 이해하면 다 되는 것임!!
padding : 콘텐츠 박스와 보더의 경계를 의미함.
블록 태그는 한 줄 전체를 다 먹음.
하지만, 인라인 태그는 콘텐츠 박스만 차지함.
블록 태그는 부모의 넓이를 그대로 가져감. 즉 h1은 부모인 바디 태그의 넓이를 그대로 가져감.
즉 무슨 말이냐면, 961의 넓이를 가지고 있는데, 이는 바디의 넓이가 961이기 때문임.
자식인 텍스트의 높이가 62.4이기 때문에, 저런 넓이가 나오는 것임.
피그마에 가면 코드도 알려줌.
이렇게 떨어진 숫자도 알 수 있음.
박스모양으로 해서 알 수도 있음.
display : block을 지정해주면, inline이 아닌 끝까지 블록을 다 먹게 됨.
같은 클래스의 개수라고 아래 있는 CSS가 우선순위가 높음.
emmit이라는 것으로 태그만 입력한 후에 탭을 누르면 알아서 자동으로 태그가 작성됨.
섹션 안에 유튜브, 유튜브 커
>자식을 나타냄.
+형제를 나타냄.
댓글창 구현
1.
1.
시작 클릭
