자습/명품 HTML5 + CSS3 + Javascript 5

chap 5

#1. position - static(정적 배치) : 브라우저의 디폴트 배치 방식. left, right, top, bottom 프로퍼티 값은 위피에 영향을 주지 않음 - relative(동적 배치) : 정적 배치(기본 위치)로부터 left, right, top, bottom 프로퍼티 값만큼 이동한 상대 위치 top과 bottom이 동시에 지정되면 bottom이 무시되고, left와 right가 동시에 지정되면 right가 무시된다. 상대 배치, relative T h a n k s - absolute(절대 배치) : 부모 태그로부터 left, right, top, bottom 프로퍼티 값만큼 이동한 절대 위치 절대 위치기 때문에 브라우저 크기가 변해도 태그 위치는 변하지 않는다 절대 배치, absol..

chap 4

#1. text-align:left; 와 text-align:justify; 의 차이점 - left 요소는 왼쪽 가장자리에 맞춰져 있기 때문에 오른쪽에 공백이 생기는 반면, justify 요소는 왼쪽과 오른쪽 모두 맞춰져 있습니다. #2. text-indent(들여쓰기) - em은 배수이다(2em = 현재 폰트의 2배 크기) - in은 인치이다(1in = 2.54cm = 96px) #3. Font - Serif 형 : '삐침'이라는 뜻으로 글자의 끝에 삐침 선을 가진 폰트 - Sans 형 : '없다'라는 뜻으로 Sans-Serif 형은 삐침이 없는 폰트를 의미 - Monospace 형 : 삐침 여부와 상관없이 모든 글자의 폭이 동일한 폰트 - font-weight : 100~900 사이의 숫자로 글자의 ..

chap 2

https://hianna.tistory.com/724#t41 [HTML/CSS] div에 배경 이미지 넣기 총정리 (반복, 한번만, 가운데, 꽉차게) CSS를 사용하여 div에 배경 이미지를 넣는 방법입니다. 배경 이미지 넣기 (background-image) 배경 이미지 반복 횟수 지정하기 (background-repeat) background-repeat 속성 값 배경 이미지 반복 (repeat) 배경 이미지 hianna.tistory.com https://yejin0730.tistory.com/70 [CSS] 하단에 고정시키기 준비물은 하단에 고정시킬 태그(div, img 등)와 부모 div 방법은 간단하다. 아래와 같이 하면 된다. .parent{ position: relative; } .chi..