5. CSS layout
5-1. height: calc( 100% - 1rem )
- 현재 사이즈에서 1rem 깐다 (calc 단위가 틀릴 때! 빼기 기호로 표기)
- svg는 이미지와 달리, px 개념이 아니고, 비율 계산함
<style>
#hd h1 img{ height: calc(100% - 1rem); }
/* 현재 사이즈에서 1rem 깐다 */
/* calc 단위가 틀릴 때. 빼기 기호 *//* svg는 이미지와 달리, px 개념이 아니고, 비율 계산함 */
#hd{ background-color: black;}
#gnb .d1{ color:white; font-size: 2em; } /* 대메뉴만 흰색 */
</style>5-2. 로고 아래 공백 없애는 방법
a태그, img 태그 = 인라인 태그 (margin 좌우는 먹는데, 상하는 안 먹음)
↓↓↓
display: block; 인라인 태그를 블록형으로 지정, 블록 스타일 적용 가능!
display: inline-block; 인라인-블록형으로 지정, 블록 스타일 적용 가능!
<a href="#none" class="d-block">
<img src="./img/logo.svg" alt="" class="d-block">
<div class="container d-flex justify-content-between align-items-center">
<h1><a href="#none" class="d-block">
<img src="./img/logo.svg" alt="" class="d-block">
</a>
</h1>
</div>5-3. 헤더 위아래 높이 주기
#hd{ background-color: black; padding: 1rem 0 }
<style>
#hd h1 img{ height: calc(100% - 1rem); }
/* 현재 사이즈에서 1rem 깐다 */
/* calc 단위가 틀릴 때. 빼기 기호 *//* svg는 이미지와 달리, px 개념이 아니고, 비율 계산함 */
#hd{ background-color: black; padding: 1rem 0;}
#gnb .d1{ color:white; font-size: 2em; } /* 대메뉴만 흰색 */
</style>6. 새 로고 SVG 추가
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="113.951" height="79.771" viewBox="0 0 113.951 79.771">
<defs>
<path id="a" d="M0 0h113.951v79.771H0z"/>
</defs>
<style>
.redshape{ fill: #ffffff; }
</style>
<clipPath id="b">
<use xlink:href="#a" overflow="visible"/>
</clipPath>
<path clip-path="url(#b)" class="redshape" d="M3.15 45.75S15.814 4.435 54.625.136C40.05 7.167 20.694 22.058 16.873 45.75c-5.544-1.961-13.723 0-13.723 0"/>
<path clip-path="url(#b)" class="redshape" d="M56.85 0C42.255 11.063 38.735 45.991 38.735 45.991c5.611-1.533 30.34-1.533 35.951 0 .001 0-3.243-34.928-17.836-45.991"/>
<path clip-path="url(#b)" class="redshape" d="M110.903 45.75S98.239 4.435 59.428.136C74.002 7.166 93.359 22.057 97.18 45.75c5.545-1.961 13.723 0 13.723 0"/>
<path clip-path="url(#b)" class="redshape" fill-rule="evenodd" clip-rule="evenodd" d="M16.186 71.771a9.414 9.414 0 0 1-6.726 2.813 9.433 9.433 0 0 1-6.732-2.813h13.458zm20.101 0a9.43 9.43 0 0 1-6.545 2.629 9.432 9.432 0 0 1-6.545-2.629h13.09zm7.317 8h-2.828v-8h2.828v8zm13.18-8a9.436 9.436 0 0 1-6.546 2.629 9.427 9.427 0 0 1-6.547-2.632l13.093.003zm7.372 8h-2.827v-8h2.827v8zm13.18-8a9.43 9.43 0 0 1-6.545 2.629 9.43 9.43 0 0 1-6.548-2.632l13.093.003zm7.329 0v1.958h-2.871v-1.958h2.871zm16.113 0l.669.642a9.446 9.446 0 0 1-5.767 1.951 9.443 9.443 0 0 1-6.516-2.596l11.614.003zm5.341 0v1.958h-2.871l-.002-1.958h2.873zm1.604 0a3.1 3.1 0 0 0 3.1 2.687 3.1 3.1 0 0 0 3.101-2.692l-.516.006a2.614 2.614 0 0 1-2.585 2.179 2.615 2.615 0 0 1-2.584-2.177l-.516-.003zm1.892 1.344h.509V71.77h-.509v1.345zm1.313-1.344l.745 1.345h.579l-.738-1.345h-.586z"/>
<path clip-path="url(#b)" class="redshape" fill-rule="evenodd" clip-rule="evenodd" d="M2.729 71.771A9.434 9.434 0 0 1 0 65.123c0-5.224 4.236-9.46 9.46-9.46a9.432 9.432 0 0 1 6.634 2.716v-8.087h2.828v14.931a9.468 9.468 0 0 1-2.736 6.553l-13.457-.005zm20.468 0a9.459 9.459 0 0 1 6.545-16.29c5.224 0 9.46 4.234 9.46 9.459a9.434 9.434 0 0 1-2.915 6.83l-13.09.001zm17.579 0v-6.93c.066-5.194 4.278-9.36 9.462-9.36a9.458 9.458 0 0 1 9.458 9.459 9.429 9.429 0 0 1-2.914 6.83l-13.092.001a2.374 2.374 0 0 0-.086-.087v.087h-2.828zm20.552 0v-6.93c.066-5.194 4.278-9.36 9.463-9.36 5.224 0 9.46 4.234 9.46 9.459a9.434 9.434 0 0 1-2.915 6.83l-13.094.001a1.416 1.416 0 0 0-.086-.087v.087h-2.828zm20.466 0V50.019h2.871v21.752h-2.871zm7.371 0a9.462 9.462 0 0 1-2.958-6.88c0-5.233 4.241-9.475 9.474-9.475a9.462 9.462 0 0 1 7.669 3.909l-2.064 2.11-.021-.034-7.778 7.778-2.03-2.031 7.792-7.791a6.56 6.56 0 0 0-3.574-1.052c-3.642 0-6.592 2.95-6.592 6.592s2.95 6.593 6.592 6.593a6.596 6.596 0 0 0 3.663-1.104l1.441 1.385H89.165zm14.08 0l-.005-6.88c0-5.233 4.234-9.475 9.468-9.475l-.009 2.89a6.583 6.583 0 0 0-6.581 6.458v7.007h-2.873zm4.993 0a2.605 2.605 0 0 1 2.584-3.046 2.605 2.605 0 0 1 2.585 3.048l.516-.002c.019-.146.028-.288.028-.435a3.103 3.103 0 0 0-3.129-3.12 3.103 3.103 0 0 0-3.128 3.12c0 .146.011.288.029.429l.515.006zm1.887 0v-.275h.65l.152.275h.586l-.151-.275c.47-.016.938-.27.938-.961 0-.738-.571-.929-1.207-.929h-1.477v2.165h.509zm-87.021-6.832a6.638 6.638 0 1 1 13.276 0 6.638 6.638 0 0 1-13.276 0m20.497 0a6.638 6.638 0 1 1 13.276 0 6.638 6.638 0 0 1-13.276 0m67.397 5.175c.421 0 .794.031.794.476 0 .477-.651.397-1.127.397h-.54v-.873h.873zm-46.846-5.175a6.639 6.639 0 1 1 13.278.002 6.639 6.639 0 0 1-13.278-.002m-48.054.184a6.638 6.638 0 0 1-13.275 0 6.637 6.637 0 1 1 13.275 0"/>
</svg>하얀 로고 CSS
<style>
.redshape{ fill: #ffffff; }
</style>HTML
<div class="container d-flex justify-content-between align-items-center">
<h1><a href="#none" class="d-block">
<img src="./img/logo.svg" alt="" class="d-block">
<img src="./img/logo_w.svg" alt="" class="d-block">
</a>
</h1>
</div> 
7. 클릭하면 두 개의 로고가 동시에 등장
display: none
&
display: block
<style>
#hd{ background-color: black; padding: 1rem 0;}
#hd h1 img{ height: calc(100% - 1rem); }
#hd h1 img:nth-child(2){ display:none; }
/* --------logo_w 숨어!-------- */
/* display: block;과 콤비, logo에 마우스 올리면 logo_w 등장 */
#hd h1:hover img:nth-child(2){ display:block; }
/* logo에 마우스 올리면 display: block;(logo_w) 재등장 */
#gnb .d1{ color:white; font-size: 2em; } /* 대메뉴만 흰색 */
</style>8. 클릭하면 두 개의 로고가 번갈아가며 등장
<style>
#hd{ background-color: black; padding: 1rem 0;}
#hd h1 img{ height: calc(100% - 1rem); }
#hd h1 img:nth-child(2),
#hd h1:hover img:nth-child(1) { display:none; }
/* --------logo_w 숨어!-------- */
/* display: block;과 콤비, logo에 마우스 올리면 logo_w 등장 */
#hd h1:hover img:nth-child(2),
#hd h1 img:nth-child(1) {display:block; }
/* logo에 마우스 올리면 display: block;(logo_w) 재등장 */
#gnb .d1{ color:white; font-size: 2em; } /* 대메뉴만 흰색 */
</style> 
