728x90 Web developer19 [JS_04][WEB] JavaScript 활용 코드 정리 정돈하기 다른 파일에 js언어로 작업해두기 사용시 src 속성으로 불러오기 library vs framework 라이브러리는 재사용하기 쉽도록 정리되어있는 '부품' 같은 저장소 프레임워크는 만들려는 기능의 공통된 부분 '반제품' 같은 작업소 jQuery > cdn > googlecdn $('a').css('color',color); UI vs API User Interface 웹을 이용하는 사용자가 조작하는 장치 Application Programming Interface 경고창처럼 웹브라우저에 사용되는 기능을 약속한 장치 API와 순서는 중요한 관계에 있습니다. 검색어 태그 삭제 태그 추가 document DOM (Document Object Model)객체 웹 브라우저 자체 window 객.. 2023. 2. 18. [JS_03][WEB] JavaScript 문법 Program 언어 Program은 '순서'에 따라서 실행되도록 정의합니다. 조건에 따라서 반복하면서 실행되도록 할 수 있습니다. ● 조건문 Comparison operators IF-else ● 리팩토링 코드의 중복을 제거합니다. 유지 보수를 편리하게 만듭니다. this 키워드 : 태그 자신을 가리킵니다. 자주 사용하는 명령어는 변수에 할당하여 코드를 줄여줍니다. var target = document.querySelector('body'); ● 배열 많은 데이터를 잘 담아두는 수납장 같은 역할 /* get */ /* add */ /* count */ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array A.. 2023. 2. 17. [JS_02][WEB] HTML과 JS ● Console 웹 페이지 내에서 코드를 실행하는 가벼운 상황에서 이용하는 기능 우클릭 > 검사 > console ''.length : 문자열 길이 ● JavaScript data type 데이터 타입 - 문자열, 숫자 ● JavaScript String 문자열 길이 str.length https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org ● Variables & assignment operator (=) var X = 1 ● 웹 브라우저 제어 - CSS : .. 2023. 2. 16. [JS_01][WEB] JavaScript 실행 방법1 사용자와 상호작용하도록 만들기 ex) 버튼을 누르면 배경이 나이트 모드로 바뀜 JavaScript는 HTML언어 위에서 동작하는 언어입니다. ● ● event 웹 브라우저 위에서 일어나는 일 https://www.w3schools.com/tags/ref_eventattributes.asp HTML Event Attributes W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.co.. 2023. 2. 13. [CSS_05][WEB] css 코드의 재사용 css문법만 style.css파일로 저장 태그 해당 문서와 외부 소스 사이의 관계를 정의할 때 사용합니다. 이 요소는 요소 내부에만 위치합니다. 주로 외부 스타일 시트를 연결할 때 사용합니다. rel은 필수 속성으로 현재 문서와 외부 리소스 사이의 연관 관계를 명시합니다. href는 링크될 URL 2023. 2. 13. [CSS_04][WEB] 반응형 웹 - 미디어 쿼리 반응형 웹 화면의 크기에 따라서 웹 페이지에 각 요소들의 크기가 자동적으로 재조정 됩니다. 미디어 쿼리 문법 media query screen width > 800px → @media(min-width:800px) { } screen width < 800px → @media(max-width:800px) { } @media only screen and (min-width: 300px) { logic } only | not 키워드 : only는 뒤의 조건만, not은 뒤의 조건을 제외한 조건 screen키워드 : 미디어 타입을 말하며 all, screen(컴퓨터와 모바일), print(인쇄용도) 가 주로 쓰이고 더 많은 타입이 존재합니다. 미디어 쿼리 속성은 논리 연산자를 사용하지 않으며 속성 명 앞에 m.. 2023. 2. 13. [CSS_03][WEB] 그리드 ● 태그 : 컨텐츠 분할 요소 division으로 영역을 나누는데 사용하는 태그 웹사이트의 레이아웃을 만들 때 주로 사용합니다. HTML 문서에서 특정 영역이나 구획을 정의하려고 할 때 사용합니다. HTML 요소들을 하나로 묶어주어 CSS나 javascript로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로 자주 사용합니다. block level 요소로 혼자 한 줄 차지 ● 태그 텍스트의 특정 부분을 묶는 데 자주 사용합니다. inline 요소 ● 그리드 만들기 fr은 자동 화면 조절 단위 ● 웹 브라우저의 기술 채택 통계 서비스 https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 2023. 2. 12. [CSS_02][WEB] 박스 모델 태그의 부피 block level element : 화면 전체를 쓰는 태그 ex) h1 display: block; 으로 기능 부여 가능 inline element : content의 크기만큼 사용하는 태그 ex) a display: inline; 으로 기능 부여 가능 ● 테두리 border border-bottom ● 여백 (border안) padding ● 간격 (border밖) margin ● 너비 width 2023. 2. 12. [CSS_01][WEB] CSS 적용하기 웹 페이지를 디자인하는 것이 유지 보수가 쉽게 수행하도록 도와줍니다. html에 css 명령어로 해석하라는 명령어를 수행해야 합니다. html에 css를 삽입하는 방법 ① 태그 삽입 ② style 속성을 사용 ● 기본 문법 ① 태그 삽입 방법 a {} 는 선택자 (Selector) color:red는 선언 (Declaration) color는 속성 (Property) red는 값 (Value) ; (세미콜론) 적용한 효과 사이의 구분자 대상을 선택하고, 그 대상을 어떻게 디자인할지 선언하는 방식입니다. ② 스타일 속성 삽입 적용 하고 싶은 태그 안에 style = "color:red" ▶ Property ● text-decoration 밑줄 효과 text-decoration: none; text-deco.. 2023. 2. 12. [HTML_09][TAG] html 추가 기능 ● 동영상 삽입 위 코드를 직접 작성하는 것이 아닌 영상 공유에 '퍼가기' 기능을 사용한 html 언어를 찾아 자신의 웹사이트에 추가하면 됩니다. ● 댓글 기능 추가 (서비스) https://disqus.com/ Disqus – The #1 way to build your audience Disqus offers the best add-on tools for websites to increase engagement. We help publishers power online discussions with comments and earn revenue with native advertising. disqus.com https://www.livere.com/apply 라이브리 - 설치 LiveRe 월 이용료 .. 2023. 2. 12. [HTML_08][WEB] Internet ● 서버와 클라이언트 ● 웹 호스팅 VSCode Live server 인터넷여 연결된 컴터를 빌려주는 서비스 Hosting, cloud https://github.com/ GitHub: Let’s build from here GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea... github.com 소스 코드 보관 하기 : 로그인 > Create a new repository > uploading an e.. 2023. 2. 12. [HTML_07][WEB][TAG] 웹페이지 하나 완성하기 web 갈비치킨_레시피 하얀라볶이_레시피 한판 떡꼬치_레시피 레시피 탄생 의도 레시피 내용 1.html을 만들어 갈비치킨 레시피 내용을 적기 레시피 2.html을 만들어 하얀라볶이 레시피 내용을 적기 레시피 3.html을 만들어 한판 떡꼬치 레시피 내용을 저기 레시피 index.html을 만들어 메인 페이지 내용을 적기 레시피 의도 그 결과는 2023. 2. 11. [HTML_06][WEB][TAG] 태그의 링크 cf) html specification 사용 설명서 https://www.w3.org/TR/2011/WD-html5-20110405/ HTML5 This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research www.w3.org anchor String hypertext reference - href target =.. 2023. 2. 11. [HTML_05][WEB][TAG] 문서의 구조 웹 제목 Web_First 텍스트 인코딩 Html 페이지 구조 표시 최고의 tag 머리 본문 Html 기본 구조 2023. 2. 11. [HTML_04][WEB][TAG] 부모자식과 목록 List String 순서가 없는 목록 (Unordered List) string 순서가 있는 목록 (Ordered List) string 2023. 2. 11. [HTML_03][WEB][TAG] img 이미지 src (source)은 속성 attribute 무료 이미지 https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다. unsplash.com 2023. 2. 11. [HTML_02][WEB][TAG] br vs p html tag https://www.w3schools.com/tags/default.asp HTML Reference W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com html new line tag 줄바꿈 html paragraph tag 단락 paragraph cf) css 위 마진(여백) 옵션 style = "margin-top:40px;" 2023. 2. 11. [HTML_01]HTML intro HyperText Markup Language 웹 구현 언어로 html을 사용합니다. Public domain 2023 best web development editor - (web) & editor (Visual Studio Code) 바탕화면에 WEB 폴더 만들기 .html파일을 웹에서 Ctrl + O로 파일을 열면 구동됩니다. 교육용 웹 사이트 https://www.w3schools.com/html/html_intro.asp Introduction to HTML W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like.. 2023. 2. 11. [Java][Introduction] 자바 용어 소개 Hard Ware ⊃ 운영체제(Window, 리눅스, osx) ⊃ 자바 ⊃ source code Java SE : 자바의 표준안 JDK : 구체적인 소프트 웨어 (개발자) JRE : 자바가 실제로 동작하는 데 필요한 JVM, 라이브러리, 각종 파일들이 포함 (일반 사용자) JVM : 자바가 실제로 구동하는 환경 JDK ⊃ JRE ⊃ JVM install Google > Java JDK download > cmd > Java > Javac c > progrmas files > java > jdk-19 > bin 의 경로를 복사하여 PATH로 가서 환경 작업 해주기 ① 시스템 환경 변수 편집 > 환경변수 > 시스템 변수 > Path변수 > 복사한 경로 붙여넣기 ② ComSpec > 새 시스템 변수 > .. 2023. 2. 11. 이전 1 다음 728x90
