웹2 7일차

👌 웹사이트 리서칭 자료 모음

1. 지디웹 바로가기

2. 디비컷 바로가기

---

배너 이미지 위에 탑바 구현

수업 코드펜 바로가기

 

무료이미지 사이트 바로가기 

** 얼굴은 저작권에 주의 / 원본 사진은 2차 가공을 거쳐야 한다.

 

1. 이미지 복사

이미지 우클릭 후 주소복사 -> img코드 "" 안에 넣어주기

 

2. 이미지 크기 변경하기

-2-1. 이미지 사이즈 조정

이미지를 커스텀하려면 이미지태그를 선택 후 너비높이를 조정해줘야 한다.

(미리 정해놓은 높이에 맞춰 100% 적용하는 코드를 사용했다)

비율이 망가졌을 땐 object-fit: cover; 코드를 사용해 비율을 맞춰준다

*** object-fit: cover;  비율 망가짐 방지

기존개념 : 이미지태그는 너비높이 중 하나만 커스텀 하면
비율이 유지된 상태로 이미지가 커스텀되고, 너비높이 둘 다 커스텀하면 비율이 망가진다.

비율이 망가졌을 때 object-fit: cover;코드를 적용하면
망가진 비율을 원본상태로 돌려주고 이미지 중앙을 보여주게 된다.

--- (공부방법) object-fit속성은 여러가지 속성값이 있다.
구글에 검색해보고 코드펜에 하나씩 적용해보면서 규칙을 찾아보면 좋다.

 

 

포지션 코드

포지편 수업 내용 코드펜 바로가기 

 

2차 메뉴는 박스 밑으로 대롱대롱 매달리는 것 처럼 구현되어야 한다.

이때 쓰이는 코드는 position

 

★ position

[static] 기본값

 

[absolute] 가장 많이 사용되는 값

- absolute가 적용된 태그는 static상태 위치를 유지한다. 위치를 바꿔주려면 위치속성을 사용해야 한다.

- fixed와 absolute는 한 가지 특징을 제외하고 동일한 특징을 가지고 있다.

- absolute는 width: auto; = 0으로 작동한다

ㄴ 너비높이 기본값이 0으로 작동하기 때문에 형태 확인에 어려움이 있다. 구현할 때 Html에 글자를 작성한 상태로 시작한다.

- absolute는 Html 구조상으론 자식 엘리먼트로 인지되지만 좌표에서는 body 또는 relative 기준으로 작동한다.

ㄴ relative는 absolute나 fixed가 대체할 수 있다.

- statics는 absolute나 fixed를 가두어 놓을 수 없다. (부모 역할을 할 수 없다.)

- reative는 statics과 동일한 특징을 가지고 있지만 statics과 다르게 absolute와 fixed를 가두어 놓을 수 있다.(부모 역할을 할 수 있다.)

- absolute는 너비높이 상속도 부모엘리먼트가 아닌 부모역할을 하는 엘리먼트에서 상속 받는다.

- absolute는 display영향을 받을 수 없다.

 

 

[위치속성] static을 제외한 나머지값 위치 조정

- 값은 left, right, top, bottom

- 위 4가지 값의 속성 값은 부모 역할을 하고 있는 앨리먼트 기준으로 가진다.

- ★ ★ ★  relatve도 위치속성을 통해 위치 이동이 가능하다.

---

 

100%를 적용하면 위 사진처럼 구현됨

100% 적용 = relative 적용

 

position: absolute; 를 부모 앨리먼트에 적용하게 되면 대롱대롱 매달린다.

 

[position 공부방법]

1. 오늘 배운 개념 DaleSeo 블로거 처럼 작성하기

2. 다른 사람 블로그 찾아보고 디테일한 내용 정리해보기

3. 공식 문서 읽어보기

---

hover

[ display: none; ] 구조 삭제 / 제거

 

.top-box:hover { background-color: orange; } 는 마우스를 올렸을 때 해당 이벤트가 구현된다.

탑바에 마우스를 올렸을 때 배경색이 오렌지로 커스텀▼

박스사이징으로 선이 삐져나오지 않고 깔끔하게 마무리

 

hover 예제(부모와 자식) - 맞는 예제 바로가기

hover 예제(형제) - 틀린 예제 바로가기

---

 

배너 이미지 위에 탑바 구현 수업 때 연습 코드펜 바로가기

ㄴ [배너 이미지 위에 탑바 구현 풀이]

 

 

1단계 : 배너이미지 위해 menu-2 띄우기

- menu-2{position: absolute;}

ㄴ이미지 위에 메뉴 띄우기

 

- top-bar-section{height: 100px;}

ㄴ 탑바 크기가 변할 때 menu-2가 고정되어 있는 모습 관찰

 

- top-bar-section{ position: relative; }

ㄴ 원하는 조건에 relative를 설정하여 부모 역할 지정

 

- menu-2 {top: 100%}

ㄴ 부모역할을 하는 앨리먼트에서 원하는 위치 잡기

 

- menu-2 {width: 100%}

ㄴ 부모역할을 하는 앨리먼트 너비만큼 상속받기 

 

2단계 : 마우스 올렸을 때만 menu-2  보여주기

---(조건)

1. 너비가 위치속성에 px단위를 사용할 수 없습니다.

2. menu-2는 너비가 화면너비만큼 나와야 합니다

3. menu-2는 탑바 하단에 붙어있