05.08 - html 연습하기

.text() : 괄호 안에 값이 없으면 구하는거고 값이 있으면 입력된대로.

 

- vscode - 

위의 접혀서 따라오는거 view - appearence - sticky roll 끄면 없어짐.

 

 

 

 

 

 

 

 

---

 

 

- filezila 주소 연결하기 -
1. dothome 새 호스팅 주소 만들기
2. filezilla - show additional download options - window64 어쩌구(recommened) 다운로드 받기

 

 

 

 

뭔가 복잡한 화면

 

위에 3개 끄기.

 

 

이거 누르고 새 사이트 누르기

 

 

아까 닷홈에서 줬던 주소랑, 사용자, 비밀번호 입력하고 연결하면, 완료!

 

 

매번 이 사이트를 안열고도? 연동시켜 놓으려면,

 

다시 이거 누르고,

 

 

사이트 관리자 > 고급 > 기본 로컬 디렉터리 > 찾아보기에서 작업하던 파일 선택!

 

 

 

작업했던 파일, 옆으로 옮겨넣기!

다시 올렸는데 수정사항이 반영되지 않는 경우
인터넷 캐시 지우기 하면 됨.
그치만 매번 지우기 귀찮으니까 방법 2가지
새로운 파일을 만들어서 올리던가,
자동으로 이름을 다른걸로 저장하기

 

---

 

 

양 옆 줄이고 늘리는 거 반응형 만들기 → % 나 vw로 바꾸기
1400에서 바뀌도록
1280에서 바뀌도록
850에서도 바뀌도록 (햄버거 버튼)

768까지 모바일 (640~840~960)
769부터 1024까지 태블릿 (1280까지 고려)

 

 

 

header nav .gnb >li> a {color: #1e3622;
padding: 35px 34px; display: block; transition: 0.15s;}

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

위의 상태로는 줄어도 반응형이 되지 않기 때문에, vw 비례식 사용.

 

 

header nav .gnb >li> a {color: #1e3622;
padding:  1.77vw 1.77vw ; display: block; transition: 0.15s;}

 

vw 비례식
1920:100 = 34:x
1920x = 3400
x = 3400 /1920
→ 1.7vw

쉽게 하는 법
알고 싶은 숫자 나누기 기준수자 곱하기 100
알고싶은숫자(나누기) 기준숫자

부드럽지 않은 이유
transition: 0.15s;
: 줬던 이유 글자 부드럽게 할려고

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

header h1{position: absolute; left: 50%; transform: translate(-50%); width: 173px; top: -10px;}
header h1 img {width: 100%;}

 

h1에 이미지
h1의 폭에 맞춰 이미지 폭이 정해지고
이미지 폭이 정해지면서 높이가 자동으로 바뀌고
이미지 높이가 자동으로 바뀌면서 h1 높이가 정해짐

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

 

 

position: fixed; 는 원래 화면 기준인데, 상위에 transform 이 있으면 이렇게 위에가 약간 비게됨.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

.topset_mobile nav {margin-top: 70px; height: calc(100vh - 230px) ;}

clac 쓸때는 꼭 띄어쓰기 하기

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

- 기본 -
show() 보여라
hide()숨겨라
toggle()왔다갔다
-슬라이드 -
slideDown() 나타나라
slideUp()사라져라
slideToggle()펼쳤다 접혔다 해라
-페이드 -
fadeIn() 서서히 보여라
fadeOut() 서서히 사라져라
fadeToggle() 서서히 나타나고 서서히 사라져라