Jessica TKR

#C1C1C1 는 나의 블로그에서 적용중인 본문 글자 색상 (회색)이다. 배경이 검정일때 잘 어울린다.

#article-view {
  color: #C1C1C1;/* 본문 글자 색상 변경 */

}

#head h2 {
  text-shadow: 1px 1px #FFFF00; /* 본문 제목 글자 색상 변경 */
}

#head h2 a {

  color: #FFFF00; /* 본문 제목 글자 색상 변경 */

#article-view h4 {
  color: #FFF; /* 본문 주제 글자 색상 변경 */

}

수정 전에는 글록목 테두리에 사각 박스로 실선이 있었다.

나의 스타일이 아니여서 어디를 어떻게 수정을 해야 할까 고민중이였다.

검색을 해도 나오지 않아서 노가다로 하나씩 대입해 가면서 찾았다.

테두리를 윗 그림처럼 완전히 없애버리고 싶으면 아래코드에서 한줄을 삭제시키면 된다.

#body {
  padding: 20px 15px 18px;
  border: 1px solid #ddd;/* 글목록 테두리 설정부분*/
  word-break: break-all;
}

아래 CSS코드는 나의 블로그에서 적용중인 백그라운드 배경의 불투명 코드이다.

적용시 아래 3가지를 함께 수정하는 것이 좋다.

아래구문에서 0,0,0,0.7 의미는 앞에 0,0,0 은 RGB 컬러를 의미하면 0,0,0 은 검정색을 의미하며 뒤에 0.7은 불투명값이다.

background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('./images/Earth.jpg'); /* 백그라운드이미지 */

아래구문 sidebar도 위에와 동일한 의미이다.

background-color: rgba(155, 155, 155, 0.1); /* 배경을 70% 불투명하게 설정 */

꿀팁!

Q.  낮은 불투명값을 적용한 상태에서 조금 더 낮은 불투명값을 주고 싶을때 어떻게 하면 좋을까요?

A.   RGB 컬러를 어둡거나 밝게 하면 불투명이 조금 다르게 된다. 그래서 나는 sidebar의 RGB 색상이 155,155,155 이다.

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;

  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('./images/Earth.jpg'); /* 백그라운드이미지, 불투명 */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%; /* 배경 이미지를 가로 50%, 세로 50%로 축소 */

}

#sidebar {
  position: fixed; /* 사이드바 스크롤 못하게 고정시킴 */
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  width: 280px;
  height: 100%;
  /*border-right: 1px solid #1568b7; 사이드바와 본문 사이의 구분선의 색상을 설정함, 하지만 미사용으로 주석처리함 */
  cursor: default;
  background-color: rgba(155, 155, 155, 0.1); /* 배경을 90% 불투명하게 설정 */

}

#body {
  padding: 20px 15px 18px;
  word-break: break-all;
}

2024년 스킨........ CSS에서 검색창을 수정할때

#sidebar .search input {
  padding: 10px;
  width: 95%; /* 텍스트 창의 폭을 변경함 */
  border: none;
  /* border-bottom: 1px dashed #ccc; 밑줄 부분인데 주석으로 묶어서 밑줄 안나오게 함*/
  background-color: rgba(155, 155, 155, 0.2); /* 배경을 80% 불투명하게 설정, 앞에 숫자는 rgb 컬러값, 0.2가 불투명값*/
  border-radius: 20px; /* 사각형 모서리에 R을 줘서 둥글게 만듬 */
  color: #f1f1f1; /* press enter to search...  텍스트 색상을 변경함 */
  text-align: center;  /* press enter to search...  텍스트의 위치를 중앙으로 배치함 */

아래 코드는 나의 블로그에서 적용중인 구글 번역기 코드이다.

하기 코드를 드래그 복사해서 사용하면 에러가 발생한다.

메모장에 붙여넣기 한후 문단을 아래처럼 똑같이 정리한 후 사용해야 한다.

<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","native_language_names":true,"detect_browser_language":true,"languages":["ko","en","ja","zh-CN","fr","it","es","de"],"wrapper_selector":".gtranslate_wrapper","alt_flags":{"en":"usa","pt":"brazil","fr":"quebec"}}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/fd.js" defer></script>

<style>
  /* 드롭다운박스 설정*/
  .gtranslate_wrapper select {
    background-color: rgba(155, 155, 155, 0.1); /* 드롭다운박스의 배경을 70% 불투명하게 설정 */
    color: white !important; /* 드롭다운박스의 텍스트 색을 흰색으로 */
    border-color: rgba(155, 155, 155, 0.1); /* 드롭다운박스의 테두리 색상을 70% 불투명하게 설정 */
    padding: 5px;
    font-size: 15px;
    border: none;
    border-radius: 30px; /* 드롭다운박스의 모서리 R값 적용으로 반원으로 둥글게 만들기 */
    transform: translate(23%, 10%); /* 드롭다운박스의 위치 배치 */
  }
  /* 드롭다운박스의 내부 option 항목 설정 */
  .gtranslate_wrapper select option {
    color: black !important; /* 드롭다운박스의 내부 option 항목의 텍스트 색상 블랙으로 */
    background-color: white !important; /* 드롭다운박스의 내부 option 항목의 배경색 흰색으로 */
  }
</style>