● 사이에 작성 /* ECMA(유럽컴퓨터제조협회)에서 자바스크립트를 ECMAScript라는 이름으로 표준화함 자바스크립트(=ECMAScript) : 브라우저 안에서 실행되는 프로그래밍 언어(객체지향 프로그래밍언어) */ 자바스크립트 기초 ● 참조 사이트 : ○ 모던 자바스크립트 튜토리얼 :https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info ○ MDN 웹 문서 : https://developer.mozilla.org/ko/docs/Web 개발자를 위한 웹 기술 | MDN웹의 개방성은 개발자들에게 많은 기회를 제공합니다. 하지만 웹 기술을 잘 활용하려면 우선 그 사용 방법을 잘 ..
FlexBox(Flexible Box Layout Module)
FlexBox(Flexible Box Layout Module) Flex 컨테이너 : 부모 요소Flex 아이템 : 자식 요소플렉서블 박스 최신 명세 주소 : http://www.w3.org/TR/css3-flexbox CSS Flexible Box Layout Module Level 1Adjusted min-width: auto to only apply the computed main size as a minimum in cases where the flex basis was retrieved from the main size property. (Issue 19) … is defined if the item’s computed flex-basis is auto and its computed main s..
CSS(Cascading Style Sheet)
CSS(Cascading Style Sheet) ● 파일명.css ● 외부 스타일시트 파일을 html에 링크 걸기 ○ ● 웹 문서에서 스타일이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 디자인 을 결정짓는 내용들을 말함 ● font - size 단위 변환 참고 사이트 : https:/sitero.co.kr/fontsize 1. 스타일 시트 형식선택자 {속성 : 속성 값 ;} h1 {color : green ;} hl {/*h1 요소에 적용되는 스타일 (0), hl 태그에 적용되는 스타일 (X)*/ {color: green ; font-size : 30px ; font-family..
HTML
HTML1. html 태그(tag) a. html의 기본 구성 요소 b. 를 사용 c. ~ d. e. 대/소문자를 구분하지 않음, 되도록 소문자로 작성 2.html의 기본 구조 내용 a. 속성(attribute) : HTML 태그에 부가적인 정보를 제공 lang="ko", class="content", href="https://www.naver.com",... 속성 = "값" b. 주석 : 설명글, 프로그램 실행에는 영향을 주지 않고 단지 설명만 달아 놓음 비교) 스타일시트 주석 / * 설명글 */ 자바스크립트 // 한 줄 설명, /..
HTML, CSS, JavaScript, 절대/상대 URL 용어 정의 1. HTML(Hyper Text Markup Language) 웹 문서의 구조를 정의하고 콘텐츠를 표현하는 기본 마크업 언어 웹페이지를 만드는 언어 파일명.html 파일명.htm 2. CSS(Cascading Style Sheet) HTML 문서에 레이아웃과 디자인을 포함한 시각적 요소를 정의하기 위한 규격 스타일과 레이아웃(글꼴,색상,크기,간격...)을 지정 파일명.css 3. JavaScript 프로그래밍 언어로 HTML 문서를 동적으로 처리하고 이벤트를 처리 할 수 있는 기술 HTML 문서에 이벤트 처리나 동적으로 변화하는 콘텐츠를 표현하거나 서버와의 연결을 통해 데이터..
웹 프로그래밍의 구조
웹 프로그래밍의 구조 1. 웹이란? a. World Wide Web b. 인터넷을 사용해서 웹 사이트에서 정보를 전송하고,이를 확인하기 위한 시스템 2. 웹 페이지의 구조 a. 웹 서버(Web Server) i. 웹에 정보를 공개하고,파일에 저장 ii. 웹 사이트를 통해 공개할 파일은 모두 웹 서버 내부에 저장 iii. 서버에서 동작하는 프로그램 영역을 Backend라고 함 b. 웹 클라이언트(Web Client) i. 웹 서버에서 정보를 받는 쪽을 의미(서비스 이용하는 쪽) ii. 일반적인 사용자가 사용하는 컴퓨터 iii. 클라이언트에서 동작하는 프로그램 영역을 Frontend라고 함 ..
Emmet ● 참고 사이트 : https:/docs.emmet.io/li*5ul>li*5ul>li*5>aul>li*5>a>img =>띄어쓰기 없이h1[title=test]h1#test => h1.a.b.c => p{test} => testli.item$*3 => img 10개 삽입 코드img[src="/image/child$.jpg" class="item"]*10 div[class="item"]{item$}*10 --> item1 ● 단축키 http://code.visualstudio.com/shortcuts/keyboard-shortcuts-window.pdf alt + 위/아래 방향키 : 이동alt + 클릭 : 다중 선택Ctrl + Alt + 방향키 : 부분적으로 여러 ..
Visual Studio Code 설치 및 설정
● Visual Studio Code 설치 및 설정 1. 사이트 주소 : https://code.visualstudio.com/ Visual Studio Code - Code Editing. RedefinedVisual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.visualstudio.com 2. 다운로드한 파일 설치 ● 다운로드한 파일 더블클릭..