본문 바로가기
자바 풀스택 공부

Day 29. text-shadow, white-space 공백 처리하기, margin, text-indent 텍스트 들여쓰기

by seung_nari 2022. 2. 12.

text-shadow

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .trans1 {text-transform: uppercase; }
        .trans1 a {text-decoration: none; color: black;}
        .trans2 {text-transform: capitalize;}
        .trans2 a {text-decoration: line-through; color: red;}

        .shadow1 {color: orange; text-shadow: 3px 3px;}
        .shadow2 {text-shadow: 5px 5px 3px red;} /* x축 y축 번짐정도 색 */
        .shadow3 {color: #fff; text-shadow: 2px -2px 3px #000;}
        .shadow4 {background: #000 ; padding: 20px;
            text-shadow: 0 0 4px #ccc, 0 -3px 4px #ff3, 2px -6px 6px #fd3, -2px -9px 11px #f80, 2px -12px 18px #f20}
    </style>
</head>
<body>
    <!-- 전각, 반각 -->
    <!-- 가나다 ABCD123 ！ 전각 ! 반각-->
    <ul>
        <li class="trans1"><a href="#">html</a></li>
        <li class="trans1"><a href="#">css</a></li>
        <li class="trans2"><a href="#">javascript</a></li>
    </ul>

    <h1 class="shadow1">HTML5</h1>
    <h1 class="shadow2">HTML5</h1>
    <h1 class="shadow3">HTML5</h1>
    <h1 class="shadow4">HTML5</h1>
</body>
</html>

white-space 공백 처리하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {width: 300px; border: 1px solid; margin: 15px; overflow: hidden; text-overflow: ellipsis;}
        .cls2 {white-space: nowrap;}
        .cls3 {white-space: pre;}
        .cls4 {white-space: pre-line;}
        .cls5 {white-space: pre-wrap;}
    </style>
</head>
<body>
    <div class="cls1">모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다. 국가는 대외무역을 육성하며, 이를 규제·조정할 수 있다. 국무회의는 정부의 권한에 속하는 중요한 정책을 심의한다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다. 법원은 최고법원인 대법원과 각급법원으로 조직된다. 모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다. 국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다.</div> 
    <div class="cls2">모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다.
         국가는 대외무역을 육성하며, 이를 규제·조정할 수 있다. 국무회의는 정부의 권한에 속하는 중요한 정책을 심의한다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다. 법원은 최고법원인 대법원과 각급법원으로 조직된다. 모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다. 국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다.</div> 
    <div class="cls3">모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다.
         국가는 대외무역을 육성하며, 이를 규제·조정할 수 있다. 국무회의는 정부의 권한에 속하는 중요한 정책을 심의한다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다. 법원은 최고법원인 대법원과 각급법원으로 조직된다. 모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다. 국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다.</div> 
    <div class="cls4">모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다.
         국가는 대외무역을 육성하며, 이를 규제·조정할 수 있다. 국무회의는 정부의 권한에 속하는 중요한 정책을 심의한다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다. 법원은 최고법원인 대법원과 각급법원으로 조직된다. 모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다. 국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다.</div> 
    <div class="cls5">모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다.
         국가는 대외무역을 육성하며, 이를 규제·조정할 수 있다. 국무회의는 정부의 권한에 속하는 중요한 정책을 심의한다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다. 법원은 최고법원인 대법원과 각급법원으로 조직된다. 모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다. 국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다.</div> 
</body>
</html>

margin, text-indent 텍스트 들여쓰기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* text-align : 현재 태그가 가지고 있는 inline 태그의 정렬 */
        /* margin : 현재 태그의 좌우 마진을 조절해 위치 지정 */
        p {width: 80%; margin: 15px auto; border: 1px solid; text-indent: 15px;}
        .cls1 {text-align: center;}
        .cls2 {text-align: right;}
        .cls3 {text-align: justify;}
    </style>
</head>
<body>
    <p>모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다. 국가는 대외무역을 육성하며, 이를 규제·조정할 수 있다. 국무회의는 정부의 권한에 속하는 중요한 정책을 심의한다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다. 법원은 최고법원인 대법원과 각급법원으로 조직된다. 모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다. 국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다.</p> 
    <p class="cls1">모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다. 국가는 대외무역을 육성하며, 이를 규제·조정할 수 있다. 국무회의는 정부의 권한에 속하는 중요한 정책을 심의한다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다. 법원은 최고법원인 대법원과 각급법원으로 조직된다. 모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다. 국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다.</p> 
    <p class="cls2">모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다. 국가는 대외무역을 육성하며, 이를 규제·조정할 수 있다. 국무회의는 정부의 권한에 속하는 중요한 정책을 심의한다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다. 법원은 최고법원인 대법원과 각급법원으로 조직된다. 모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다. 국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다.</p> 
    <p class="cls3">모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다. 국가는 대외무역을 육성하며, 이를 규제·조정할 수 있다. 국무회의는 정부의 권한에 속하는 중요한 정책을 심의한다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다. 법원은 최고법원인 대법원과 각급법원으로 조직된다. 모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다. 국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다.</p> 
</body>
</html>

말풍선만들기

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ballon {width: 300px; background-color: #222; color: #eee; padding: 15px;
            border-radius: 0.7em; position: relative;
        }
        .ballon::after{
            position: absolute;
            content: ' ';
            border-style: solid;
            border-color: #222 transparent transparent transparent;
            border-width: 20px 10px;
            
            left: 70px; bottom: -30px;
            width: 0px;
            height: 0px;
        }
        .leaf{
            width: 100px; height: 70px; border: 1px solid green;
            border-radius:  20px 2px;
        }
    </style>
</head>
<body>
    <div class="ballon">이건 앞으로 말풍선이 될겁니다.</div>
    <div class="leaf"></div>

    <p class="ballon">이것도 말풍선</p>
</body>
</html>

'자바 풀스택 공부' 카테고리의 다른 글

Day 31.  (0) 2022.02.17
Day 30.  (0) 2022.02.14
Day 28. Css 그라데이션  (0) 2022.02.12
Day 27.  (0) 2022.02.09
Day 26.  (0) 2022.02.08

관련글

댓글

티스토리툴바