본문 바로가기
CSS/CSS 이론에따라 직접해보기

02-1 폰트,오버플로우

by 임혁진 2024. 1. 26. 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!-- 
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap" rel="stylesheet"> 
-->

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap');

        body {
            font-family: 'Noto Serif KR', serif;
            
            font-size: 30px;
            font-weight:100; /* bold가 가장 굵게*/
            font-style: italic; /* 글씨스타일*/
            

            /*텍스트 속성*/
            color:aqua;
            letter-spacing: 30px; /*문자간격 음수는 문자를 겹침 */
            line-height: 30px; /*줄 간격을 지정한다*/
            text-align: left; /*문자 정렬 위치 left right center justify*/
        }
    </style>
</head>

<body>
    <p>헬로월드</p>
    <h3>웹폰트?</h3>

    <section>
        <div>
            <form>
                <h4>웹폰트???</h4>
            </form>
        </div>
    </section>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .abox {
            text-align: center;
            /* 문자 정렬 left , right , center ,justify 가 있다 */
            text-decoration: dashed underline;
            /* 밑줄 추가 */
            /*dashed 속성은 테두리 점선이다*/
        }

        a {
            text-decoration: none;
            /* a링크에 밑줄 삭제 */
            color: black;
        }

        /* 문단세로정렬 -기준이 되는 태그에 적용*/
        .bbox img { /*기준이 img */
            vertical-align: middle;
        }

        /* 
        문단을 세로에서 정가운데로 보내야 하는데 , 기준이 될태그가 없는경우?
        높이와 줄간격을 동일하게 맞추면 됩니다
        한줄의 문장을 정가운데로 보낼때만 사용 
         */
        .cbox {
            height: 200px;
            width: 200px;
            line-height: 200px;
            text-align: center;
            border:1px solid #777; /*테두리*/
        }
    </style>
</head>

<body>

    <p class="abox">
        글자관련속성
    </p>

    <a href="#">글자</a>

    <p class="bbox">
        안녕하세요?
        <img src="img/생선만 골라먹는 아기 고양이.jpg" alt="이미지">
        <d>asdfasf</d>
    </p>

    <p class="cbox">
        문단정가운데정렬
    </p>
</body>

</html>

 

 

오버플로우

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .abox {
            border: 1px solid #777;
            height: 100px;
            /*원래 높이는 , 컨텐츠가 자연스럽게 채워서 내려오도록 가만히 놔둔다- 굳이 높이를 지정해주진 않는다 */
            width: 300px;
            /*박스의 크기를 지정하고 박스안의 값이 박스를 넘칠 때 사용하는 overflow를 사용한다 */
            /* overflow: scroll; 스크롤 형식 */
            /* overflow : hidden; 숨긴다-(크기에 맞게 자름) */
            /* overflow : visible; 보인다 - 기본값 */
            overflow: auto;
            /* 글이 넘치면 스크롤 생성 , 없으면 생성하지않는다 */
        }

        /*
        가로 스크롤 만들기
        */
        .bbox {
            border: 1px solid #777;
            height: 100px;
            width: 300px;

            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            /* 공백은 유지하면서 줄바꿈은 하지않음*/
        }
        
        .cbox {
            border :1px solid #777;
            height: 100px;
            width : 300px;

            overflow-x:auto;
            overflow-y:auto;
            white-space: nowrap;
        }

        .cbox table {
            border-collapse: collapse; /*중첩되는 선을 하나로 합침*/
        }

       .cbox table, .cbox tr, .cbox td {
            border:1px solid #777;
        }
       
    </style>
</head>

<body>

    <p class="abox">
        Visual Studio에서 Eclipse의 Ctrl + D와 유사한 기능은 없지만, 비슷한 동작을 수행할 수 있는 몇 가지 대안이 있습니다. 여러 줄의 코드를 한 번에 삭제하고 싶다면 다음과 같은
        방법들이 있습니다:

        삭제 키 사용: 여러 줄을 선택한 후 Delete 키나 Backspace 키를 눌러 삭제할 수 있습니다.

        주석 처리: 여러 줄을 선택한 후 Ctrl + K, Ctrl + C 키를 사용하여 주석 처리하면 해당 코드가 주석 처리되어 비활성화됩니다.

        코드 스니펫 사용: 코드 블록을 드래그하여 드롭다운에서 "Remove and Sort Usings"를 선택하면 코드 블록이 삭제됩니다. 이 기능은 C# 코드에서 사용 가능합니다.
    </p>
    <div class="bbox">
        <p> Studio에서 Eclipse의 Ctrl + D와 유사한 기능은 없지만, 비슷한 동작을 수행할 수 있는 몇 가지 대안이 있습니다. 여러 줄의 코드를 한 번에 삭제하고 싶다면 다음과 같은
            방법들이 있습니다:</p>

        <p> 삭제 키 사용: 여러 줄을 선택한 후 Delete 키나 Backspace 키를 눌러 삭제할 수 있습니다.</p>

        <p> 주석 처리: 여러 줄을 선택한 후 Ctrl + K, Ctrl + C 키를 사용하여 주석 처리하면 해당 코드가 주석 처리되어 비활성화됩니다. </p>

        <p>코드 스니펫 사용: 코드 블록을 드래그하여 드롭다운에서 "Remove and Sort Usings"를 선택하면 코드 블록이 삭제됩니다. 이 기능은 C# 코드에서 사용 가능합니다.</p>
    </div>

    <div class = "cbox">
        <h3>제목</h3>

        <table>
            <tr>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
            </tr>
            <tr>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
            </tr>
            <tr>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
            </tr>
            <tr>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
            </tr>
            <tr>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
                <td>내용</td>
            </tr>
        </table>
    </div>

</body>

</html>

오버플로우를 사용하지않으면 글이 박스를 넘어선다. 

 

'CSS > CSS 이론에따라 직접해보기' 카테고리의 다른 글

03백그라운드  (0) 2024.01.26
02-2 디스플레이  (1) 2024.01.26
01. 선택자  (1) 2024.01.24
블럭-인라인 ,스타일시트  (1) 2024.01.24
CSS 세팅하기  (0) 2024.01.24

관련글

티스토리툴바