잡동사니에도 사랑을

[21.09.17] exam04(05_cssPositioning) - float / text-align: justify(양쪽정렬) 본문

JAVA_EE/CSS

[21.09.17] exam04(05_cssPositioning) - float / text-align: justify(양쪽정렬)

luvforjunk 2021. 9. 17. 18:49
728x90
반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

#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;

}

</style>

</head>

<body>

        <h3>학기말 공지</h3>

        <hr>

        <div>

        <p id="float">

         24일은 피아니스트 조성진의 크리스마스 특별 연주가 있습니다.</p>

        <p> 태그를 쓰면 줄바꿈이 일어나기 때문에 문장과 문장 사이 약간의 공백이 나타나는 걸 확인할 수 있다.

        <p>태그가 아닌 <div>로 잡게되면 문장과 문장이 달라붙어서 나온다.

        <p class="text1">

        이제 곧 겨울 방학이 시작됩니다. 학기 중 못다한 Java, C++ 프로그래밍 열심히 하기 바랍니다.

        인턴을 준비하는 학생들은 프로젝트 개발에 더욱 힘쓰세요. 그럼 다음 학기에 만나요.</p>

        <p class="text2">

        이제 곧 겨울 방학이 시작됩니다. 학기 중 못다한 Java, C++ 프로그래밍 열심히 하기 바랍니다.

        인턴을 준비하는 학생들은 프로젝트 개발에 더욱 힘쓰세요. 그럼 다음 학기에 만나요.</p>

        </div>

</body>

</html>

 

 

728x90
반응형

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

[21.09.17] exam06(05_cssPositioning) - 상대 배치  (0) 2021.09.17
[21.09.17] exam05(05_cssPositioning) -  (0) 2021.09.17
[21.09.17] exam03(05_cssPositioning)  (0) 2021.09.17
[21.09.17] exam02(05_cssPositioning) - <a href="#">활용  (0) 2021.09.17
[21.09.16] exam01(05_cssPositioning) - inline / inline-block / block / none / hidden  (0) 2021.09.16
'JAVA_EE/CSS' Related Articles more