티스토리 뷰

카테고리 없음

예쁜텍스트배경 css코딩 소스

남평지식인 2024. 7. 20. 11:27

목차



    반응형

     

     

     

     

    위 사진에서 보시는 것처럼 CSS 편집으로 들어가서 위치상관없이   4개의  아래 코딩을 붙여 넣습니다 

    붙여 넣은 다음 적용하기를 반드시 눌러 저장합니다 

     

               

     

     

    .divA {
    background-color: #daf8f6;
    width: 819px;
    height: 400;
    float: center;
    padding: 10px;
    font-size: 18px;
    color:#08298A;
    }


    .divB  {
      background-color: #58ACFA;
      width: 819px;
      height : 400;
      float: center;
      padding: 10px;
      font-size: 18px;
      color:#FFFFFF;
    }
     

     

    .divC {

     background-color: #F2E0F7;

     width: 819px;

    height : 400;

    float: center;

    padding: 10px;

      font-size: 18px;
      color:#2E9AFE;
    }
     

    .divD {
      background-color: #FFFFFF;
      width: 819px;
      height : 400;
      float: center;
      padding: 10px;
      font-size: 18px;
      color:#1066e7;
    }  


     

     

    그리고 다음단계는 서식으로 위 CSS내용 불러오기 코드를 작성해 사용하기 편리하게 서식으로 저장합니다 

     

     

     

    먼저 서식관리로 들어가서 

     

     

     

     

    서식쓰기로 들어간 다음  서식이름을 알아보기 쉽게 먼저 입력한 다음 

     

     

    그리고 아래  코딩을 html모드에서  붙여넣고 기본모드로 전환하면   '보라'라는 단어만 생깁니다 그리고 저장하면 서식작성이 완성됩니다  

     

    <div class="divC">
    <p data-ke-size="size16">보라</p>
    </div>

    ▶

     

     

    HTML모드에서 코드입력한 모습
    		   ▶ ▶ 

     

     

     

    그럼 한번 작성된 서식을 불러오겠습니다

     

     

     

     

    배경색깔 서식 선택

     

    선택하면 기본 텍스트인 '보라' 만 보이게 됩니다 

     

     

    이것을 저장하고 미리보기 하면 아래의 모습으로 나타납니다 

     

     

     

    이런 서식안에 다른 색깔의 서식을 겹쳐서 넣으면 아래와 같은 모양이 됩니다 

     

     

     

     

     

     

    반응형