Web 24

JavaScript 제어문, 배열, 배열 반복, 함수, 객체1

제어문 조건문 if 문 # 사용 방법 if(조건식){ 조건식의 결과가 true일 때 실행할 문장; ... } -------------------------------------------- if(조건식){ 조건식의 결과가 true일 때 실행할 문장; ... }else{ 조건식의 결과가 false일 때 실행할 문장; } --------------------------------------------- if(조건식1){ 조건식1의 결과가 true일 때 실행할 문장; ... }else if(조건식2){ 조건식2의 결과가 true일 때 실행할 문장; ... }else{ 모든 조건식의 결과가 false일 때 실행할 문장; ... } 더보기 if 문 switch 문 # 사용 방법 switch(변수 또는 값) { c..

Web/javascript 2024.04.16

JavaScript 변수, 데이터 타입, 타입변환 함수, 연산자

자바스크립트의 특징 - 객체 기반의 스크립트 언어로, 대소문자를 구별하고, 문장 끔에 ;(세미콜론)을 사용한다. ;(세미콜론)은 생략이 가능하다. 자바스크립트의 출력 - Web API Console을 통해 브라우저 Console 창에 출력한다. 자바스크립트의 삽입 방법 1. 2. 더보기 자바스크립트 출력 주석문 - // : 한 줄 주석 - /* 내용 */ : 여러 줄 주석 변수 - 데이터를 저장한 값을 가리키는 메모리 공간이다. - 값은 변경될 수 있다. - 자바스크립트의 변수는 타입이 없다. - let 키워드를 사용하여 변수를 선언한다. # 파이썬과 자바스크립트의 변수 선언 파이썬 name = "파이썬" 자바스크립트 let name = "자바스크립트"; (큰 따옴표("")와 작은 따옴표('')를 구별하..

Web/javascript 2024.04.15

나만의 웹 사이트 꾸미기..? 4

이번에는 웹 사이트 홈, 즐겨찾기, 이력서 페이지 모두 조금 건드려보았다. (로그인과 회원가입, 뉴스기사 페이지는 지난번에 했기 때문에 제외함) 예전 홈페이지 정말 아~~무것도 없다. 이번에 꾸민 홈페이지 로그인 회원가입 김원진의 홈페이지 환영합니다! 스포츠 뉴스(축구) 즐겨찾기 이력서 예전 즐겨찾기 페이지 여기도 휑하다... 이번에 꾸민 즐겨찾기 페이지 즐겨찾기 목록 인터넷강의 사이트 유튜브 웹툰 뒤로가기 어두운 느낌으로 해보고 싶어서 나름 열심히 만들어 봤지만... 디자인과는 안 친한 걸로.. 예전 이력서 페이지 여기는 그냥 배경만 좀 넣으려고 한다. 이력서 성명 김00 생년월일 1990.00.00 연락처(핸드폰) 010-0000-0000 e-mail kim0000@kim0000.com 현 주소 서울..

Web 2024.04.14

CSS 우선순위, Custom properties, 2D, Animation

CSS 우선순위 - 동일한 속성을 적용할 경우 나중에 적용한 것이 우선된다. - 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선된다. - 내부, 외부, 인라인 스타일 시트 중 인라인을 우선 적용한다. -!important를 적용하면 가장 우선 적용된다. - 우선순위 계산 - inline: 1000점 - id: 100점 - class, 속성 선택자: 10점 - element: 1점 더보기 CSS 파일 코드 div { background-color: whitesmoke; } HTML 파일 코드 CSS 우선순위 div 1번 div 2번 div 3번 div 4번 div 5번 li 1번 div 6번 div 1번은 인라인 스타일을 가장 우선적으로 적용하기 때문에 aqua 색상이 ..

Web/css 2024.04.13

레이아웃, 플렉스(flex) 레이아웃, 미디어 쿼리(media query)

z-index - HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있는데, 겹쳐지는 요소들의 순서를 결정할 때 사용한다. 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래에 위치하게 된다. # 사용 방법 요소 { css 코드 z-index: 숫자; } 더보기 z-index 1번째 div 2번째 div 3번째 div float - HTML 요소가 수평으로 나열된 주변의 다른 요소들과 자연스럽게 어울리도록 만든다. - float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려지고, 요소의 뱡향은 left, right로 결정한다. - 컨텐츠의 크기만큼만 영역을 설정하고, float를 적용받은 요소는 다른 요소(배경)보다 위에 위치하게 된다. # 사용 방법 요소 { cs..

Web/css 2024.04.12

나만의 웹 사이트 꾸미기..? 3

나만의 웹 사이트 꾸미기 세 번째!! 이번에 꾸며볼 페이지는 로그인, 회원가입 페이지이다. 예전 로그인 페이지 이번에 꾸민 로그인 페이지 더보기 로그인 아이디 비밀번호 로그인 아이디, 비밀번호 찾기 예전 회원가입 페이지 이번에 꾸민 회원가입 페이지 회원가입 아래의 정보를 입력하세요. · 아이디 : · 비밀번호 : · 이름 : · 생년월일 : · 성별을 선택하세요. 남자 여자 전화번호 : 이메일 : 회원가입 나름 열심히 꾸며봤지만... 디자인 감각은 없는 것으로... 회원가입 페이지는 후에 추가할 계획..

Web 2024.04.11

CSS 배경, 디스플레이, 폼, 위치

CSS 배경 설정 background-color - HTML 요소의 배경색을 설정한다. # 사용 방법 요소 {background-color:색정보} 더보기 css 배경1 배경 적용하기 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quam dolorum pariatur quidem, eos aliquid repudiandae ipsa dignissimos ullam! Aut corrupti quia possimus, assumenda odit voluptate? Ipsa ut est rem? background-image - HTML 요소의 배경으로 나타날 배경 이지미를 설정한다. - 배경 이미지의 기본 반복 설정이 되어 나타난다. # 사용..

Web/css 2024.04.10

나만의 웹 사이트 꾸미기..? 2

나만의 웹 사이트 꾸미기 두 번째! 이번에는 뉴스기사 페이지 부분을 조금 꾸며보겠다. 지난번 뉴스기사 페이지 이번에 꾸민 뉴스기사 더보기 뉴스기사 "SON, 아기 생겼을 때 가장 먼저 와준 존재"... 손흥민 '400경기 출전' 데이비스→케인→기성용 '동료들 축하 세례'" 기사입력 2024.04.04. 오후 01:53 최종수정 2024.04.04. 오후 02:01 출처: 스타뉴스 토트넘 400경기 출전 대기록을 이룬 손흥민(32·토트넘)이 직접 소회를 전했다. 손흥민은 4일 자신의 소셜네트워크서비스(SNS)를 통해 "우리 클럽에서 400경기에 출전했다는 것은 특별한 이정표다. 나와 가족에게 정말 자랑스럽다"고 전했다. 이어 "비록 직전 웨스트햄전에서 원하는 결과를 얻지는 못했지만 여러분과 함께 지금까지의..

Web 2024.04.10

CSS(Cascading Style Sheets)

CSS 문법 - HTML 문서 인라인 스타일 # HTML 요소 내부에 style 속성을 사용하여 적용하는 방법 인라인 스타일은 요소 내부에 style 속성을 사용하여 지정하는 방식이다. 이 방법은 다른 스타일보다 우선순위가 높다. 하지만 유지 보수가 어려워 잘 사용하지 않는다. 내부 스타일 HTML 문서의 사이에 요소를 사용하여 적용하는 방법 # 예시 더보기 CSS를 적용하는 방법 인라인 스타일 내부 스타일 외부 스타일 내부 스타일은 HTML 문서 내부에 css 텍스트 인권에 대한 무시와 경멸이 인류의 양심을 격분시키는 만행을 초래하였으며, 인간이 언론과 신앙의 자유, 그리고 공포와 인권에 대한 무시와 경멸이 인류의 양심을 격분시키는 만행을 초래하였으며, 인간이 언론과 신앙의 자유, 그리고 공포와 인권에..

Web/css 2024.04.10