variables

const a = 4 ; 
const b = 5 ; 
const myName = "star"
/**
 * a 의 값을 4로 변수 할당하고, 추후에 다른 숫자로 바꾸고 싶을 때 
 * 콘솔로그 안의 숫자를 바꾸는 대신 const a = 원하는 숫자로 바꿔주면 됨
 */
console.log(a + b);
console.log(a / b);
console.log(a * b);
console.log("hello " + myName); => hello star 출력됨 ㅎ 

const = 상수, 바뀔 수 없는 값 let = 바뀔 수 있는 값. 최초 한번만 선언하고
그 후로는 선언없이 변수를 수정가능

->myName은 star가 아닌 shinbyeolyi로 콘솔바뀜

데이터 타입 - boolean( false, true ) , null

null은 variable 안에 어떤 것이 없다는 것을 확실히 하기 위해 사용하는것 = 값이 없다 . (null 과 undefined 헷갈리기 시작... )

arrays

이런식으로 나여랗게 되면 콘솔창에서 구분하기가 어려워짐 -> [ ]괄호와 쉼표로 어레이 배열하여 만들것

const daysOfWeek = [mon , tue , wed , thu , fri , sat , sun]; 
console.log(daysOfWeek);

데이터 타입 - Objects

/**
 * Objects:
 * 
 */
//player[0] == name
//player[1] == points
const player = ["nicco", 1212, false, "little bit"]
// 이런식으로 배열해버리면 주석을 달지 않는 이상 배열 안의 값이 어떤 의미인지 추론하기가 어려움 

원하는 값을 가져오는 방법은2가지 ~~

업데이트(수정) 하는 법 :10->20점 : 마지막 배열 추가

:현재값에 +@ 하기

player.points = player.points + 20 //현재 20점에서 +20점을 더하기

console.log(player.points); // 40 나옴 ~ ~  ~

Functions

✅ argument 작성하는 방법

hello my name is + (이름) 나열할 때 hello~ 부분을 반복적으로 적지않는 방법 . ,

1.function(){} 2.function 변수(이름,나이){ } 3.변수("nicco",10),("dal", 20 ),("byeol",30 ); 값 넣기 4.fuction(nameOfPerson){ console.log(" hello~ " + nameOfPerson + " and I am " + age) }

plus 변수의 값 지정하고 더하는 콘솔 만들기

function plus(firstNum,secondNum){ console.log(firstNum + secondNum); } plus(10,20);

=30 -> fisrtNum, secondNum은 fucntion 안에서만 존재하는 값.,.,.,., 밖에다 쓰면 에러난다

const player = {
  name: "nicco",
  sayHello:function(otherPersonName){
    console.log("hi " + otherPersonName + " nice to meet you");

  },
};

player.sayHello("byeol");

조건문

/**condition  - isNaN  */
const age = parseInt(prompt("몇살이여?"));
console.log(isNaN(age));

if(condition){
  //condition == true

}else{
// condition = false
};

if(isNaN(age)){
  //condition == true
  console.log("숫자로 적어줘")
}else{
// condition = false
}

=>숫자로 입력하지 않으면 콘솔창에 확인표시가 나타난다

/**condition - if else -> 
조건의 두가지 다 false의 값일 때 마지막 드세요~~ 가 나올 수 있다 
else가 나오기 위에선 위 조건문들이 다 true x x 
*/ 

const age = parseInt(prompt("몇살이여?"));

if(isNaN(age)){
  console.log("숫자로 적어줘")

} else if (age < 18) {
  console.log("넘 어립니다")
} else {
  console.log("오케이 드세요")

}

/**condition
 *  - ifelse + &&(and) + ||(or)
 *  - 두가지 조건을 동시에 확인하기 
 * */ 
const age = parseInt(prompt("몇살이여?"));

if(isNaN(age)){
  console.log("숫자로 적어줘")
} else if (age < 18) {
  console.log("넘 어립니다")
} else if (age >= 18 && age <= 50) {
  console.log("ㅇㅋ가능")
} else{ age > 51
  console.log("안돼")
}

->마지막 else는 선택사항일 뿐 else if로 조건문을 마무리 해도 좋다

-> 음수의 경우를 입력했을 경우는? => 맨 처음 값에 or 을 넣어 0보다 작을 때 조건을 추가한다

||

(하나만 트루여도 or은 전부 트루..) true || true === true false || true === true true || false === true

(false가 되려면 or의 전부가 false) false || false === false

&&

true && true === true (둘 다 트루여야~ 트루)

false && true === false true && false === false false && false === false

console.log(  로그에_출력할_값  );

console.log(  값1, 값2, 값3...  );

💡브라우저 콘솔 사용해보기

console.log({name: '홍길동', age: 20, married: false});

- 콘솔 비우기: Ctrl + L - 윈도우, 맥 모두

2. 💻 Node.js의 REPL 사용해보기 Read Eval Print Loop node로 자바스크립트 명령 입력 모드 진입 후 입력 모드 종료: ctrl + c 2회

3. Node.js 환경에서 .js파일로 실행하기 VS Code에서 프로젝트 폴더 열람 (원하는 파일명).js 파일 생성 코드 입력 후 저장 node (파일명)로 실행 Code Runner 확장 기능 사용

윈도우: Ctrl + Alt + N 맥: control + option + N콘솔 비우기: Ctrl + L - 윈도우, 맥 모두

💡 흔히 활용되는 console 기능들d

console.log('로그 - 기본적인 출력'); console.info('로그 - 기능적으로는 log와 같음. 사용하기에 따라 용도 구분 가능'); console.warn('경고 - 문제가 될 수 있는 부분'); console.error('오류 - 에러 발생 상황');

( https://developer.mozilla.org/en-US/docs/Web/API/console 참고할것 )

lesson2. 주석과 세미콜론

주석 = comment = 컴퓨터는 무시하는 메시지로 사람에게 보여줄 목적으로 작성 코드에 대한 설명, 추후 진행해야 할 사항 등...

• 윈도우: ctrl + /
• 맥: command + /

세미콜론은 붙이나 안붙이나 큰 차이가 없으나 세미콜론을 붙여 구분하는것이 예외적 상황에 따른 오류를 막을수있음.. ( https://www.youtube.com/watch?v=hJjYvVOEO7s&t=19s 참고 )

lesson3. 변수와 상수

   let ->  변수 , 담긴 값이 바뀔 수 있는 주머니

  const -> 상수 , 값이 바뀔 수 없는 주머니

값들을 주머니에 담아 사용하기
const SALUTATION = 'Hello,';
let person = '철수';

console.log(SALUTATION, person);

경고창 띄우는 함수 alert() console.log()

또한 자바스크립트에 이미 사용되고 있는 변수명을 조심하자

class="수업" xx

( https://www.w3schools.com/js/js_reserved.asp)

name = "별이"; age = 30;

console.log(age) !codepen[shinbyeolyi/embed/KKbKZpg?default-tab=html%2Cresult]

🪓🔨변수없이 작성하게되면 위험한 점이 발생한다 ex: 다른 사람들과 프로젝트를 진행했을 때 중복해 썼을경우 (name = "별이" -> name = "민수" ) 마지막으로 선언된 내용으로 덮어씌워진다 ("민수")

   let ->  변수 , 담긴 값이 바뀔 수 있는 주머니

  const -> 상수 , 값이 바뀔 수 없는 주머니

따라서 변수를 선언함으로 중복되는지 확인해야한다 ->이미 사용중이니 다른 명령어를 사용하라는 경고창 뜸

let은 변수 이기 때문에 한번 선언후에도 다른값으로 바꿀 수 있다

반면 const는 절대로 바뀌지 않는 상수라 수정이 불가함. 다른개발자들이 쉽게 알 수 있도록 대문자로 처리하는것이 좋다

const PI = 3.14;

const SPEED_LIMIT = 50;

const BIRTH_DAY = '2000-01-01'

정리

1. 변수는 문자와 숫자, $와 _ 만 사용
2. 첫글자는 숫자가 될 수 없다.
3. 예약어는 사용할 수 없다.
4. 가급적 상수는 대문자로 알려줄 것.
5. 변수명은 읽기 쉽고 이해할 수 있게 선언

문자형 string

const name1 = "별이";
const name2 = '별이';
const name3 = `별이`;

큰따옴표, 작은따옴표(문장안에 작은 따옴표가 들어간다면 역슬래시를 넣어줌), 벡틱으로 표현가능 (백틱은 문자의내부에 변수를 표현할 때 사용해주면 편리함 )

숫자형

문자를 숫자로 나타내면 생기는 오류 = NaN

Boolean

논리적 요소를 나타냄 : true/false

null

존재하지않는 값을 의미

undefined

값이 할당되지 않았음을 의미 (변수를 선언만 하고 아무것도 할당하지 않았을때)

typeof 연산자

1.개발자모드-네트워크-글꼴 누른 후 새로고침하면 사용된 글꼴을 확인할 수 있다

-> 해당폰트 더블클릭 하면 다운로드 완료

2.assets-font파일을 생성 후 다운로드 받은 파일을 옮겨준다

3.font.css생성후 레이아웃css에 추가

폰트의 종류

1) ttf(win) - 트루 타입(지원범위가 작음) 2) otf(mac) - 오픈트루타입(지원범위가 작음)

3) eot - 익스플로어지원(지금은 사용 x)

4) woff - 웹오픈폰트포맷 / 모던브라우저 5) woff2 - 웹오픈폰트포맷 woff의 최대 50% / 20% 압축 (4,5번이 실제로 가장 많이 사용되는 폰트포맷)

6) svg - 모바일에서 사용(깨지지 않지만 잘 사용되진 않음)

폰트지원범위를 검색시 구글에 'ttf지원범위' 파일변환시 구글검색 ex: 'ttf에서woff'

font.css 사용방법

FontWeight별 사이즈

w200 Extra-light
w300 Light
w400 Normal / regular / plain
w500 Medium
w600 Semi-bold
w700 Bold
w800 Extra-bold
w900 Black, the most thick

🔋 Main Point

• max-width , min-width
• button vs a 태그 차이는?
• [form] Tag

1. max-width , min-width

헤더 max-width 지정해주지 않았을 때 문제점
: 화면의 양 끝으로 한없이 뻗어져나갈수있다 (항상 화면비율을 100%로만 맞춰놔 실수하는것 중 하나) max-width:1920px로 맞춰놨다 ㅎㅎ

반대로 축소시켰을 때 min-width를 주어 원하는 구간의 정렬이 깨지지 않도록 해주자

2. button vs a 태그 차이는?

button: 단순 클릭 용도로 사용됨 a: 페이지이동할 때 사용

=> 처음에 마우스커서효과만 보고 a태그로 nav-gnb에 링크를 걸었었는데, 화면 언어를 바꿔주는 버튼이기 때문에 버튼으로 수정해줬다.

버튼을 알아보다 input 타입 버튼을 알게됐는데

1. <input type = button>
<button> 에 비해서 디자인에 제약이 있다. (css 로는 디자인 가능)
2. <button>
텍스트 뿐만 아니라 이미지 or gif 요소를 자식으로 포함할 수 있다.
디자인 폭이 넓다.
submit 기능이 기본적으로 들어있다. 따라서 submit 하고 싶지 않다면 type = "button" 을 적어줘야 한다.
<button> 의 속성값
: type = "submit" 서버 전송
: type = "reset" 내용 초기화
: type = "button" 기능 구현에 사용, 자바스크립트 이벤트 실행 목적

3. 결론
기본 링크들은 <a> 태그
자바스크립트 이벤트를 실행시켜야 하는 요소는 <button> 태그
단순한 button 기능이라면 semantic tag 인 <button> 을 사용하자.

이런 기능도 있다고 한다.

💫 (태그수정시 닫는태그도 같이 바꾸기) Auto Rename Tag & Auto Close Tag VScode의 HTML태그 확장 프로그램을 설치하면 태그수정시 좀더 편리하다 ㅎㅎ

 <div class="group-search" >
                    <form action="" method="get">
                        <fieldset>
                            <legend class="blind">검색</legend>
                            <div class="search-bd">
                                <div class="input-wrap">
                                    <label for="keyword" class="label keyword-label">키워드</label>
                                    <input type="text" id="keyword" class="input" >
                                </div>
                                <div class="select-wrap">
                                    <label for="" class="label">법인</label>
                                    <select class="select">
                                        <option value="" selected disabled>법인선택</option>
                                        <option value="">NAVER</option>
                                        <option value="">NAVER Cloud</option>
                                        <option value="">WORKS MOBILE</option>
                                        <option value="">SNOW</option>
                                        <option value="">NAVER LABS</option>
                                        <option value="">NAVER WEBTOON</option>
                                        <option value="">NAVER FINANCIAL</option>
                                        <option value="">NAVER I&S</option>
                                    </select>
                                </div>
                                <div class="select-wrap">
                                    <label for="" class="label">직군</label>
                                    <select class="select">
                                        <option value="" selected disabled>직군선택</option>
                                        <option value="">Tech</option>
                                        <option value="">Design</option>
                                        <option value="">Service & Business</option>
                                        <option value="">Coporate</option>
                                    </select>
                                </div>
                            <button type="submit" class="btn-submit">검색</button>
                            </div>
                        </fieldset>
                    </form>
                </div>

🔋 Main Point

• view port
• 폰트 올라오는 효과
• gsap
• 스크롤실행시 visual이미지 파묻히는효과
• 4-1.ease
• clip-path:inset
• mouseover (마우스오버)
• 글자css

1. viewport

메인 비주얼에 나오는 큰 글씨는 vh로 설정하면 화면이 줄어들때마다 일정한 비율로 주시될수 있다 다른 영역에는 픽셀크기가 일정한게 좋기때문에 메인비주얼에 주로 사용한다

http://publishing.kr/vw/ (px -> vh 계산기)

=>

2. 폰트 올라오는 효과

1.title 내에 span태그를 만들어 
문장을 3줄로 나열해준다 .

<h2 class="title">
    <span class="parent"><span>NATURE,</span></span>
    <span class="parent"><span>HARNESSED BY</span></span>
    <span class="parent"><span>HAND.</span></span>
<h2>

2.css .title에  
display: flex;
flex-direction: column;
적용시켜준 뒤 .parent 오버플로우 히든 적용 ! 

.sc-visual .title{
    display: flex;
    flex-direction: column;
    font-size: 8.8542vw;
    color: #fff;
    text-align: center;
    z-index: 1;
    padding: 0 90px;
}
.sc-visual .title .parent{overflow: hidden;}

3.gsap사용 ---> 이미지 참조

3. gsap

https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger 참조하여 스크립트 추가

• gsap.from:전의 수치 -> y축으로 100만큼 내려가있는 상태 ->올라갈예정
• gsap.to:후의 수치 -> y축으로 100만큼 내려갈 예정 (상황에 맞에 to/from 구분해서 사용하면 된다 )
• stagger:문장나열을 순차적으로 움직이는 효과

3-1) gsap set

스크롤 할 때 아래에서 위로 띄워올라오는 형태인데, 처음 화면에선 이미지가 보여선 안된다 💡 gsap.set사용 !

4. 스크롤실행시 visual이미지 파묻히는효과

스크롤 실행시 비주얼이미지가 점점 내려가야 파묻히는 효과가 나타나는데 왜 내려가지? 
밑에 화면이 올라가는거 아닌가?하며 이해하기까지 한참 걸렸다 


 그래서 방법은
 .
 .
 .

 1.sc-intro부분에 pozition-relative 줄 것 
 (안주면 gsap효과 후 아래로 가려져버림)

 2. sc-visual에 y축 50%프로 가 내려오면 일정하게 파고들도록 설정 
 gsap.to('.sc-visual',{
    scrollTrigger:{
        trigger:".sc-visual", //기준점:".sc-visual"
        start:"0% 0%", //앞자리 % :트리거기준 시작지점 , 
                       //뒷자리 % : 윈도우 화면기준시작지점 -> 두 지점이 만나면 실행
        end:"100% 0%",//앞자리100%: 끝지점.
        scrub:0,//영역 전체가 내려갈때 딜레이 되는 수치 
    },
    yPercent:50,
    ease:'none',//일정하게 
})

(표시자 설정시 markers:true,)

방아쇠 역할을 할 기준점을 sc-visual영역으로 잡고 start 뒷자리 퍼센트만큼 스크롤될때 트리거가 실행된다 ex: 20% 화면 내려왔을때부터 파묻히기 시작

4-1.ease

ease:'none'일정하게 표현할때 사용, transition:ease 를 css에서 사용할 때 선의 굴곡을 조절하여 효과의 강세를 수정 할 수있다. (아직 ease 효과 나오는 홈페이지를 못봄..)

5. clip-path:inset (호버 + 인셋)

clip-path: inset(10px round 10px 10px 10px 10px) 화면에 마우스를 갖다대면 클리핑마스크를 씌운것처럼 지정한 테두리까지만 표현이 된다

.sc-prd .img{
    transition: 0.3s;
    clip-path: inset(0px round 0px 0px 0px 0px)
}
.sc-prd .img:hover{

    text-align: center;
    border-radius: 20px;
    transition: 0.3s;
    clip-path: inset(10px round 10px 10px 10px 10px)
}

(의문:원래 img에 직접설정하지않고 씌워놓은 a태그에 호버를 걸어야하는데
 거기에 걸면 이미지 사라짐.. why,,?)

6.마우스오버

마우스오버를 하기 위해선 좌표를 잡아야한다 따라서 좌표에대해 먼저 공부...

1. clientX, clientY 
(💡💡💡어디서 확인하든 브라우저 화면기준이기때문에 
ex: 
왼쪽상단은 0,0     오른쪽 상단은 0,1920 
왼쪽하단은 0,800  오른쪽하단은 1920,800 )


위 메서드는 클라이언트 영역 내의 가로,세로 좌표를 제공합니다. 
여기서 클라이언트 영역은 현재 보이는 브라우저 화면이 기준이 됩니다.

clientX : 브라우저 페이지에서의 X좌표 위치를 반환하나 
스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다.

clientY : 브라우저 페이지에서의 Y좌표 위치를 반환하나 
스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다.

2. offsetX, offsetY (💡💡💡 내가 설정한 태그 내에서 기준!!!!!!)
위 메서드는 이벤트 대상이 기준이 됩니다. 
( 화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이됩니다. 
화면의 기준이 아닙니다)

전체 문서를 기준으로 합니다(스크롤 화면 포함)

offsetX : 이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환합니다.

offsetY : 이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환합니다.

3. pageX, pageY
(💡💡💡문서 전체 기준이기 때문에 긴 화면 한개 속에서 좌표를 측정한다 !! )
위 메서드는 전체 문서를 기준으로 x,y 좌표를 반환 합니다. 스크롤 화면을 포함해서 측정합니다.

pageX : 브라우저 페이지에서의 x좌표 위치를 반환합니다.

pageY : 브라우저 페이지에서의 Y좌표 위치를 반환합니다.

4. screenX, screenY
위 메서드는 모니터 화면을 기준으로 좌표를 제공합니다. 여기서 중요한 점은 브라우저 화면이 아니라 
자신의 모니터 화면 전체를 기준으로 좌표를 측정한다는 점입니다.

screenX : 전체 모니터 스크린에서의 x좌표 위치를 반환합니다.

screenY :전체 모니터 스크린에서의 y좌표 위치를 반환합니다.



아직 헷갈리신다면 한번 더 정리하겠습니다.

offset 메서드는 이벤트가 걸려 있는 DOM객체를 기준으로 좌표를 출력합니다. 이와 비슷한 메서드로 
layer가 있습니다. 이 메서드는 현재 파이어폭스에서만 사용합니다.

screen 메서드는 화면 출력 크기(자신의 모니터)가 기준인 절대 좌표입니다.
브라우저를 움직여도 값은 같습니다.

client 메서드는 브라우저가 기준인 좌표입니다. 현재 보이는 브라우저 화면 상에서 
어느 지점에 위치하는 지를 의미하기 때문에 스크롤 해도 값은 변하지 않습니다.

page 메서드는 문서가 기준입니다. client와 비슷하지만 이 메서드는 문서 전체 크기가 기준이라 
스크롤 시 값이 바뀝니다. (스크롤을 포함해서 측정합니다)

출처
http://megaton111.cafe24.com/
2016/11/29/clientx-offsetx-pagex-screenx%EC%9D%98-
%EC%B0%A8%EC%9D%B4%EC%A0%90/ 참조.. 

이해가 됐다면 다시 본론으로 돌아가 지정한 화면 안에서 마우스오버가 되어야 하기 때문에 client를 활용한다 !

내가만들어야 하는건 마우스를 따라다니는 이미지 , 그 안에 글자

1. 
span으로 이미지박스와 글자태그를 만들어준 뒤 
visibility: hidden;
opacity: 0; 처리 

why?-> 처음엔 안보여야 함으로 히든처리 한 후 클래스.on이 들어갔을때 
visibility: hidden;
opacity: visible 처리해줄것 

2.
.sc-prd .prd-img{
    visibility: hidden;
    opacity: 0;

    position: fixed;
    top: 0;
    left: 0;
    width: 400px;height: 400px;

    margin-left: -200px;
    margin-top: -200px;


    transition: opacity 0.3s, visibility 0.3s;
    z-index: 2;
}
.sc-prd .circle{
    visibility: hidden;
    opacity: 0;

    position: fixed;
    top: 0;
    left: 0;
    /* background: #403a3a; */
    background: #f00;
    width: 20px;height: 20px;
    border-radius: 50%;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 2;
}

pointer-events: none; 
호버가 될때 따라다니며 이미지가 방해해서 깜빡거림->막아주기 위해 none처리

3.좌표를 알아놔야 따라다니지요.. 
 $(document).mousemove(function(e){
            xVal = e.clientX;
            yVal = e.clientY;

          gsap.to('.sc-prd .prd-img',1,{
                x: xVal,
                y: yVal
          })
          gsap.to('.sc-prd .circle',2,{
                x: xVal,
                y: yVal
          })

        })

  4.
   $('.sc-prd .img-box').hover(function(){
        $('.sc-prd .prd-img, .sc-prd .circle').addClass('on')
    },function(){
        $('.sc-prd .prd-img, .sc-prd .circle').removeClass('on')
    })

7. 글자css

구현해내지 못했는데 정답은 애초에 똑같은 단어를 2개 만들어놓고 호버했을시 윗줄은 올라가서 가려지게, 아랫줄은 가려져있던게 위로 올라오는 css를 만들면 되는거였다 (간단하지만 내겐 한참 생각하게 만든.. 빌런중 하나였다 )

또한 리더기가 두번읽게하지 않도록 중복된 span태그는 aria-hidden처리를 한다

나는 reset.css안에 무엇을 넣었나.. 까보는 시간을 가져보자

root:

=>변수 자체를 기초세팅하기 위해 사용하지만 나중에 사용하도록 하자 ( 4/21 2:29:00 root 안에 서체가 길어 따로 치기 어려울때 미리 세팅해놓고 body 내에 font-family: var(--font-en); 이런식으으로 꺼내서 사용 ! )

inherit

=>브라우저마다 갖고있는 고유 폰트사이즈들이 있어 font,color에 상속을 줌으로 사용하는 브라우저마다 일정하게 표현하기 위에 리셋에 포함시켰다.

flex-shrink

=>수축하지않도록 !

-사이트명 : 발란 -사용언어 : html , css -분류 : 적응형pc,

🔋 Main Point

• 슬라이드 끝나면 버튼숨기기
• 슬라이드 넘어가며 겹치는 효과주기
• root에 자주 쓸 컬러 상속해주기
• 슬라이드 끝나면 버튼숨기기
• 폰트어썸으로 화살표넣기

1. 슬라이드 끝나면 버튼숨기기

버튼 내 disabled 클래스명을 긁어와 끝 지점으로 갔을때 위치를 마이너스 시켜 화면밖으로 사라지는 효과를 줄수있다 (부드럽게 넘길때는 .btn 클래스에 transition:0.3s 적용)

2. 슬라이드 넘어가며 겹치는 효과주기

= 정답은~ https://swiperjs.com/demos#parallax

💡 Parallax (사이트 참조) 1.명령어를 복붙해서 해당 이미지 박스에 추가하면된다

2. JS에는 parallax:true 넣어줄것

3. 넘치는 영역 잘라주기 overflow:hidden

3. root에 자주 쓸 컬러 상속해주기

발란 사이트에서 포인트로 사용되는 컬러명이 복잡하여 root에 입력해주고 필요할때마다 꺼내먹는다..(이 노래를 초콜릿처럼 꺼내 먹어요,,)

4. 슬라이드 끝나면 버튼 숨기기

5.폰트어썸으로 화살표 넣기

https://cdnjs.com/libraries/font-awesome 복사해서 인덱스 맨 위에 넣어주고

폰트어썸 사이트에서 필요한 화살표 복붙하면 끝 !

• 사이트명: 서울특별시청
• 제작기간: 22.04.07 ~ 22.04.10 (4일 소요)
• 사용언어: html, css, js
• 분류: 적응형 PC, 클론코딩

💻 POINT

• 스프라이트 이미지 처리
• skip-nav
• 체크된 박스
• 체크된 박스

1.스프라이트 이미지 처리 (IS기법)

주요서비스 부문엔 스프라이트 이미지로 처리가 되어있었는데 분야별정보는 백그라운드이미지처리화가 되어있어 수정중에 스프라이트이미지로(IS)이미지를 모아 정리하여 좌표만 잡아주어 불러올수 있게끔 하였다

IS기법 장/단점

장점: 트래픽이 확 줄기때문에 부하올 일이 적어진다 이미지여러장을 한번에 가져올수있기때문에 관리가 용이함

단점:전체 이미지중 일부가 변경되었을때 스프라이트 이미지를 통째로 교체해야하기때문에 이미지교체가 잦은 경우의 오히려 사용이 불편해질수있다

쉽게 바뀌지 않는 카테고리 이미지등에 사용하면 좋을것같다

2.skip-nav 사용

1. 스킵 네비게이션의 위치는 가능하면 최대한 body태그 맨 처음으로 위치해야 한다.

✔ 이유는 스킵 네비게이션의 목적이 네비게이션 영역을 스킵하기 위해서 
혹은 주요 서비스로 페이지 초입에서 바로 접근하기 위해 사용을 하기 때문에 
네비게이션 영역 뒤에나 컨텐츠 영역 뒤에 위치하게 되면 
스킵 네비게이션을 쓰는 목적이 사라지기 때문이다.



2. 스킵 네비게이션은 페이지 구석구석 여러번 사용하는 것이 아니라 처음에 한번만 사용해야 한다.

✔ 과한 스킵 네비게이션의 사용은 페이지의 구조와 페이지 이용을 더 복잡하게 할 뿐이다.


3. 스킵 네비게이션은 비장애인 사용자들이 페이지를 이용할 때 화면에서 보이지 않게 작업해야한다. 

✔ 키보드나 스크린리더로 페이지를 tab 하였을 때 스킵 네비게이션이 노출되고 사용될 수 있게 해야한다.
그렇기 때문에 페이지에 맨 처음 접근하게 되면 일반적인 상황에서는 스킵 네비게이션을 확인할 수 없다. 
그리고 그러한 이유로 스킵 네비게이션에 따로 css 스타일을 입히지 않아도 된다고 생각할 수 있다.
하지만 보통의 상황에서는 스킵 네비게이션 링크에 tab이 되었을 경우 tab이 활성화 된 링크에 
css 스타일 효과를 줘서 화면에 노출되게끔 처리하는 것이 많이들 사용하는 방법이고 좋은 방법이라 생각한다.

-사이트명 : 안다르 -사용언어 : html , css -분류 : 적응형pc, 클론코딩

🔋 Main Point

• 마우스 스크롤 시 상단헤더&gnb고정
• 메뉴 선택 시 나오는 side nav 와 아코디언메뉴 구성
• 반복되는 공통 디테일 css
• 배너명 동일화하기

📌배너명 동일화하기

✔ 문제점
- [x] sc-banner1 , sc-banner2 로 클래스명 다르게줌

💡
1.배너가 여러개더라도 같은양식이라면 sc-banner로 한번에 꾸밀것 

📌잘못된 영역 position:absolute

✔ 문제점
- [x] 텍스트박스에 포지션 앱솔줌

💡
1.
.sc-banner .group-banner a{
    position: relative;
} 준 뒤 
.sc-banner .group-banner img{
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
이미지에 앱솔루트시키고 z-index로 낮춰주면 텍스트도 보이게된다 .
높이와 너비를 갖게되는건 텍스트영역이 잡혀있기 때문에 가져갈수있다 

📌footer영역잡기

💡 group-*** 으로 통일화 해줄것

-사이트명 : 서울시청 -사용언어 : html , css -분류 : 적응형pc, 클론코딩

🔋 Main Point

• 스크린리더를 위한 웹 접근성
• WAI-ARIA & 사용방법
• 탭메뉴 슬라이드
• 접근성소스 skip-nav 1-1) WAI-ARIA 1-2) 스킵 네비게이션 1-3) 탭 메뉴 tab keydown으로 닫는 기능

1. 스크린리더를 위한 웹 접근성

스크린리더
=>화면을 볼 수 없는 시각장애인이 컴퓨터를 사용할 때 화면에 나타나는 정보들을 음성으로 출력해주는 화면낭독 소프트웨어다. 시각장애인들에게 컴퓨터의 화면과 자신이 입력한 키보드 정보, 그리고 마우스 좌표 등을 음성으로 알려 주어 컴퓨터를 사용할 수 있도록 도와주는 소프트웨어이다.

PC형 스크린리더는 전맹시각장애인이 주로 사용하며, 웹스크린리더는 저시력시각장애인과 난독증과 같은 학습장애, 인지장애인과 노인, 다문화가족 등의 웹접근성을 지원하기위해 사용된다. 최근 애플사의 아이폰에 적용된 보이스오버와 같은 스마트기기에 내장된 모바일 스크린리더도 다수 활용되고 있다.

마우스 없이 키보드의 단축키만으로 모든 기능을 제어해야 하고, 이에 따라 키보드를 이용한 동작 구현을 잘 대응해줘야 한다.

2. WAI-ARIA

HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다. 보조적으로 사용하면, 웹 접근성을 향상시킬 수 있다. 정리하자면, 다음과 같은 상황에서 WAI-ARIA를 사용하면 웹 접근성을 효과적으로 향상시킬 수 있을 것이다.

시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와준다.

‘시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황’이라는 것은 시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다는 의미

WAI-ARIA는 보조적인 역할로만 사용

WAI-ARIA를 남용해선 안 되며, 시맨틱한 HTML을 작성하는 것이 최우선

2-1.WAI-ARIA 사용방법

WAI-ARIA는 HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해줄 수 있다.

WAI-ARIA의 속성에는 크게 세 가지 분류가 있다.

역할(role) : HTML 요소의 역할을 정의하는 속성

상태(state) : 요소의 현재 상태를 나타내는 속성

속성(property) : 요소의 특징을 정의하는 속성(attribute)

✔ 역할(role) 의 예시

<div role="button">div이지만 button으로 사용되는 요소</div>

✔ 역할(role) 의 예시

<div role="tabList">
  <li role="tab" aria-selected="true">Tab1</li>
  <li role="tab" aria-selected="false">Tab2</li>
  <li role="tab" aria-selected="false">Tab3</li>
</div>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

✔ 속성(property) 의 예시

img의 이미지가 닫기와 검색의 아이콘일 경우 
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>

웹 접근성을 확보할 때 가장 중요한 것은 시맨틱한 HTML을 작성하는 것임을 항상 기억하자. 앞서 말했듯, WAI-ARIA는 보조적인 역할로만 사용해야 합니다.

3. 탭메뉴 슬라이드

주요뉴스와 시민참여 탭메뉴를 눌렀을 때 지정한 슬라이드값으로 갈 수 있게 세팅해줬다 주요뉴스 탭은 1번째 슬라이드로, 시민참여 탭을 누를 경우 3번째 슬라이드로 향하게 지정한것

$('.sc-visual .group-nav button').click(function(){
    idx=$(this).data('index');
  $(this).addClass('active').siblings().removeClass('active')
  visualSlide.slideToLoop( idx )
})

3. 접근성소스 skip-nav

tab키 사용시 화면 nav부터 쭉 내려가기에 본문에 빨리 접근하기 어렵기 때문에 본문으로 바로 갈 수 있도록 컨테이너에 id=main을 연결하여 바로갈수 있게 처리할수있다

• 스크롤시 두번째 헤더 fixed 고정시키기
• 너비 주지 말것
• sc-visual 내 absolute 공중부양(position:relative없음)
• 타임라인 사용하여 순차효과주기
• 스크롤시, 순차적으로 글씨 나오게하기
• 타이핑 효과
• 이미지 그라디언트 효과
• 순차적으로 글씨, 이미지 순서대로 나열
• 슬라이드 애니메이션(클래스명만 주는법)
• 슬라이드 애니메이션2 (클래스명만 주는법2)

1. 스크롤시 두번째 헤더 fixed 고정시키기

  /**스크롤이벤트*/ 
    $(window).scroll(function(){
        curr = $(this).scrollTop();
        if(curr > 10){
            $('.header').addClass('fixed')

        }else{
            $('.header').removeClass('fixed')
        }
   });
   $(window).trigger('scroll'); //스크롤 강제실행

2.너비 주지 말것

컨테이너와 sc-visual에 너비를 줬는데, 쓸모없음

3.sc-visual 내 absolute 공중부양(position:relative없음)

=>바로 위 부모가 아니더라도 위에 relative 선언 후 absolute bottom:0 처리하면 딱 붙음 =>flex jscc처리 빠짐! 가운데정렬 까먹지말것

4.타임라인 사용하여 순차효과주기

타임라인

1.타임라인 순서 정하기 (텍스트->이미지 2,3,4->가입신청 버튼)
2. visualMotio=gsap.timeline({})명령 후 
입력한 순차대로 화면에 구현됨 
3.나올 방향에 따라 x축과 y축 값 입력 
4.동시에 나와야 하는 이미지는 addLabel을 사용하여 묶어줄 것 
5.뻗어나가는 이미지 구현 시 시간차를 두고싶다면 addLabel 뒤에 +=0.1 이용

5.스크롤시, 순차적으로 글씨 나오게하기

6.타이핑 효과

i태그로 한글자씩 입력후

7.이미지 그라디언트 효과

1.이미지영역에 after값 만들어준 뒤 그라디언트 효과 넣기
2.밑에 태그영역 같이 흐려지기때문에 z-index로 올려줄것 

(before) (after)

8.순차적으로 글씨, 이미지 순서대로 나열

처음에는 위 화면을 구현하지 못해서 최대한 비슷하게 나열해봤다

✔ 문제점
- [x] 글씨와 이미지 줄간격이 맞지 않음 (이미지영역내 width:2200px줘버려서 흐트러짐)
- [x] 3번 이미지 마진이나 트랜스폼을 활용x

💡
1.width:2200px제거 후 max-width:1228px설정 
2 두줄처리를 위해 dive:line1,2생성 

💡
3.line에 display:flex

(넘친영역)

💡
4.line2에 margin:left넣어주고 효과 넣기 

9. 슬라이드 애니메이션(클래스명만 주는법)

2번째 페이지로 넘겼을 때 화면이 하나씩 넘어가도록 설정하고 싶었다

-> 1.슬라이드 체인지 됐을때 클래스명 넣기

2.on이 들어간 css를 따로 꾸며줌

10. 슬라이드 애니메이션2 (클래스명만 주는법2)

여기서 궁금증이 또 생겼다 ., 스크롤트리거가 시작되어 클래스명이 생기고 1번 y축으로 움직이는 효과는 실행되었는데 1번이 끝난 후 2번x축으로는 어떻게 움직이지?

=transition-delay

1.span에 부모요소를 한번 더 씌워준뒤 overflow: hidden;처리 
span은 block처리 해준 뒤 transform적용 

(https://greensock.com/scrolltrigger/에서 스크롤트리거 사용함 / 옛날엔 매직스크롤..)

2. gsap.to('.sc-visual .title .parent span',1,{ /**1초동안 0.1초 간격으로 실행 */
    yPercent:-100,
    stagger:0.1 /**0.1.초 간격으로 실행 */

    });

문제점 -> 화면비율을 줄였을 때 완전히 사라져있지 않음 =>폰트사이즈가 계속 변하기 때문

글씨 효과 (아래에서 위로) :2번째 방법

![](https://velog.velcdn.com/images/shinstar_/post/33d79093-b3c1-4e6e-85bb-50f1085ac84c/image.png)
1.기존에 넣은 transform을 제거한 뒤 
2.gsap.to->gsap.from으로 바꾸고  yPercent:100값으로 변경하면 화면비율이 작아져도 이미지사라지는데 방해없음 

gsap.from('.sc-visual .title .parent span',1,{ /**1초동안 0.1초 간격으로 실행 */
    yPercent:100,
    stagger:0.1 /**0.1.초 간격으로 실행 */
})

main class에 id를주고 skip-nav생성하여 본문으로 바로 넘어갈수있게 만드는 장치

translateY(-100%)해주면 화면에서 사라지기 때문에 포커스되거나 액티브 되었을 때 0%로 변환시켜 화면에 나올수있도록한다

mark-up정리

1.헤더를 두 섹션으로 나눌 때 group-top, group-bottom으로 나눌것 (혹은 inner1,2)

화면 줄였을 때 이미지비율이 맞지않았다 ->img 내 object-fit 추가한 후

->비주얼 슬라이드에 100vh화면 주사율 맞추기

->비주얼슬라이드 내 이미 position:relative포함되어있음

슬라이드 내 높이가 빠져있음

-> .sc-visual .visual-slide a{ } 생성해서 높이100%, 이미지박스-이미지 높이100%줄것 (before->after)

2.기본으로 제공된 스와이퍼버튼 사용하지않고 직접 만들기

div class="swiper-button-next" div class="swiper-button-prev"

1. https://fa-v6.hung1001.com/ ->document아래에 js붙여온 후 사용

->foin-awsome 사용

2.폰트어썸 -> 사용하고싶은 화살표 가져오고 css로 꾸며주기

3.슬라이드 안에 슬라이드 만들기

    1.큰 슬라이드 2장 안에 작은 슬라이드를 생성한다 
    ->큰 슬라이드는 움직이는 반면 작은 슬라이드도 개별움직임을 주기위해 
    옵션에 상속값 nested:true를 넣어준다 

const miniSlide = new Swiper(".mini-slide", {
      nested:true,
      slidesPerView:8,
      spaceBetween:3,
    });

-

    🔎 큰 슬라이드는 마우스로 움직이고 싶지않을때
    = touchRatio: 사용 

const brandSlide = new Swiper(".brand-slide", {
    touchRatio:0,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      slidesPerView:2,
      spaceBetween:24,

    });

3. 미니 슬라이드 내 pagination위치 바꾸기

why??

    swiper내 기존 position:relative가 들어가있고,
    swiper-pagination-progressbar에 absolute top:0 ,left:0 적용되어있음 

        top:auto, bottom:0 준 뒤 
        padding-bottom:10px 으로 간격 넓힘  

4.정사각형사이즈로 배열

    img-box 내에 padding-bottom:100% 준 뒤 
    넘치지않게 over-flow:hidden

    img에는 top:0 left:0 width:100% height:100% object-fit:cover!
    가장 쉽게 정사각형 만들 수 있음. .. 

• 정사각형을 만들어야된다고 width와 height에 지정값 450px씩 부여함 -> xxx

문자선택자:특정 문자 또는 문자열을 선택하여 css속성을 설정할 수 있다.

::first-letter { }, ::first-line { }

링크선택자:문서에서 링크(href)되어 있는 문자를 선택하여 CSS속성을 설정할 수 있다.

a::after{content:'-' attr(href);} 야후 - http:www.yahoo.com

부정선택자:나를 제외한 모든 태그에 CSS속성을 적용할 수 있다.

li:not(.클래스명)background-color:yellow;}

http://www.sba.seoul.kr:80/kr/index

프로토콜: http, FTP, SMTP, POP(메일), DHCP(할당된 아이피주소가 변동되게함)