본문 바로가기

학원/디자인

[css] gnb메뉴바가부모에게넓이상속안받기/메뉴바에 화살표만들고모양수정/보더라디우스+오버플로우히든=세트/호버의옳은위치,웹접근성호버/정석메뉴구조,순서/보더로만든삼각형엔박스쉐도..

 

 

사이즈 통일하기

 

 

댑스 2가 부모에게서 넓이를 받지 않게 해야겠지요. (부모 글자수따라 앵커 넓이가 생성된다)

 

 

 

 

뎁스2에 포지션과 레프트 탑 주고 뎁스원에 ..

 

 

이렇게했는데 뭔가 이상해

 

 


<메뉴바에 화살표 만들기>

 

 

''

 

딱지모양

 

 

 

 

 

삼각형!

완성

 

 

 

 

 

 

-삼각형 이쁘게 만들어보기 (너비쭐이기)

 

 

 

 

 

 

 

-border-radius: ; = 어,, 모서리 둥글게. 

 

=>

border-radius: 12px;
    overflow: hidden;

 이렇게 쌍으로 써줘야 앵커에 호버 줬을때 (백그라운드색깔등) 뾰족사각형으로 되는 거 방지할 수 있다.

 

 

 

 

 

 

 

 

 

 

어,,, 호버됐을때 서브메뉴 (뎁스투) 펼치기.

 ~, + : 바로밑에..동생찾기.

 

~=앵커 밑에서부터  뎁스투를 전부 찾으셈

 

 

 

 

수정!

이렇게 해야.. 저기저기 앵커머시기 ..좋대..

 

 

 


 

 

이렇게하면 

웹접근성 탭메뉴 작동 됨. 

 

 

 

 


 

 

이 메뉴 구조를 기억해두장~ (이게정석)

 

나중에 디비전으로 감싼후 앵커로 해도 된다. (투뎁스까지는  정석대로 하고)

 

 

 

 

 


 

 

삼각형에 박스쉐도우 못넣는다. 

-> 이미지를 넣는다. (비포에 배경이미지로)

 

 

 


 

<섹션>

 

1.갤러리 5개 사진

2. 페이지네이션

3. 컨트롤스

 

이렇겐 꼭 있어야한다.

 

 

 

 


 

 

 

메인- 컨테이너 -  wrap - 랩떼고 

 

 

p는 안에 블럭이 못들어간다. 쓸수 있는 태그가 인라인 뿐이없다.

진짜 본문내용 아닌이상 쓰지마셈!

 

 

 

(이런거)

 

경산대추 밑에 저 한줄., 저런거

 dt, dl 로 보면된다

 

 

 


 

 

안풋을 맨 위에 만들어 놓는게 필수다. 근데 인풋을 묶어놓으면 안됨.

 

 

선택자
1. 자식
2. 후손
3. 형제(동생)

이것들 외엔 제어가 안된다. 부모는 제어할 수 없다. 선택자는 밑으로 흐름


=>인풋은 자식과 후손을 만들 수 없다.
형제관계로 만들어야한다.

=>div 으로 묶어놓으면 안된다. 
묶으면 인풋을 찾을 수가 없다.

=>그래서 화면에 그냥 늘여놔야된다 위에처럼.

 

 


 

 

 

-첫번째껄 체크되어 있는 상태로 시작하는법

이렇게 체크드 넣어주면 된다.

 

 


 

 

css도 이런식으로 짜줬다.

 


 

 

 

-> 1번 이외에도 나머지 숫자들도 누르면 색깔 들어오게 했다.

 


 

 

 

라디오버튼 화면상 없앴다.