목록JAVA_EE/CSS (49)

잡동사니에도 사랑을

[21.09.17] practice05(css) - id속성, class속성 활용

DOCTYPE html> Insert title here body { background-color: powderblue; } h3, em { color: green; } div strong { → 후손 color: red; } div > strong { → 자식 color: blue; } #center { text-align: center; } #center strong { background-color: yellow; } .indent { → 들여쓰기 text-indent: 3em; } 얼굴 박인희 길을 걷고 산들 무엇하리 꽃이 내가 아니듯 내가 꽃이 될 수 없는 지금...
JAVA_EE/CSS 2021. 9. 17. 19:09
[21.09.17] exam11(05_cssPositioning) - 박스 안 내용 확인(hidden, visible, scroll, auto 활용)

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..
JAVA_EE/CSS 2021. 9. 17. 19:07
[21.09.17] exam10(05_cssPositioning) - 숨겨져 있는 단어 마우스 올려 보이게 하기(<span> 태그 두 번)

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).
JAVA_EE/CSS 2021. 9. 17. 19:06
[21.09.17] exam09(05_cssPositioning) - 이미지 겹쳐서 배치(z-index 활용)

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; }
JAVA_EE/CSS 2021. 9. 17. 19:05
[21.09.17] exam08(05_cssPositioning) - 화면을 기준(fixed)으로 자리 배치

DOCTYPE html> Insert title here #fixed { position: fixed; 화면을 기준으로 bottom: 10px; right: 10px; width: 120px; padding: 5px; background: red; color: white; } Merry Christmas! 메리 크리스마스
JAVA_EE/CSS 2021. 9. 17. 19:04
[21.09.17] exam07(05_cssPositioning) - 각기 다른 위치에 글씨 넣기(display, position, border 설정)

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
JAVA_EE/CSS 2021. 9. 17. 19:03
[21.09.17] exam06(05_cssPositioning) - 상대 배치

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
JAVA_EE/CSS 2021. 9. 17. 18:51
[21.09.17] exam05(05_cssPositioning) -

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에 내용이 없다면 무조건 공백을..
JAVA_EE/CSS 2021. 9. 17. 18:51
이전 Prev 1 2 3 4 5 6 7 Next 다음