전체 글
-
농협 a>.title-box>.title 유령화. 자식을 유령화시키면 부모는?Program/HTML.CSS 2020. 7. 13. 02:40
1. 부모가 유령화가 되어 밑에 정렬---> 자식을 유령화시키니 부모는 자식이 없는 듯. 짜악 줄어둠. 빨간색 부분이 없어진다. 2.자식의 유령화에 top: 50%을 주어 위로 이동 중앙에 위치하도록 . 3. (1)번을 보듯 맨 위에 위치. 유령화를 주어 밑에 대략 위치 시킨다. .title-box 그런 다음 그 안에 있느 title도 유령화시키는데 title-box는 자식이 없는듯 빨간색 처럼 사라지게 된다. 그런다음. title 을 꾸미면 된다. 그런데 왜 title-box를 유령화시키고 그 자식까지 유령화시켜야 하는가? title-box로만 꾸며질수 없는 것일까?
-
농협-퀵아이콘박스 작업과정Program/HTML.CSS 2020. 7. 13. 00:41
1. box-2를 (con-min-width) 만든다. div.con>ul.row>li.cell*7> a.block.relative[href="#]를 만든다. 2. a자식 img을 유령화시키기 위해 relative해주고. img를 a안에 꽉채우도록 width:100%,height:100%를 준다. img는 style = "background-image:url(..);" 를 주었기 때문에 background-position, repeat값을 입력한다. 3. hover 시 색깔변화. 이미지를 번갈아 보여줄수 있도록. display:none, block를 한다. 4. a안에 span을 3개 사용. off-img, on-img, title-box로 코딩. 5.title-box, title 유령화 시킨다. tit..
-
탑바를 유령화시키고 body에 padding-top값을 준 이유!!Program/HTML.CSS 2020. 7. 12. 23:26
1. 농협 탑바는 최상단 탑바와 상단 탑바 2가지로 나눈다. 탑바 전체를 position:absolute 유령화시킨 이유는 무엇인가? 2. 유령화를 시키지 않으면 탑바가 위에서 부터 밀리고 호버시에도 배경이미지는 더 밀리게 된다. 배경이미지를 정확하게 고정된 상태에서 보게 하려면 유령화!! 탑바를 유령화안시키면 위그림처럼 다 밀리게 된다. 3. 윗 이미지처럼 탑바를 유령화시키면 배경이미지 위에 뜨게 된다. 그래서 배경이미지 부분을 내려준다. body에 padding-top을 준다. 그러면 이미지가 밑으로 내려온다. padding- top : 87px를 주었다.
-
line-height:100px; 와 div { height : 100px} 관계 , 단한줄일때Program/HTML.CSS 2020. 7. 12. 22:25
1. height가 동일하면 텍스트가 세로 중앙(수직 정렬)에 배치, 단 한줄일때. line-height | CSS-Tricks The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display: css-tricks.com 2. 폰트의 높이는 제각각이므로 line-height를 주므로 줄간격을 같게 하여 같은 폰트 높이를 가질수 있다. 3. line-height = 줄간격. 출처 : https://programmers.co.kr/learn/courses/4521/lessons/ 출처: https://simsim..