잡동사니에도 사랑을

[21.09.17] exam07(05_cssPositioning) - 각기 다른 위치에 글씨 넣기(display, position, border 설정) 본문

JAVA_EE/CSS

[21.09.17] exam07(05_cssPositioning) - 각기 다른 위치에 글씨 넣기(display, position, border 설정)

luvforjunk 2021. 9. 17. 19:03
728x90
반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

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;

}

</style>

</head>

<body>

        <h3>Merry Christmas!</h3>

        <hr>

        <p>메리 크리스마스</p>

        <div>

        <img src="../img/christmastree.png" width="200" height="200" alt="크리스마스 트리">

        <p style="left: 50px; top: 30px;">M</p>

        <p style="left: 100px; top: 0px;">E</p>

        <p style="left: 100px; top: 80px;">R</p>

        <p style="left: 150px; top: 110px;">R</p>

        <p style="left: 30px; top: 130px;">Y</p>

        </div>

</body>

</html>

 

결과창

728x90
반응형

'JAVA_EE > CSS' 카테고리의 다른 글

[21.09.17] exam09(05_cssPositioning) - 이미지 겹쳐서 배치(z-index 활용)  (0) 2021.09.17
[21.09.17] exam08(05_cssPositioning) - 화면을 기준(fixed)으로 자리 배치  (0) 2021.09.17
[21.09.17] exam06(05_cssPositioning) - 상대 배치  (0) 2021.09.17
[21.09.17] exam05(05_cssPositioning) -  (0) 2021.09.17
[21.09.17] exam04(05_cssPositioning) - float / text-align: justify(양쪽정렬)  (0) 2021.09.17
'JAVA_EE/CSS' Related Articles more