🔵 CSS - text style

jea_i·2022년 2월 7일

목록 보기

4/19

<!-- body : 뷰포트 -->
<body>
    <h2><i class="fab fa-apple">문장,문단관련 속성 알아보기</i><i class="fab fa-apple"></i></h2>
    <hr>
    <!-- 기본 적용된 값을 Default, User Agent라고 합니다. -->
    <h3><i>(ta)</i>text-align: left;</h3>
    <p>이 속성이 적용된 요소는 지정된 값으로 문장의 정렬 기준이 바뀝니다.</p>
    <!-- class="text" class="ta" 로 표기가 안되서 띄어쓰기로 표기 -->
    <p class="txt ta">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque incidunt sequi, labore earum beatae, vero temporibus officiis unde voluptates consectetur corrupti repellendus similique dolor minima? Rerum error pariatur deserunt odit?
        In, tempore dolor est nulla eaque corporis earum quas eum quia pariatur harum ex soluta! Inventore, voluptatum maiores. Perferendis, rerum quo! Quisquam nihil in repudiandae esse labore magni, ipsam laborum.
    </p>
    <hr>
    <h3><i>(td)</i> text-decoration: ;</h3>
    <p>
        이 속성이 적용된 요소는 지정된 값으로 문장에 선을 이용하여 꾸며준다.
    </p>
    <p class="txt">
        <span class="td">Lorem ipsum dolor</span>, sit amet consectetur adipisicing elit.
        Officia aliquid nesciunt animi aut dolores qui maxime dolorem eveniet ut consequatur
        repudiandae, <a href="">quidem accusantium </a>doloribus dolor possimus quam veniam eius labore.
        Iusto nostrum assumenda amet sit <span class="td">nulla beatae libero obcaecati </span>saepe unde veritatis eum dolore sunt tempore aut minus, ullam odio delectus dolorum nisi. Corrupti, et dignissimos fugiat necessitatibus reprehenderit non?
    </p>
    <hr>
    <h3><i>(ti)</i> text-indent: 0;</h3>
    <p>
        이 속성이 적용된 요소는 지정된 값만큼 문장의 첫줄이 들여쓰기가 됩니다.
    </p>
    <!-- p.txt.ti -->
    <p class="txt ti">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit.it impedit tempore modi eligendi distinctio nihil dolorem?
        Animi molestiae accusamus, eos soluta ratione qui quaerat delenitiutaspernatur fugiat dolor perspiciatis?
        Necessitatibus error facere mollitia labore eaque at et culpa? Reprehenderit earum a quae vel, error, quaerat placeat, culpa ipsam tempore architecto modi eaque voluptatem? Enim beatae eos totam harum eum.
    </p>
    <div class="image i1">테스트 이미지 입니다.</div>
    <div class="image">
        <img src="img/pic01.jpg" alt="테스트 이미지">
    </div>
    <hr>
<!--text-shadow: hoff voff blur #000;  : 값을 입력하는 방법-->
    <h3><i>(ts)</i> text-shadow: hoff voff blur #000; </h3>
    <p>
        이 속성이 적용된 요소는 지정된 값만큼 문자에 그림자를 적용해 줍니다.
    </p>
    <ul>
        <li>
            <h4>hoff (Horizontal Offset)</h4>
            <p>
                x축(수평)에서의 그림자 방향으로 값이 양수(+)면 그림자는 오른쪽으로 향하고,
                <br>값이 음수(-)면 그림자는 왼쪽으로 향하게 됩니다.
            </p>
        </li>
        <li>
            <h4>voff (Vertical Offset)</h4>
            <p>
                y축(수평)에서의 그림자 방향으로 값이 양수(+)면 그림자는 아랴쪽으로 향하고,
                <br>값이 음수(-)면 그림자는 위쪽으로 향하게 됩니다.
            </p>
        </li>
        <li>
            <h4>blir</h4>
            <p>
                그림자 흐리기 정도의 값으로 값이 클수록 흐려집니다.
            </p>
        </li>
        <li>
            <h4>#000</h4>
            <p>
                그림자의 색상을 나타냅니다
            </p>
        </li>
    </ul>
    <h1 class="ts">Content Title</h1>
    <div class="box"></div>
    <hr>
    <h3><i>(lh)</i> line-height: ;</h3>
    <p>
        이 속성이 적용된 요소는 지정된 값만큼 문자의 줄높이가 적용됩니다.
        <br>px와 같은 고정단위를 지정하면 지정된 값만큼 적용되지만 단위없이 숫자만 적용하면
        <br>글자 크기의 배수로 줄높이가 적용 됩니다.
    </p>
    <h1 class="lht">Content Title</h1>
    <p class="txt lh">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum magnam temporibus rem eius aperiam itaque nobis in quo officia incidunt! Quos veniam ullam eius dolor enim similique sed expedita itaque?
        Ut ipsum, rerum culpa autem est earum, quas natus quo aliquid odit tempore obcaecati quos numquam provident sed facere aliquam dicta pariatur at ullam voluptatibus! Maiores quis dolor facilis quibusdam!
    </p>
    <hr>
    <h3><i>(ls)</i> letter-spacing: ;</h3>
    <p>
        글자와 글자사이의 간격을 조정합니다.
    </p>
    <p class="ls">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, tempore. Corrupti eos, ab non suscipit illo cum. Quisquam aperiam, porro possimus suscipit similique, nulla eligendi nemo inventore quia qui velit?
    </p>
    <h3><i>(ws)</i> word-spacing: ;</h3>
    <p>
        단어와 단어사이의 간격을 조정합니다.
    </p>
    <p class="ws">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat similique illo iste sint? Eveniet non maiores molestiae, ad obcaecati sequi odit nisi nesciunt alias, officia illo repudiandae at tenetur labore.
    </p>
</body>

<style>
body{background-color:lightgoldenrodyellow}
.txt{
    width: 400px;
    /* 글상자 */
    border: 1px solid #000;
}
/* justify : 정갈하게 왼쪽으로 정렬 */
.ta{
    text-align: justify;
}
.td{
    /* 밑줄 */
    text-decoration: underline;
    /* 취소선 */
    text-decoration: line-through;
    /* 윗줄 */
    text-decoration: overline;
}
a{
    text-decoration: none;
}
.ti{
    text-indent: -20px;
}
.image{
    width: 400px; height: 300px;
    border: 1px solid #000;
}
img{
    width: 100%; height: 100%;
}
/* ../ : 폴더 한단계 위로  */
.i1{
    background-image: url('../img/pic03.jpg');
    background-size: cover;
    /* -99999 를 넣어 alt 역할 */
    text-indent: -99999px;
}
.ts{
    color: #fff;
    font-family: 'Noto serif KR', sans-serif;
    font-size: 48px;
    /* 띄어쓰기로 작성 , rgba로 투명도 설정하기*/
    text-shadow: 0 10px 0 rgba(0, 0, 0, 0.3), 0 -10px 0 rgba(0, 255, 0, 0.3);
}
.box{
    background-color: dimgray;
    width: 300px; height: 300px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 -10px 20px rgba(0, 255, 0, 0.3);
    /* 모서리 둥글게 */
    border-radius: 100px;
}
.lh{
    line-height: 40px;
}
.lht{ 
    width: 600px;
    text-align: center;
    height: 80px;
    line-height: 80px;
    border: 1px solid #000;
}
.ls{
    letter-spacing: 20px;
}
.ws{
    word-spacing: 20px;
}
</style>

jea_i

열정열정열정🔥

이전 포스트

🔵 CSS - font style

다음 포스트

🔵 CSS - text style

CSS

🔵 CSS - font style

🔵CSS - hier selector

0개의 댓글

관련 채용 정보