잡동사니에도 사랑을

DOCTYPE html> Insert title here p { width: 15em; height: 3em; border: 1px solid lightgray; } .hidden { overflow: hidden;} .visible { overflow: visible;} .scroll { overflow: scroll;} scroll은 내용이 넘치지 않아도 스크롤이 보이는 것 .auto { overflow: auto;} auto는 내용이 넘칠 땐 스크롤이 보이고, 넘치지 않을 땐 스크롤이 보이지 않는다. overflow에 hidden값을 적용하면 박스를 넘어가는 내용이 잘려 보이지 않습니다. overflow에 visible값을 적용하면 콘텐트가 박스를 넘어가서도 출력됩니다. overflow에 scrol..

DOCTYPE html> Insert title here .item span { visibility: hidden; } .item:hover span{ visibility: visible; color: red; } 다음 빈 곳에 숨은 단어? I (love) you. CSS is Cascading (Style) Sheet. 응답하라 (1988).

DOCTYPE html> Insert title here div { position: absolute; } img { position: absolute; 항상 부모를 기준으로 } #spadeA { z-index: 20px; left: 10px; top: 20px; } #spade2 { z-index: 0px; left: 40px; top: 30px; } #spade7 { z-index: 10px; left: 150px; top: 60px; } #spade3 { z-index: 15px; left: 90px; top: 5spa0px; }

DOCTYPE html> Insert title here #fixed { position: fixed; 화면을 기준으로 bottom: 10px; right: 10px; width: 120px; padding: 5px; background: red; color: white; } Merry Christmas! 메리 크리스마스

DOCTYPE html> Insert title here div { display: inline-block; position: absolute; border: 1px solid lightgray; } div > p { display: inline-block; position: absolute; width: 15px; height: 20px; background: lightgray; margin: 0; } Merry Christmas! 메리 크리스마스 M E R R Y

DOCTYPE html> Insert title here div { display:inline-block; width: 50px; height: 50px; border: 1px solid lightgray; text-align: center; color: white; background: red; } #down:hover { position: relative; left: 20px; top: 20px; background: green; } #up:hover { position: relative; right: 20px; bottom: 20px; background: green; } 상대 배치, relative T div는 블럭 단위로 움직임 h a n k s

DOCTYPE html> Insert title here * { margin: 0; padding: 0; } body { font: 12px Tahoma, sans-serif; } li { list-style: none; 리스트로 표시된 점들이 사라진다 } #wrap { width: 800px; margin: 0 auto; 너비를 가운데 정렬시킨다 background-color: silver; } #header { background-color: red; } #container { background-color: cyan; } #container::after { ::after는 'content' 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용한다. content에 내용이 없다면 무조건 공백을..

DOCTYPE html> Insert title here #float { float: right; 오른쪽으로 밀려서 나온다. border: 1px solid black; width: 7em; padding: 0.25em; margin: 1em; } .text1 { margin-right: 10em; 오른쪽 여백 10em text-align: justify; 양쪽정렬 } .text2 { clear: both; } 학기말 공지 24일은 피아니스트 조성진의 크리스마스 특별 연주가 있습니다. 태그를 쓰면 줄바꿈이 일어나기 때문에 문장과 문장 사이 약간의 공백이 나타나는 걸 확인할 수 있다. 태그가 아닌 로 잡게되면 문장과 문장이 달라붙어서 나온다. 이제 곧 겨울 방학이 시작됩니다. 학기 중 못다한 Java, C..