나의 첫 웹사이트 만들기_(1)

현재 JS를 제대로 배우지 않은 상태에서

HTML과 CSS만으로 웹페이지를 구성해보기로 했다.

 

어떤 주제로 만들어볼지 고민을 했는데

마땅히 할 것이 없어서

나에 대한 소개페이지를 만들기로 했다.

 

 코드  🔽

https://github.com/Bluishhot-Star/WEB/tree/master/Firstpage

 

 계획 

위의 청사진처럼 만들어볼 계획이다!

 

 1일차 

헤더 부분과 소개 섹션, 스킬 섹션을 만들어보았다!

flexbox를 연습해보기에 아주 좋았다!

헤더의 position을 fixed로 설정하면 float되어 있어서

그 다음에 나오는 요소는 그 아래에 배치가 된다.

 

그 해결법으로 margin을 header의 높이만큼 적용을 시켜주었다.

 

 

마우스를 올렸을 때 다음과 같은 효과들을 넣어주었다.

 

1. 블로그 환영 섹션

 

 

2. 스킬 섹션

(1)

각 스킬박스 요소에 부모요소를 하나 추가해서

크기를 같게 만든 후, 배경으로 색을 넣어주었다.

 

그 결과

 

y값이 hover의 효과로 바뀔 때

그 아래에 있는 배경이 등장해서

색이 있는 그림자가 나오는 이펙트를 넣어주었다.

 

(2)

각 스킬에 대한 설명 박스를 나오도록 했다.

 

사실 

display: none -> block 으로

해당 기능을 만들려고 했는데

transition에 display는 적용이 되지 않는다.

 

해결을 한 방법은

opacity와 height를 이용하는 것이다!

기본값 : opacity: 0; height: 0;

hover : opacity: 1; height: 10px;

 

위와 같이 설정을 하면

hover시에

스킬설명이 부드럽게 나오고

box의 크기 또한 부드럽게 늘어난다.

 

3. 드래그 색 변경

*::selection{
    background:gold;
}

드래그를 한 모습

 

드래그를 했을 때의 색을 바꾸어 주었다!