1[css]웹접근성-앱솔루트,픽스드/줄간격은라인헤이트/디스플레이블럭생략상황/배경색변했을때방법2/트랜지션/포커스와액티브/로고사이즈설정+맥시멈미디엄

https://www.wah.or.kr:444/

이고 디자인이 올드하니 리뉴얼해보는 프로젝트도 괜찮겠다. 고하셨다.





-앱솔루트, 픽스트는 위드스를 조정해줘야 한다. 줄어들기때문



-

-패딩말고 라인헤이트를 주는 식으로 가는게 좋다. (줄간격 잡을 때)
왜냐면 정확한 수치를 알 수 있다.

-

    line-height: 44px; /*얘는 디스플레이 블럭, 인라인 블럭일 때만 먹는다.*/

    text-align: center;

 

 

부모태그에 넣어도 똑같은거 부모태그에 웬만하면 넣어주는게 좋다. (작동이 똑같더래도,)

(부모에게 주고 상속받으면 되는거,)

 

=> 그래서 저 드래그해놓은거 위 skip 에 넣었다.

 

 

 

 

 

 

 

 

<유일하게 부모에게 글자색 상속받지 못하는 태그>

 

-앵커 => 부모로부터 글자색을 상속받지 못한다.

 이유 = 너무 중요한 내용을 담고있기 때문이다.

 

 

 

 

 

 

-

겹쳐놓기.. 

display : block; 은 포지션을 앱솔루트나 픽스드로 잡아놓았으면 생략해도 된다.



-배경색이 바뀐건 부모한테.. 헤이트를 넣어주면 된다.

또다른 좋은 방법 : 배경색을 앵커에 (자식에) 내렸다면 부모에 높이를 안줬어도 색이 그대로 있었을것이다.
부모에게 높이를 꼭 줘야하나?하고 반문해보고 자식에게 백그라운드를 줘서 해결된다면 이 방법으로 하는게 좋다.






-

오파시티 지우면 이렇게 된다.
둘다 앱솔루트로 0컴마 0에 잡아놨기 때문에 (탑. 레프트 0)
하나씩 포커스 들어올때



-

화면바깥에 숨겨뒀다가
탭 눌러서 포커싱됐을때 보이게 하는 법!

* display : none 으로 절대 잡아놓으면 안돼!.
디스플레이 논을 탭으로 잡을 수가 없다.






-

부모는 위치 기준만 잡아주고,
자식에 디자인을 이렇게 몰빵하는 것도 편리한 방법. ( 저 두개가 원래 #skip 에 들어있었다,)






-

=> 본문 바로가기 저 메뉴가 위에서 서서히 내려온다. 탭을 한번 더 누르면 서서히 올라간 후 다음 메뉴가 서서히 내려온다.








-

색깔 (배경 , 글씨 ) 바꾸려거든....
바꿔준 후 all로 트렌지션 프로퍼티를 바꿔줘야한다.





-

화면에 활성화 돼있는 상태의 것을 말한다. 보통 저렇게 두개 같이 준다. 똑같은 의미다.
포커스는 키보드(탭)로 활성화 하는거,









<로고 (이미지) 사이즈 잡기>


-

-> 여기서 h1 위 크기 먼가 이상..

h1의 속성인
어.. 본문 글자크기 36 * 1.6 = 52 정도 가 잡힌거다.

이것만으론 해결이 안된다.


=>

짠~ . h1 고유가 잡아놓은 사이즈를 없앤 과정이다. => 내가 원하는 18px이 나온다~!.

---

로고를 중앙으로 보내보자.



<포지션>
겹치는건 무조건 앱솔루트.


로고 중앙에 보내보자.


<left>
(1920 - 250) / 2 =835



(전체넓이에서 로고 넓이 빼고 2로 나눔)

835 좌표로 left 잡아놓으면


<top>
(90-18) / 2 =36



->

이렇게 된다.

근데 문제는 페이지 사이즈 줄였을 때 로고가 그자리 가만히 있음.

<해결방법>
부모크리를 활용하는 퍼센트 좌표로

여기서 딱 정가운데로 올리기 위해 파리바게트 저 이미지의 절반 크기를 50프로에서 빼줘야한다.


->

<또다른 방법>

<gnb들도 똑같이 화면(해상도) 줄인거에 따라 줄어들게 만들기>
-> 래퍼 기준으로 맞춰놓기


=>

<top>

탑도 똑같이 해줬음.
똑같은 방식 (50퍼센트를 주고 콘첸트의 절반 크기를 빼주기)


좋은점 부모크기를 기준으로 잡았기 때문에 부모 크기를 변경해도 자동으로 중앙으로 잡아준다.

---

방금 준 헤더 설정값을 래퍼로 옮겨서 지앤비 메뉴도 중간으로 고정해보자.

방금 위에 있던 저 두개 설정 밑에 하나 좌표 새로 만들어주고 저곳에 옮겼다.

---

<페이지 사이즈 줄였을 때 로고 옆에 공간 많은 곳에 지앤비가 더 가까이 붙을 수 있게 만들기>

위드스에 max를 붙여주고.. 마진오토는 원래 있었나?
하여튼! 저거 해주면 이렇게 줄였을때 쪽 붙는다.


+

min-width: 1200px;

이것도 넣어주면 최소 창 사이즈도 정해주기 때문에

이런거 안나오게 할 수 있다.


-=> 그런데 나중에 반응형 웹 만들때 다른 설정 넣으면 이 옵션이 필요없기는 하다.

---

-프로젝트 첫번재 나갈때 집가서 3시간은 혼자 작업해서 가져와야 피드백해주실 수 있다.