2-뎁스1/줄간격%X/gnb호버-밑선/서서히나타나는효과/호버-보더바텀,위치/콘텐츠겹침제트인덱스/검색버튼사이즈조절/gnb밑아코디언/프로젝트팁,따옴

어..뎁스 1에 위드스도 없앴다.




-줄간격에 % 주면 안된다. 바디기준으로 들어가버림.





<지앤비메뉴 앵커 액티브 상태일시 밑에 선>

우선

밑에 보더 먼저.. 생성.

(근데 이방식은 글자가 솟아올라간다. 그래서 이방식 추천 ㄴㄴ)





=>

생겼다. 액티브는 안해도 될듯 왜냐면 클릭시 빨간거 생길 필요는 별루





-
<서서히 나타나는 효과 주기>

  transition: border 0.3s;

이 놈을 줘야하는디,

.depth1 > a { /* 메인메뉴 */

여기가 아닌

.depth1 > a:hover, .depth1 > a:focus  {

 

여기에 넣게되면 앵커에 마우스를 갖다 댔을 때만 서서히 나타나고
마우스 빼면 바로 사라짐.

---

(근데 이방식은 글자가 솟아올라간다. 그래서 이방식 추천 ㄴㄴ)
=> 그렇다면 추천하는 방법대로 만들어보자.
<:after 에 선 넣기.>

(affter 붙은 것들은 요기 끄트머리에 뭔가 해놓은 거겠구나 하고 알라고 하신다.

---

<마우스 올렸을 때 선 나타나게 설정하기>

호버 위치 주목! 앵커 위에 마우스 올려 놓은 곳으로 설정해 둬야된다.
after 뒤로 호버를 해놔버리면 .. width 0으로 해놔서 있지도 않은 곳에 마우스를 올리면 뜨게 하는 이상한 코딩이 되는거다.

.depth1 > a:after{ /*메인메뉴 라인*/

     /*컨텐츠의 위쪽에 한겹더 올라가는 것들 포지션-앱슬루트 사용 after*/

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 3px;

    content: '';

    background-color: #f00;

    transition: width .3s;

}

이렇게 추가해주면 된다.

---

이렇게 겹치는 거

아이디 스킵에 제트인덱스 넣으면 수정가능.

---

오른쪽 마진 라이트 벌려준후 검색버튼 들어갈 부분 만든 코드다.

svg 파일은 크기조절 해저야함.

---

<
이미지 감싸는 박스는 44 유지,
돋보기이미지 (배경이미지) 컨텐츠 는 24로 줄이기
>

=>

background-repeat: no-repeat;

넣어주면 가운데 하나만 남는다.





그런데
<결과 똑같은데 더 자주 사용하는 방법>
-

background : transparent url('../images/ico_sch.svg') center center /24px no-repeat;

/*축약!*/

(그런데 센터부턴가? 사파리에서 안먹어서 쓰면 안된다

 

보더에 0을 줘야 보더가 완전히 사라진다.
그냥 지우면 검정색 선 남음

\

gnb 바 밑에 저거 만들었다. (드래그 해놓은거 외에도 이것저것 바꾸고 추가한거 있은께 봐야해)

---

프로젝트 - 꼭 별루인 사이트 리뉴얼하기 만 할 필욘 없고 내가 나만의 사이트 하나 만들어도 된다.
전에 말씀하신 물류 화학 바이오 같은 내용으로 선택해야됨!~! (딱딱한,어려운,전문적인 주제의 분위기의 홈페이지가 가장 낫다.) 인테리어회사(호텔, 팬션), 건설 까지도 괜찮다.


그런데 1차는 좀 가벼운걸로 해도 괜찮다. 병원홈페이지같은


브랜드 홈페이지 할거면, 먹을건 ㄴㄴ, 파리바게트, 베스킨라빈스, 던킨과같은 브랜드색이 진한 것들도 ㄴㄴ

사회적 약속

html " "
css ' '
js " "