FRONT-END

[소셜미디어로 공유될때 우선제공]

카카오톡

<meta property="og:type" content="website" />
<meta property="og:site_name" content="Starbucks" />
<meta property="og:title" content="Starbucks Coffee Korea" />
<meta property="og:description" content="설명~~~~" />
<meta property="og:image" content="./images/starbucks_seo.jpg" />
<meta property="og:url" content="https://starbucks.co.kr" />

og:type: 페이지의 유형(E.g, website, video.movie)
og:site_name: 속한 사이트의 이름
og:title: 페이지의 이름(제목)
og:description: 페이지의 간단한 설명
og:image: 페이지의 대표 이미지 주소(URL)
og:url: 페이지 주소(URL)

트위터

<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="Starbucks" />
<meta property="twitter:title" content="Starbucks Coffee Korea" />
<meta property="twitter:description" content="설명~~~~" />
<meta property="twitter:image" content="./images/starbucks_seo.jpg" />
<meta property="twitter:url" content="https://starbucks.co.kr" />

twitter:card: 페이지(카드)의 유형(E.g. summary, player)
twitter:site: 속한 사이트의 이름
twitter:title: 페이지의 이름(제목)
twitter:description: 페이지의 간단한 설명
twitter:image: 페이지의 대표 이미지 주소(URL)
twitter:url: 페이지 주소(URL)

─────────────────────────────────────────────────────

구글 매터리얼 사용 선언

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

─────────────────────────────────────────────────────

스타벅스제작

position : absolute를 주기위해
자식요소에는 width와 height가 정의되어야하며 가운데 배치할시 top,bottom외에도 margin :auto도 적용되어야함

a태그 링크 설정이 안되었을시
#이나 javascript:void(0)으로 임시지정

메뉴마다 사이에 세로줄을 넣는것은 ::before을 사용하여 width 1px의 height 12px정도의 black 줄을 만든다.

검색버튼과 검색창이 곂쳐있을때 material-icons만 눌러도 검색창이 열릴수 있도록

먼저 

        <div class="search">

          <input type="text">

          <div class="material-icons">search</div>

        </div>

에서 자바스크립트를 활용해 search 클래스를 가진 div를 추출한다

const searchel = document.querySelector(".search")

이후 input 버튼을 추출한다 const searchinputel = searchel.querySelector("input")

searchel이 클릭될때 input에 포커스를 가동시킨다.

searchel.addEventListner("click",funtion() {searchinputel.focus()});

클릭시 통합검색 placeholder와 검색버튼을 없애기위해

searchinputel.addEventListner("focus",function() {searchel.classList.add("focused"), searchinputel.setAttruibute("placeholder,"통합검색")

추가하여 searchinputel이 focus 되면 searchel에 focused클래스를 추가하고 placeholder로 통합검색을 띄운다.

반대로 포커스가 취소되면

searchinputel.addEventListner("blur",function() {searchel.classList.remove("focused"), searchinputel.setAttruibute("placeholder,"")

이후

css에서 focused와 search가 클래스가 포커스중일때 공존하면 검색버튼을 투명화시킨다.

opacity:0;

material.setAttribute('style','opacity:0') 이란 style=""이 들어가고 opacity:0이 되어

요소 속성에 style="opacity:0"이 들어가게된다.

fixed는 top이나 bottom값이 없을시 요소의 원래위치로 이동된다. 개발자도구 요소클릭으로 현재 들어갈 위치확인가능

자식선택자만 css선언할때는 예를 들어 div아래 ul태그가 자식선택자와 하위선택자 모두에게 있을시 > 없이 .클래스선택자를 할시 2개 모두에게 적용되므로 부모 > .자식클래스를 통하여 하위선택자는 빼고 자식만 선택하여 선언한다.

div등 블록요소는 내부에 값이 없으면 가로는 최대한 늘어나려고하고 높이는 0이되므로 높이를 지정해주어야 크기가 나타나며 값이 있으면 높이를 지정하지않아도 값이 다들어갈만큼 높이가 auto로 정해진다.

[JS구문종류]
dash-case 하이푼사용
snake_case 언더바사용
camelCase 첫단어는소문자후 단어첫단어는대문자로
PascalCase 모든단어 첫글자는 대문자로

String 문자 "abc"
Number 숫자 123
Boolean 불린데이터 true, false

[함수선언 VS 함수표현]
기명함수/함수선언!
function hello( ) {console.log("a")}

익명함수/함수표현!
let world=function( ) {console.log("a")}

getName:function() {return this.name}
this란 자기가포함한 데이터들{ }사이에서 .name를 찾는다.

[DOM API]

요소1개찾기
변수 = document.querySelector('.box')

요소모두찾기
변수 = document.querySelectorAll('.box')

찾은 여러요소들에 반복적으로 함수 실행
변수.forEach(function(반복매개변수, index) { 함수내용 })

index생략가능
반복매개변수에는 앞 변수의 여러요소를 하나하나 나눈거 하나씩을 넣고 index는 0부터 순서대로 번호가 써진다.

핸들러-특정동작감지시 특정동작하기
변수.addEventListner(1,2)
청취하고있다가
1번 동작시 예를들면 "click"같은 마우스 좌 클릭
2번 익명함수 등 인수 실행 예를들면 function( ) {boxel.classList.add("active")} // active클래스를 boxel에 넣음

특정변수에 클래스 추가하기
변수.classList.add("active")

특정변수에서 클래스 삭제하기
변수.classList.remove("active")

특정클래스가 있나 없나 boolean으로 저장하기
let 변수=boxEl.classList.contains('active')
contains를 써서 있나 없나 확인하며 let으로 선언한 변수에는 True 또는 False 저장

text만 출력하기
.textContent 이며 이것은 값을 지정도 할수 있다.

메소드 체이닝(문자)
a.split('값')
'값'을 기준으로 앞뒤로 나누어 배열로 만듬
값을 안넣을시 a 문자 하나하나 배열로만듬

a.reverse()
a 값을 거꾸로 만듬

a.join('값')
배열된 a 값들에 '값'을 사이 사이넣어 하나의 문자로 합침

flex container 부모요소 축 정렬

수평정렬 : 자식에게 적용하기위해 부모요소에 display:flex를 준다.
flex적용시 부모는 flex container가 되고 자식은 flex items가 된다.

flex종류 : flex와 inline-flex
flex는 기본 block 값을 가지므로 가로세로가 auto
inline-flex는 inline값을 가지므로 가로세로가 최대한 작으려고 맞춤

[flex를 준 부모요소에 적용할 값들]

1. flex-direction : 주 축을 설정
row(수평정렬) 기본값
row-reverse 행축(우-좌)
column (수직정렬)

2. flex-wrap : 줄 바꿈
no-wrap 기본값
wrap 크기를 보장하기위해 줄 바꿈

3. justify-content : 주 축 정렬 방법 (수평)
flex-start 기본값
flex-end 플렉스 컨테이너 끝을 기준으로 오른쪽으로 밀어버림
flex-center 가운데로 배치함

4. align-content 교차축의 여러줄(한꺼번에) 정렬(수직)
flex-start 맨위가 시작 기준으로
flex-end 아래가 시작 기준으로
center 중간이 기준
조건 1: wrap으로 되어야하며 부모에게 여백이있어야하며 자식이 2줄이상이어야함.

5. align-items 교차축 한줄 정렬(수직)
flex-start 맨위가 시작 기준으로
flex-end 아래가 시작 기준으로
center 중간이 기준

─────────────────────────────────────────────────────

[flex item 자식요소]

order 순서 1 2 3
0 기본값 숫자가 작을수록 먼저

flex-grow 증가 너비 비율
0 기본값 숫자가 증가비율

flex-shrink 감소 너비 비율
1 기본값 숫자가 증가비율

flex-basis 공간 배분전 기본너비설정
auto 콘텐트너비기본값
0 기본너비가 없음

─────────────────────────────────────────────────────

전환 transition

transition : 속성명 지속시간(필수) 타이밍함수 대기시간

transition-property : 속성이름
transition-duration : 지속시간(필수)

transition-timing-function : 타이밍함수
값
ease 느리게-빠르게-느리게
linear 일정하게
ease-in 느리게-빠르게
ease-out 빠르게-느리게
ease-in-out 느리게-빠르게-느리게

transition-delay : 대기 시간 지정

2D,3D 변환함수

transform : 변환함수1 변환함수2 변환함수3;
transform: 원근법 이동 크기 회전 기울임;

[2d변환함수]
translate(x,y) 이동
translateX(x) 이동
translateY(y) 이동

scale(x,y) 크기배로증가

rotate(degree)회전 // rotate(14deg) 14도회전

skewX(x) x축기울임
skewY(y) y축기울임


[3d변환함수]
rotateX(x) 회전x축 *perspective 랑 같이 써야함
rotateY(y) 회전x축  *perspective 랑 같이 써야함

perspective(n) 원근(거리) 바라보는위치 *transfrom맨앞에 작성

perspective 원근법 기준 위치
perspective: 600px; 관찰대상의 부모 (선호)
transform: perspective(600px); 관찰대상자체

backface-visibility 뒷면 숨김 여부 (rotate로 회전시켰을때 뒷면)
visible 기본값 뒷면보임
hidden 뒷면 숨김

─────────────────────────────────────────────────────

[오버워치 만들면서 Feedback]
1. width를 잡았을때 페이지를 줄이면 요소가 잘려나가거나 덮어질때 max-width로 주어서 최대 가로 밑으로는 자유자재로 크기를 줄였다 폈다한다.

2. hover나 가상클래스를 사용하면 변화시 transform같은 값들이 기존 설정 값에서 변화한 값으로 다시 설정되므로 확인이 다시 필요하다.

3. 요소가 곂쳤을때 margin으로 공간을 줄수도 있지만 쌓임요소순위에 의한 z-index를 기본값인 0 이상으로 주어도 된다.

4. 백그라운드 이미지의 위치는 포지션으로 이동시키지 않고 transform: translate(px)로 가능하며 skewX(~deg)를 활용해 기존에 기울어짐에 +-를하여 0으로 만들어주면 다시 이미지가 기울어지지 않는다.

5. 백그라운드 이미지 포지션을 센터로 주어 가운데 맞출수있으며 굳이 포지션을 X,Y값으로 이동시킬 필요가 없다.

6. 클래스 작성을 할때 동일한 값이 반복되는것만 한 클래스에 모아쓰고 다른값들이 들어가는것은 개별적으로 클래스를 생성한다.

7. 100vh란 뷰포트의 100%가 세로길이가 된다.

background-size

값 cover는 뒷 요소 가로,세로 중 더 넓은 부분에 맞춰서 이미지가 들어가게되고

값 contain은 뒷 요소 가로 세로 중 더 짧은부분에 맞춰서 이미지크기가 조정된다.

background-attachment

기본값은 scroll

fixed로 입력시 뷰포트에 이미지가 고정된다 이미지가 스크롤되어 올라간다

position

기본값 static 값

relative 자신을 기준 자신을 기준으로 옮긴것 이므로 이동전 위치에는 자신이 있고 옮긴 위치에는 허상이다.

값 absolute 부모를 기준 (relative한 부모) 공중에 붕 뜬다. 그러면서 아래있던 것들이 밑으로 깔리게되고 서로간의 상호가 무너짐 부모에게 relative를 주고 자식에게 absolute와 이동값들을 주면 부모를 기준으로 이동하게되며 부모에 static의 기본값을 주고 부모의 부모에게 relative를 주면 부모의 부모가 다시 기준이된다. 결국에는 부모가 되지 않을 값에는 static 부모가 되어 기준이 될 부모에겐 relative를 준다. 부모가 결국없을시(모두 static) 뷰포트 기준으로 움직임

값 fixed 뷰 포트를 기준 fixed시 스크롤이 있어 내려도 그자리에 계속 나타나게 됨

인라인요소에 position을 fixed, absolute 주게되면 자동으로 inline에서 block으로 display가 변경되고 가로세로 길이도 지정가능하게됨

요소 쌓임순서

1. position의값이 relative, absolute, fixed등 값이 있을때 위에 쌓임

2. 1번 조건에 다 해당 할시 z-index의 값이 높을수록 위에 쌓임

3. 1,2번 같을시 html 구조상 마지막에 작성한 요소가 위에 쌓임

width, height :
기본값 auto

div :
기본값 auto
블록요소로 부모크기만큼 자동으로 늘어남

max-width,max-height :
가로/세로 너비 최대 제한
min-width,min-height :
가로/세로 너비 최소 제한

em: 1em = html 기본 사이즈 16px 글자와 같은(font-size)는 상속되어 부모에서 설정 시 자식도 물려받아 em의 단위로 바뀐다.

rem: html에서 설정한 font-size에 따라 1em=font-size로 바뀐다.
vw, vh: 뷰포트의 비율에 따라 사용 50vw, 50vh 절반만큼 사용

box-sizing

사용용도 : padding이나 border등 추가할시 기존 width와 height에서 커지는것을 계산하여 크기를 맞춰줌

기본설정은 content-box

자동계산은 border-box 는 width와 height를 border까지 영역을 포함하여 계산

overflow 넘침을 당하는 부모에게 적용시킨다.

기본값 visible 넘치던 말던 보여줘라

hidden 넘치는걸 잘라라

scroll 가로,세로모두 스크롤을만들어 보여줘라

auto 넘치는 부분만 스크롤을 만들어라

font 폰트
line-height :위아래 줄 간격
숫자만 입력시 기본폰트X숫자가 간격
px로 입력시 숫자px가 간격
결론은 line-height의 수치가 줄 간의 간격사이에 해당 크기만큼의 폰트크기의 투명글이 들어간다는것
폰트크기에 따라 line-height를 비율로 변환하게 하는것이 좋으므로 px가아닌 배수로지정하는것이 관리면에서 편함

font-family: 글꼴1,글꼴2, 글꼴계열(필수)
띄어쓰기 글꼴은 ""큰따옴표로묶기 또는 전부다 큰따옴표로 묶어도 상관없음

인라인과 블록

인라인은 글자로써 줄바꿈 시 하나의 글자로써 띄어쓰기가 생긴다. 자신의 컨텐츠만큼 크기가 줄어든다.

인라인은 글자요소라서 가로세로 사이즈를 지정할수없다. 인라인은 위아래여백은 추가할수없다. 인라인은 블록요소를 자식으로 불가능하다.

블록은 부모크기만큼 자식이 늘어나려고함

a태그 새탭열기 targer="_blank" 시 현재탭이아닌 새탭이 열린다.

input은 placeholder=" "를 사용하여 입력할 값의 힌트를 value=" "를 사용하여 미리 값을 입력해두는 기능 사용가능

input을 label태그로 묶어 명칭을 넣어줄시 명칭클릭시에도 체크박스가 작동됨

table요소는 table-tr-td로 tr은 행 td는 열 td에서는 colspan=" " 를 통해 열의 크기를 늘림

JS스크립트 사용관련

<태그 title="설명"> 마우스 올릴 시 설명출력

<태그 data-이름="값"> 전체영역에서 사용할수있는 값저장

head에서 main.js 선언이 되었으나 body에 문구가 js실행되지 않을시 head에 선언된 main.js를 defer src로 선언해준다. defer란 html문서가 모두 해석된후 js를 해석하겠다는것.

CSS연결방식(import)

@import url("./~")

다른css를 메인css로 가져온다 메인 css가 모두 수행되고 나서 연결한 다른 css가 실행되므로 지연의 장단점이있다.

태그선택자 . class선택자{ }

span과 orange일때 { }선택적용

span . class

자식선택자(바로아래자식)

부모 > 바로 아래 자식의 class선택자 { }

li > .class

하위선택(최상위 부모)

부모 . 자식의 class선택자 { }

div . class

인접형제선택자 .class선택자 + 태그 { }

클래스와 태그 인접 아래 다음 하나 선택

.class + li

일반형제 선택자

.class선택자 ~ 태그 { }

클래스와 태그 인접 아래부터 모두 선택

자식태그와 자식클래스를 함께 쓸땐 붙여써야하고 부모태그와 자식클래스를 같이쓸땐 띄어써야함

─────────────────────────────────────────────────────

가상클래스 CSS에서 어떤 동작을 할때 하는 hover

hover는 마우스를 올릴시 작동하는 것 .box:hover { }

active는 마우스로 클릭을 유지하는동안 작동하는것 .box:active { }

focus는 사용자한테 데이터를 입력받는 요소들인 input, button 같은것들에 그대로 적용

input:focus { } focus는 입력받는요소에만 작동하지만 div나 span 같은 요소들에도 적용할수있다. tabindex속성을 통해 focus 요소를 만들수있다. tabindex 값을 -1로 주어 최우선 순위를 지정해주는것이다. <div class="box" tabindex="-1">

transition : 1s hover나 변화작동시 초단위로 천천히 변화, 지연

─────────────────────────────────────────────────────

가상 클래스 선택자

.fruit span : first-child{ }

<div class="fruit">

<span>1 //first-child

<span>2

.fruit span : last-child{ }

<div class="fruit">

<span>1

<span>2 //last-child

.fruit *:nth-child(2)

//fruit클래스의 2번째 요소

.fruit *:nth-child(n)

//fruit클래스의 n번째 요소

n은 0부터1씩증가로 결국 숫자전체

.fruit *:not(span) //span을 제외한 전부*

─────────────────────────────────────────────────────

가상요소선택자
추가할 내용에는 내용이없어도 content:""가 있어야한다.

.클래스 :: before
{content:"내용"}
클래스를 가진 태그 내부의 요소 앞에 내용삽입

.클래스 :: after
{content:"내용"}
클래스를 가진 태그 내부의 요소 뒤에 내용삽입

{content: ""}
width나 height는 content가 글자이므로 인라인이다. 그래서 display:block으로 블록처리해주어야 나타난다}

─────────────────────────────────────────────────────

속성선택자

[속성="값"] { 속성 : 값 }

─────────────────────────────────────────────────────

CSS 강제상속 자식 css속성 값에 부모의 값을 물려받기위해 inherit을 쓴다.

─────────────────────────────────────────────────────

선택자 우선순위
점수매기기
1. 속성값 뒤에 !important; 무한점
2. 인라인(style="") 1000점
3. id(#) 100점
4. class(.) 가상클래스 hover,focus,active포함 10점
5. 태그 (::before 같은 요소선택자포함) 1점
6 전체(*) 0점 , 상속 0점

VSCODE의 주요확장기능 설치

1. 줄맞춤기능 beautify 확장자 다운로드후 바로가기 설정으로 beautify selection 설정

2. 앞뒤태그자동화 auto rename tag 설치

3. 실행탭생성 live server 설치

CSS 사용 선언 

<link rel="stylesheet" href="./main.css">

JAVAscript 사용 선언

<script src="./main.js"></script>

파일경로의 주변경로와 절대경로

./ 주변경로 (생략가능)

../ 상위폴더경로 (밖으로 한번더 나가세요)

http 절대경로

/ 루트(최상위)경로

파일명을 index로 할시 브라우저는 index를 우선실행한다.

크로스사이트를 위해 브라우저 마다 각기 다른 CSS-Base를 리셋하고 초기화하기위해 reset-css 구문을 head에 선언한다.