코드메이트 [HTML,CSS심화] 12. 비밀글(txt파일) 불러오기 CSS코드메이트htmlCSS [HTML,CSS심화] 13. 방명록 만들기 먼저 이미지의 경우 프로필 이미지와 배경이미지 두개를 겹쳐서 만들었다. image태그엔 프로필이미지의 경로를 넣고, image태그에 id값의 background-image속성을 배경이미지로 설정하였다.... CSS코드메이트htmlCSS [JavaScript] 8. 함수 어떠한 기능을하는 코드 덩어리로 함수를 사용하는 이유는 똑같은 코드를 여러 번 작성할 필요가 없기 때문이다. ✅ 함수정의 함수의 이름 매개변수 실행문> 위에 함수는 add라는 이름을 갖고 num1과 num2를 매개변수로 가지는 함수로 num1+num2의 값을 띄워주는 기능을 하고있다. ✅ 함수의 값 반환(return) return구문을 가지는 함수를 변수와 함깨 호출하게되면, 그 변수에는 r... 코드메이트JavaScriptJavaScript [JavaScript] 6. 연산자 ✅ 산술 연산자 ✅ 대입 연산자 ✅ 증감 연산자 ✅ 비교 연산자 ==의 경우에는 타입에 상관없이 "값만" 같으면 true를 반환한다. ===는 두 변수가 값이 같아야 하며, 타입 또한 같아야 true를 반환한다. ✅ 논리 연산자 &&은 두논리식이 모두 참이어야만 참을 반환 ||는 두 논리식 중에서 하나만 참이어도 참을 반환 !는 논리식이 참이면 거짓을, 거짓이면 참을 반환... 코드메이트JavaScriptJavaScript [JavaScript] 5. 타입 및 변수 숫자(number): 자바스크립트에서는 다른 언어와는 다르게 정수와 실수를 따로 구분하지 않는다. 문자열(string): 큰따옴표("")나 작은따옴표('')로 둘러싸인 문자의 집합 불리언(boolean): 참과 거짓을 표현하는타입으로 true와 false가 있다. null: '값'이 정해지지 않은 것을 의미한다. undefined: '타입'이 정해지지 않은 것을 의미한다. 객체(object)... 코드메이트JavaScriptJavaScript [HTML,CSS 심화] 10. 미니홈피 사진첩 만들기 스크롤을 설정하는 속성은 overflow 이다. 스크롤은 안의 내용물이 컨테이너보다 클 때 스크롤이 필요하다. ✅ overflow: visible ✔ 내용물이 컨테이너보다 많으면 컨테이너를 뚫고 모두 그냥 보여진다. ✅ overflow: auto; ✔ 스크롤이 필요할 때만 스크롤이 생긴다. ✅ overflow: scroll; ✔ 항상 스크롤이 뜨게 된다. ✅ overflow: hidden; ... CSShtml코드메이트CSS [HTML,CSS기초]4-2.디자인 추가하기 : <head>태그에 css파일을 링크해줬다. : 제목은 <div>태그로 묶여있으므로 text-align: center; 로 가운데 정렬 하였다. : <p>태그 또한 text-align: center; 로 가운데 정렬하였다. : <img>태그는 위와 같은 방법으로 가운데 정렬 할수있다. :<a>태그를 정렬하는 방법은 <div>태그로 묶어서 정렬하는게 편하지만 그러면 글씨부분만 배경색이 지정되... 코드메이트코드메이트 [HTML,CSS기초]5-2.디자인 추가하기(2) : 글꼴 추가 코드 :글자 마다 색깔 다르게 적용... 코드메이트코드메이트 [HTML,CSS기초]6-2.나만의 음원차트 만들기 : line-height는 글자의 수직정렬 하기 위해서 사용, height와 똑같이 설정하면 중앙정렬이 된다. padding: 5px이 연두색 띠이고 margin:15px이 주황색 띠이다.... 코드메이트코드메이트 [HTML,CSS기초]7-2.오늘의 일기 :title클래스에 position을 fixed로 함으로 스크롤을 내려도 title클래스는 위치가 고정된다. 그리고 heigh = line-height 이면 글씨가 div의 수직 중간에 위치한다. : box클래스는 회색배경을 나타내는 클래스로 margin:auto 로 설정함으로써 회색배경이 화면 중간에 위치한다. : box클래스내부의 img태그에 대한 style으로 postion:relati... 코드메이트코드메이트 [HTML,CSS기초]11-2.Bootstrap 사용해보기 bootstrap을 사용하면 이미 만들어진 디자인 요소를 웹사이트상 링크와 코드를 통해 쉽게 불러와 사용할 수 있는 사이트이다. :먼저 bootstrap을 사용하고 싶으면 head태그안에 link태그 부분을 그대로 써줘야한다. : 버튼3개가 붙어있는 코드 : 카드를 만드는 코드... 코드메이트코드메이트 [HTML,CSS기초]12-2.네이버검색창 만들기 <input type="text">태그에 검색기능을 추가할라면 <form action="">태그를 이용해야한다. action에다가 검색링크를 써넣으면 해당 검색링크로 입력한 내용이 보내진다. 예를들면 이렇게 작성하면 input에다가 입력한 내용이 구글로 검색이 되는데 input의 name은 서버로 전달되는 이름으로 구글검색링크를 이용할 경우 'q'를 써야하고 네이버는 "query"를 사용한다... 코드메이트코드메이트
[HTML,CSS심화] 12. 비밀글(txt파일) 불러오기 CSS코드메이트htmlCSS [HTML,CSS심화] 13. 방명록 만들기 먼저 이미지의 경우 프로필 이미지와 배경이미지 두개를 겹쳐서 만들었다. image태그엔 프로필이미지의 경로를 넣고, image태그에 id값의 background-image속성을 배경이미지로 설정하였다.... CSS코드메이트htmlCSS [JavaScript] 8. 함수 어떠한 기능을하는 코드 덩어리로 함수를 사용하는 이유는 똑같은 코드를 여러 번 작성할 필요가 없기 때문이다. ✅ 함수정의 함수의 이름 매개변수 실행문> 위에 함수는 add라는 이름을 갖고 num1과 num2를 매개변수로 가지는 함수로 num1+num2의 값을 띄워주는 기능을 하고있다. ✅ 함수의 값 반환(return) return구문을 가지는 함수를 변수와 함깨 호출하게되면, 그 변수에는 r... 코드메이트JavaScriptJavaScript [JavaScript] 6. 연산자 ✅ 산술 연산자 ✅ 대입 연산자 ✅ 증감 연산자 ✅ 비교 연산자 ==의 경우에는 타입에 상관없이 "값만" 같으면 true를 반환한다. ===는 두 변수가 값이 같아야 하며, 타입 또한 같아야 true를 반환한다. ✅ 논리 연산자 &&은 두논리식이 모두 참이어야만 참을 반환 ||는 두 논리식 중에서 하나만 참이어도 참을 반환 !는 논리식이 참이면 거짓을, 거짓이면 참을 반환... 코드메이트JavaScriptJavaScript [JavaScript] 5. 타입 및 변수 숫자(number): 자바스크립트에서는 다른 언어와는 다르게 정수와 실수를 따로 구분하지 않는다. 문자열(string): 큰따옴표("")나 작은따옴표('')로 둘러싸인 문자의 집합 불리언(boolean): 참과 거짓을 표현하는타입으로 true와 false가 있다. null: '값'이 정해지지 않은 것을 의미한다. undefined: '타입'이 정해지지 않은 것을 의미한다. 객체(object)... 코드메이트JavaScriptJavaScript [HTML,CSS 심화] 10. 미니홈피 사진첩 만들기 스크롤을 설정하는 속성은 overflow 이다. 스크롤은 안의 내용물이 컨테이너보다 클 때 스크롤이 필요하다. ✅ overflow: visible ✔ 내용물이 컨테이너보다 많으면 컨테이너를 뚫고 모두 그냥 보여진다. ✅ overflow: auto; ✔ 스크롤이 필요할 때만 스크롤이 생긴다. ✅ overflow: scroll; ✔ 항상 스크롤이 뜨게 된다. ✅ overflow: hidden; ... CSShtml코드메이트CSS [HTML,CSS기초]4-2.디자인 추가하기 : <head>태그에 css파일을 링크해줬다. : 제목은 <div>태그로 묶여있으므로 text-align: center; 로 가운데 정렬 하였다. : <p>태그 또한 text-align: center; 로 가운데 정렬하였다. : <img>태그는 위와 같은 방법으로 가운데 정렬 할수있다. :<a>태그를 정렬하는 방법은 <div>태그로 묶어서 정렬하는게 편하지만 그러면 글씨부분만 배경색이 지정되... 코드메이트코드메이트 [HTML,CSS기초]5-2.디자인 추가하기(2) : 글꼴 추가 코드 :글자 마다 색깔 다르게 적용... 코드메이트코드메이트 [HTML,CSS기초]6-2.나만의 음원차트 만들기 : line-height는 글자의 수직정렬 하기 위해서 사용, height와 똑같이 설정하면 중앙정렬이 된다. padding: 5px이 연두색 띠이고 margin:15px이 주황색 띠이다.... 코드메이트코드메이트 [HTML,CSS기초]7-2.오늘의 일기 :title클래스에 position을 fixed로 함으로 스크롤을 내려도 title클래스는 위치가 고정된다. 그리고 heigh = line-height 이면 글씨가 div의 수직 중간에 위치한다. : box클래스는 회색배경을 나타내는 클래스로 margin:auto 로 설정함으로써 회색배경이 화면 중간에 위치한다. : box클래스내부의 img태그에 대한 style으로 postion:relati... 코드메이트코드메이트 [HTML,CSS기초]11-2.Bootstrap 사용해보기 bootstrap을 사용하면 이미 만들어진 디자인 요소를 웹사이트상 링크와 코드를 통해 쉽게 불러와 사용할 수 있는 사이트이다. :먼저 bootstrap을 사용하고 싶으면 head태그안에 link태그 부분을 그대로 써줘야한다. : 버튼3개가 붙어있는 코드 : 카드를 만드는 코드... 코드메이트코드메이트 [HTML,CSS기초]12-2.네이버검색창 만들기 <input type="text">태그에 검색기능을 추가할라면 <form action="">태그를 이용해야한다. action에다가 검색링크를 써넣으면 해당 검색링크로 입력한 내용이 보내진다. 예를들면 이렇게 작성하면 input에다가 입력한 내용이 구글로 검색이 되는데 input의 name은 서버로 전달되는 이름으로 구글검색링크를 이용할 경우 'q'를 써야하고 네이버는 "query"를 사용한다... 코드메이트코드메이트