css 뷰포트 이어서

미디어쿼리

출력되는 미디어에 맞춰서 보이게 하기 위해서 

768<= width && width<=1439

@media screen(all,print) and (min-width:768px) and (max-width:1439px){

    css에서 위에서 정의 된 코드들을 여기서 재정의한다. override

}

 

if(768<=width && width<=1439){

}else if(1440<=width){

}else{

}

 

 

범위에 해당하는 숫자는 하나만 차이가 나야지 빈공간이 있으면 에러남

 

외부파일로 미디어 쿼리하려면

<link media="쿼리 조건" href="파일경로">

import로도 할 수있다.

파일이 적으면 속도차이가 없지만 파일이 많고 자바스크립트와 함께 사용되면 css를 먼저 받아와야하기때문에 link를 통해서 css파일을 먼저 받아오는것이 좋은 방법이다.

 

<style media="쿼리 조건">

 

</style>

 

 

그리드 레이아웃

화면 폭의 넓이에 따라서 재배치를 자동으로하기 위해서 사용

장점

시각적으로 안정된 레이아웃

업데이트가 편한 웹디자인

요소를 자유롭게 배치

 

 

플렉서블 박스 레이아웃 = 플렉스 박스 레이아웃 = 플렉스 박스

그리드 레이아웃을 기본으로 여유공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수 있다

수평이거나 수직으로 배치한다. --> 1차원배열만 생각하며 디자인한다

그리드 레이아웃은 2차원배열

 

일단 플렉서블 박스에 들어가야할 것들을 담은 컨테이너의 display 속성값은 flex가 되어야한다.

display:flex;

 

인라인블록은 width값을 무시한다...?

플렉서블 박스들

flex-direction : row;

-> 한줄에 출력해->기본값

 

 

flex-direction: column;

->위에서 아래로 출력

 

display: inline-flex

영역이 남으면 왼쪽에서 오른쪽으로 간다 -> 단 컨테이너에 대한 공간은 무조건 확보하고 옆에 이어붙인다

 

flex-wrap : nowrap -> 플렉스 항목을 한줄에 표시 -> 화면이 줄어들면 갯수는 그대로인데 걍 크기가 줄어들기만함 -> 줄어들면 요소의 크기가 줄어든다.

flex-wrap : wrap -> 화면이 줄어들면 요소들이 아래로 내려감->요소의 사이즈가 변화가 없다

flex-wrap : wrap-reverse -> 화면이 줄아들면 요소들이 위로 올라감-->요소의 사이즈가 변화 없다

 

담는그릇이 어떻게 되는지를 쓰는거다->전체 대상

가로정렬

justify-content:

flex-start -> 왼쪽 정렬

flex-end -> 오른쪽 정렬

space-around -> 빈공간을 정확히 n등분한다

center->가운데 정렬

space-between -> 첫번째 와 끝항목을 양끝에 넣고 나머지를 같은 간격으로

세로정렬

align-items

flex-start 위에정렬

flex-end 아래정렬

center-> 중앙정렬

baseline -> 크기가 제각각인 도형들을 정렬할때 안에 들어있는 글자를기준으로 정렬한다.

stretch - > 항목을 늘려서 container크기에 맞춰줌

 

align-self->요소하나하나에 맞추고 싶을때

 

align-content

전체에 대한 거

 

 

요소들을 각각 이런 식으로 설정했다면

flex:1

flex의 총개수만큼 등분해서 나눈다 3이면 3개로 나눠 그중 3개차지해 이런식

 

 

flex-basis

-->폭으로 사용하는 기본크기-->초기사이즈 설정 -> 줄이면 글자가 적당히 표시될수 있을 정도까지는 출력해준다

-->이걸 설정하면 width를 설정해도 무용지물임

 

flex-grow

default는 0

요소안에서 글자를 제외하고 나머지 빈공간에 대한 것을 등분해서 한다

 

flex-shrink

만약에 container를 벗어나게 되면 각각의 크기가 어떻게 될지를 구한다 교수님예제에선 -55가 되면 그걸 기본 사이즈에서 빼주는데 flex-shrink의 크기만큼 곱한 값을 빼준다.그래서  등분한게 220인데

0은 그대로 크기를 쓰는거

 

https://choar816.tistory.com/119

[CSS] flex-basis, flex-grow, flex-shrink 개념 완벽 정리 & flex 축약법

 

상대적인 크기 지정

grid-template-columns:1fr 1fr 1fr

 

grid-template-columns: repeat(3,1fr)-> 위와 같은이야기

 

grid-template-rows:minmax(100px,auto) 글자갯수가 많을 때 최소 높이만 지정하고 나머지는 늘어나면 계속 늘어나도록한다.

 

 

grid-colum-start

grid-row-start

위와 같은것을 계산하기 힘들면

grid-template-areas를 사용하면된다.

grid-gap : 간격띄우기

 

 

JAVASCRIPT

script라는 태그필요!

body태그 앞에 삽입하면 된다. 뒤에다가 하면 오류남

스크립트는 맨아래 에 있는게 가장 바람직함

 html을 로드하고 실행하는 편이 낫기 때문에

 

 

var은 값을 도중에 다른 거로 바꿀수 있다

let 다른 거로 바뀌지 않아 안전해

const

 

 

	<script>
		//html 객체를 얻는다
		var heading = document.querySelector('#heading');
		//클릭 이벤트 핸들러 설정
		heading.onclick = function() {
			//css글자색ㅅ변경
			heading.style.color = "red";
		}
	</script>

 

 

 

alert(메세지)

var result = confirm(메세지) - >참 거짓 값이 들어옴

consol.log()

콘솔창에 로그를 찍어볼수 있다

 

new Date() - > 날짜를 가져옴

 

javascript에서는 array 인덱스를 넘어서도 에러가 나지 않는다.

 

== != 는 값만 같으면 같다고 해줌

=== , !==은 타입까지 비교해줘야함

자바스크립트의 전역변수

특정함수안에서 선언된 변수(지역변수)가 아니라 밖에서 선언된 거 아니면 함수 안에서 var키워드 없이 선언된거

 

호이스팅처럼 변수를 선언한 후에 다시 선언하여 대입하고 사용하면 프로그램 오류가 발생할 수있다 방지를 위해 let으로 선언한다.

let에 대한 선언은 사용전에 선언되어야한다. 그렇지 않으면 에러

(function(a,b){

sum=a+b;

}(100,200))

 

()는 바로 실행한다는 의미이다. {}다음에 바로오는 ()의 매개변수를 통해서 호출한다

 

람다식 함수를 사용할때는 변수에 const를 적어주는 것이 좋다!!실수로 함수말고 다른걸 대입해놓고 변수를 통해서 함수를 불러내려고 할수 있기 때문이다.

const hi = () => alert("안녕하세요")