HTML,CSS (28) 썸네일형 리스트형 210304 CSS position 부모, 자식 요소 부모는 position: relative 자식은 position: absolute 로 잡으면 자식 요소가 부모 요소에 맞춰서 모양을 잡는다. 201224 multiple divs margin:0 auto, float:left 여러 개의 div를 하나의 div 내에서 가운데 정렬 시키고 싶었다. 계속 안되서 찾다보니 float:left 적용된 divs 에 margin:0 auto 를 하면 가운데 정렬이 안된다. float:left 없이 하면 됨. 그래서 그냥 wrap box 에 width:100% 랑 text-align:center 주고, 내부 divs 들에 display:inline-block 하니까 float:left 하면서 가운데 정렬한 거 같이 된다. 그리고 내부 divs 에 text-align을 다시 원하는 정렬로 바꿔줌. 201218 배경 100% 고정 오우 이렇게 하니까 원하는 이미지 하나 고정으로 들어가서 스크롤 내려도 계속 그 위치에 있다. 그리고 화면 작아져도 이미지 fixed & cover 로 하니 이미지가 사이즈 변화에 따라 줄어들거나 하지 않고 고정됨. 굳굳. body {margin:0;padding:0;background:url("1.jpg") no-repeat center fixed;background-size: cover;} 201218 background 속성 쪼개지 않고 한 번에 작성 이것도 맨날 헷갈려서 매번 검색하느라 시간 보내는 게 아까워 기록. background css 작성할 때, background-color, background-size 등등을 다 따로 따로 쓰지 않고 background 하나에 쭉 규칙에 맞춰 쓰면 좀 더 간편하게 할 수 있다. CSS 예) 순서는 배경색(뒤에 이미지 url 넣으면 안 써도 됨), 배경 이미지 url, 이미지 반복 여부, 이미지 위치 이미지 위치는 아래처럼 right top 이라고 하면 배경 이미지 정렬이 상단과 오른쪽에 붙어서 시작됨. 그래서 만약 이미지 사이즈를 50%로 하면 왼쪽에 공백이 생긴다. body { background: #ffffff url("img_tree.png") no-repeat right top; } 출처 : ww.. 201215 DIV로 TABLE 만들기 왜 이렇게 하는 게 필요했었는지는 기억이 안나는데 최첨단을 필요로하는 곳이 아니면 종종 말도 안 되는 게 필요할 때가 있다. div 를 써서 table 처럼 보이게 만들기. Lorem Ipsum A 200 400 B 100 150 201215 CSS even, odd 이게 맨날 헷갈린다. nth-child 하고 even, odd 쓰면 되는 것을.. 아이템에 짝수번, 홀수번에 따라 효과를 다르게 주고 싶다면, 주로 줄 구분이겠지, 이렇게 하면 된다. li:nth-child(even) {background-color:#ededed;} li:nth-child(odd) {background-color:#fffdf4;} 201215 CSS 줄노트 효과 주기 예전에 ul, li로 작업하면서 결과물에 줄노트에 글을 쓴 것 같은 효과를 주고 싶었다. 그 때 이렇게 하니까 원하는대로 나옴. Didn't know what time it was and the lights were low I leaned back on my radio Some cat was layin' down some get it on rock 'n' roll, he said Then the loud sound did seem to fade Came back like a slow voice on a wave of phase haze 201214 웹폰트 사용2 : 직접 골라 세팅하고 적용하기 이미 세팅 되어 쉽게 사용할 수 있게 되어 있는 웹폰트 외에 개인적으로 다른 폰트를 사용하고자 할 때 다음과 같이 하면 된다. 1. 폰트 확장자 변경 : otf, ttf 로 되어 있는 폰트의 확장자를 웹에 맞게 변경해 줘야함. 나는 eot, woff, woff2 로 변환함. 셋 중에 하나로 하면 안 될 때가 있어서. font convert 라고 검색하면 변환해 주는 사이트들이 나온다. 2. 폰트 업로드 : 폰트를 사용할 웹사이트의 호스팅 서버에 올려준다. 예전에는 티스토리에 사용할 웹폰트를 개인 홈페이지에 올려서도 사용이 가능했는데, 요즘은 CORS(Cross-Origin Resource Sharing) 라고 하며 기본적으로는 사용 할 수 없게 되어 있다. 그래서 티스토리에서 사용하려면 티스토리에 올려야.. 201204 모바일 화면 짤 때 head 부분에 추가할 것 홈페이지 width 를 100%으로 했는데, 웹에서는 잘 나오는 게 모바일로 볼 때 이상하다면 사이에 아래 내용을 추가한다. 아마도 없을 것이다. 201203 배경 height 100% 1 HTML CSS html, body {height:100%;} body {display:flex;color:#000000;background-color:#eff0e1;} #wrap {width:100%;height:auto;} .main {min-height:100%;} .main:nth-child(1) {background:url('경로/1.jpg') no-repeat center;background-size: auto 100%;} .main:nth-child(2) {background:url('경로/2.jpg') no-repeat center;background-size: auto 100%;} .main:nth-child(3) {background:url('경로/3.jpg') no-repeat c.. 이전 1 2 3 다음
