loginForm.html
mycss.css
fontawsome
mediaquery 반응형
13. CSS media query와 반응형 레이아웃
적응형 웹 : 기기에 따라 다른걸 보여줌. 주소가 다름. www.naver.com / m.naver.com
반응형 웹 : 페이지 웹은 동일함. 웹주소 동일 텝의 모양위치같은데 화면사이즈에 맞게 변경.
pixcel 디스플레이 구성하는 최소 단위, 동일 사이즈의 화면을 네모가 몇개냐가 해상도를 결정 필셀이 작아질수록..정밀한 이미지 구현. 작은화소의 이미지를 큰 화면에서 보면 이미지가 깨질 수. ppi pixcel per inch 필섹과 해상도는 별개
viewport : 화면상의 표시 영역. 스마트폰 virtual viewport 980으로 많이 설정함.
사용자가 보기 편한 정도는 폰트 12~16px, 스마트폰 virtual viewport 980px
meta viewport 업글 : viewport에 원하는 너비를 넣으면, 해당 너비에 맞게 웹브라우저가
페이지를 표시함
* 다양한 디스플레이에 맞는 웹페이지를 구현하려면 다음 태그가 필요하다.
<meta name="viewport" content="width=device-width">
1) 미디어 쿼리 (css3)
CSS 미디어 쿼리를 사용해 반응형 레이아웃 구현가능
* 문법
@media 미디어 타입 and (미디어 조건) {
//css.. 조정 변경할부분
}
* 미디어 타입 유형
all
print
screen
speech
* 미디어 조건
width : veiwport 너비, min-width, max-width 많이 사용
height : veiwport 높이(px)
device-width : 디바이스의 물리적 너비 (px)
device-height : 디바이스의 물리적 높이
orientation : 디바이스 방향 (가로 landscape, 세로 portrait)
aspect-radio : viewport 가로세로비
* 논리연산자
and : 조건 모두 참일때 참
not : 조건 거짓일 때 참
only : 구형브라우저 지원을 위해 only 붙여줌
, : 조건을 나열할 때 구분자로 사용, 이 때 하나만 만족해도 전체가 참(or처럼 작동)
// 화면너비가 1024px 이하일 때 css 적용
@media (max-width: 1024px) { ...css... }
// 화면 너비가 1024px 이하이고, 브라우저 화면일때만 css 적용
@media only screen and (max-width : 1024px) { .... }
// 화면 너비가 1200px 이상이고, 브라우저 화면이며, 디바이스 가로 방향일 때만
@media (only) screen and (min-width: 1200px) and (orientation: landscape) { .... }
// 모든 화면에서 디바이스가 세로방향이 아닐 때 css 적용
@media not all and (orientation : portrait) { .... }
2) 참고 해상도 (세로기준)
320 ~ 480px 스마트폰
481 ~ 768px 태블릿
769 ~ 1024px 저해상도 노트북
1200 ~ 1200px 데스크탑
1201 ~ 고해상도 데스크탑 및 TV 노트북...
폰트 11:32
https://spoqa.github.io/spoqa-han-sans/en-US/
부트스트랩 12:10
1. cdn복사
[실습]
table 태그를 이용하여 본인만의 회원양식을 만들어보세요
(디자인은 시간이 남으면...)
자바스크립트,,,
[javascript]
1. 자바스크립트
1) 객체기반의 스크립트 프로그래밍 언어.
웹브라우저 내에서 많이 사용, 다른 응용프로그램의 내장 객체에도 접근 가능한 기능있음.
node.js : 자바스크립트 엔진에 기반해 만들어진 서버 사이트 플랫폼
2. 기본사항
# 자바스크립트 작성 위치
1) HTML 문서의 <head> 태그 안 -> <script> 자바스크립트 작성 </script>
2) HTML 문서의 </body> 태그가 닫히기 전에 <script> 자바스크립트 작성 </script> (추천)
3) 확장자 .js 페이지로 분리해서 만들고
<head> 안에 <script src="js파일경로"> 태그로 링크 걸기 (추천)
# 주석
html : <!-- 내용 --!>
css : /* */
js : //한줄주석
/* 여러줄 주석 */
문장의 끝을 알리는 ; 작성
3. 변수
var let const (뒤 두개는 ES6버전)
var 전역변수
let 자바의 지역변수
const 상수
# 변수 선언
var 변수명;
# 변수 선언 + 초기화
var 변수명 = 값;
var 명수명=값, 변수명=값; //////////10/3.14/[1,2,3,4,5]; - 동적언어 자바는 int 변수명 long 변수명 double 데이터타입 앞에 적어주는데. js는 안그럼
4. 데이터 타입
1) 숫자형 Number
정수 10진수/16진수든 ...
실수 모두...
2) 문자형 String
양끝을 따옴표로 묶은 형태 (홑따옴표도 가능) //구분안함
3) 논리형 Boolean
true/ false 값을 갖는 형태
4) undefined / vs. null
- 변수를 선언만 하고, 초기화하지 않은 상태. 값이 할당되지 않음 / null = 값이 없음
- 함수 인자값 없이 호출되는 경우
- 존재하지 않는 프로퍼티를 접근한 경우
5. 연산자
1) 산술연산자
+ - * / %
2) 대입연산자
=
3) 복합대입연산지 (산술+대입)
+= -= *= /= %=
4) 증갑연산자
증가 : ++
감소 : --
전위형/후위형 존재
5) 비교연산자
> >= < <=
== : 데이터 타입 관계없이 같으면 true "10"==10 true
=== : 데이터 타입도 일치해야 true
!= : 데이터 타입 관계 없이 달라야 true / 같으면false
!== : 데이터타입도 일치해야 false
6) 논리연산자
||
&&
!
7) 삼항연산자
? :
8) 연산자 우선순위도 동일 (높은 순을 위에, 좌-> 우)
() []
단항연산자 : ! ++ -- (좌<- 우)
산술연산자 : * / % + -
(비트연산자) << >> >>>
비교연산자 : > >= < <= == != === !==
(비트논리): & ^ |
논리연산자 : && ||
삼항연산자 : ?: (좌<- 우)
대입(복합대입)연산자 : = += -= *= /= %=
6. 입력문
: 입력창을 통하여 데이터를 입력받는 기능.
변수 = prompt("메세지");
변수 = prompt("메세지", "default답변"); ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ다시해보기
입력받는 데이터는 모두 문자타입으로 가져옴. so 형변환 필요
7. 형변환
1) 자동형변환 (묵시적 형변환)
- 숫자 + 문자 -> 숫자
- 불린 + 문자 -> 문자
- 불린 + 숫자 -> 숫자ㅡㅡㅡㅡㅡㅡㅡㅡㅡ특이
(true = 1, false =0)
쉽게 하는법 10 +"" --> "10" (비어있는 문자열을 합치면 문자가 됨. 자동형변환)
2) 강제형변환 (명시적 형변환)
- 문자 -> 숫자
정수 : parseInt()
Number() /통합
실수 : parseFloat()
Number()
- 숫자 -> 문자
일반숫자 : String()
16진수 : toString(진수)
실수문자 : .toFixed(소수점 자리수)
js02.html
8. 제어문 < 3:36
조건문 : if, switch
반복문 : while, do while, for
보조제어문 : continue, break
9. 조건문, 반복문 자바와 동일
3:46 정적문서 보는 방법?
10. 배열 array : [] js에서는 대괄호~~
1) 배열 객체 생성
#1.
var 참조변수 = new Array(); //비어있는 배열 만들기
참조변수[0] = 1;
참조변수[1] = 2;
#2.
var 참조변수 = new Array(값, 값, 값, 값... ) ; //초기값 넣어부면서 객체 생성 한번에
#3.
var 참조변수 = [값,값,값,값,..]; //리터럴방식으로.. arrayList처럼 방크기 넣는대로 들어가~~ 데이터타입도 상과없이 넣을수있어
var 참조변수 = []; //빈배열 만들기 같음.
2) 배열 기본 메서드(함수)
.length : 배열의 길이
.push(값) : 마지막에 데이터 추가 // arrayList .add() / hashMap .put()ㅡㅡㅡㅡㅡㅡㅡ
.pop() : 마지막 데이터 꺼내서 리턴하고 배열에서 삭제 //
.shift() : 배열 첫 번째 데이터 꺼내서 리턴, 배열에서 삭제 ㅡㅡㅡㅡㅡㅡㅡ참고만할거면 그냥 인덱스번호로~
.unshift(값): 배열 첫 번째에 데이터를 추가
.join("연결문자") : 배열 요소들을 연결문자로 연결해서 1개의 문자열로 리턴
.concact() : 문자열 연결
.sort() : 오름차순 정렬
.reverse() : 요소를 반대로
11. 함수 function
// 매개변수X, 리턴X
function 함수명(){
// 실행 코드들...
}
// 매개변수O, 리턴O
function 함수명(매개변수명, 매개변수명, ...){
// 실행 코드들...
return 값;
}
실습 회원가입 폼 만들어보기
'코딩' 카테고리의 다른 글
| 2022.03.07_20일차_javascript(3)ㅡㅡㅡㅡㅡ (0) | 2022.03.09 |
|---|---|
| 2022.03.04_19일차_javascript(2) (0) | 2022.03.06 |
| 2022.03.01_17일차_css(1) (0) | 2022.03.04 |
| 2022.02.28_16일차_html, 태그별 속성 (0) | 2022.03.02 |
| 2022.02.25_15일차_스트림 (0) | 2022.03.01 |
댓글