css cheat sheet 클래스 선택자, margin(마진), display , center 조정 간단한 구성 요소

 앞에서는 html의 간단한 sheet를 소개 하였습니다.   html은  주로 골격을 나타나는 것이라, 디자인을 하는데는 css로 하여야 합니다. 

아래 코드와 같이 css 관련 하여 매우 간단하게 코딩 하겠습니다. 


  • body 부분의 css 코딩 

 body {

  background:yellow;

  color:blue;

  font-size : 20px;

  font-weight:liter;

  text-align:center;

  margin-top: 10px;  

}

  • html 코딩     

  <html>

  <head>

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    Please accept ou cokkies!

  </body>

</html>


 결과 
  


  • 클래스 선택자(class selector) css 코딩
.main {
  margin-top: 100px;
}

.log-img {
  display: block;
  width: 380px;
}

.search-input {
  display: block;
  width: 480px;
}

  • 클래스 선택자(class seledctor) html 코딩

  <html>

  <head>

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <div class="main" align = "center">

      <img

        class="log-img"        src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"

        width="100%"

      />

      <input class="search-input" type="text" />

      <div>

      </div>

    </div>

  </body>

</html>

 

  • margin(마진)의 css 코딩 

body {

  margin: 0;

}


.red {

  background: #c71226;

  height: 100px;

/*  margin-top: 10px;

  margin-left: 10px;

  margin-right: 10px;*/

}


.blue {

  background: #0d1b88;

  height: 100px;

   margin-top: 20px;

  margin-bottom: 20px;

}


.green {

  background: #397327;

  height: 100px;

}

  • margin(마진)의 html 코딩 

<html>

  <head>

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <div class="red"></div>

    <div class="blue"></div>

    <div class="green"></div>

  </body>

</html>

결과




  •  구글 main page 마진과 넒이 조정 css 코딩

.main {
  margin-top: 50px;
}

.log-img {
  display: block;
  width: 200px;
  margin-bottom: 20px;
}

.search-input {
  display: block;
  width: 400px;
}

  • 구글 main page 마진과 넒이 조정 html 코딩

<html>

  <head>

      <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <div class="main">

      <img   class = "log-img"   src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"

        width="100%"

      />

      <input width="100%" type="text" />

    </div>

  </body>

</html>

결과


  •  margin을 이용한 center 조정 css

img{
  display:block;
  width:200px;
  margin-left:auto;
  margin-right:auto;    
}

  •  margin을 이용한 center 조정 html

 <html>

  <head>

     <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <img src ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyygEBHnnwLxf2fLCYQZZjTKXCL2n87uhgG3k9vowLJsMCslhwKv_L010V6lgNCYdg8W7iqfUgnepSlO08F9dRx4gMvnQ6c6In5j6kd1wQK8yYy6ExrX6j-usLbZHTw-TXv587bq7gvZyqfzvY3vIgsPE2tAe-BIZIjvShxHPn53Yuqu-pv2lFBiRNV3c7/w263-h213/%EC%BA%A1%EC%B2%98.JPG">

  </body>

</html>

결과





 

시간: 댓글 없음:
라벨: , , ,

이미지 파일들 메일 보낼때 사용

 메일을 보낼때 사용하는 이미지 파일들임


























시간: 댓글 없음:

html cheat sheet 헤드라인, 문단소스, 이미지 소스, 입력 소스, 하이퍼링크, html 구조, 목록

  html 코딩의 기본 개념만 정리 하였습니다. 

html 코딩은  웹페이지에  기본적으로 골격을 나타낸 것입니다. 

이건은  간단한 사항이라  별도의 텍스트 없이  내용만 간단히 처리 하겠습니다. 


  •  헤드라인과  문단 소스 
 <h1>humanmans have reache Mars</h1>

 <h3>he Sarship rocket successfully landed on th red plant this moning.</h3>

 <p>
   After a 115 days lon journy, th crew of finally arrived to their desination.
   This is the first time humans have set foot on a planet other than Earth
 </p>

    결과 
 


아래의 그림은  이미지 소스를 링크 시키기 위한  참고 그림 입니다. 





  • 이미지 소스 
      원래는 서버에 있는 사진으로 하여야 하나,  사진이 없으므로,  위의 있는 그림의 URL을 링크 시켜 이미지 소스를 걸었습니다. 
 

<h1>humanmans have reache Mars</h1>

<h3>he Sarship rocket successfully landed on th red plant this moning.</h3>

<img
  src="https://scx2.b-cdn.net/gfx/news/2021/a-couple-of-trainee-as-1.jpg"
  width="100%"
/>

<p>
  After a 115 days lon journy, th crew of finally arrived to their desination.
  This is the first time humans have set foot on a planet other than Earth
</p>

<img  src="https://blogger.googleusercontent.com/img/a/AVvXsEiTX7ZMBy8hgCUYGBCqiBX5CWHQhctWh9ow_zAJDqIaUNlLML08nUQoYGqAY0AQqls_U2v7_tID8oO2vUCzErms-ktMFE9KbNJRki-5oaSmorCzPaT3vo5SBF_9oBj4eHKmvcM6uGBxAAIf_0DZDwNOnbxdB0ZqJJ8qsmUF_J82errZNWdJrelQke8Wx9D8"
  width="100%"
/>"
 
  결과 



  • 버튼 소스
<h1>Welcome!</h1>
<p>You have been granted acess to the platform.
  Please create an account.
</p>

<button>Sign up!</button>

       결과

 


 

  • 아이디 패스워드  파일선택  버튼 
<h1>Welcome!</h1>
<p>You have been granted acess to the platform. Please create an account.</p>

<input type="text" placeholder="Enter username" />
<input type="password" placeholder="Enter password" />
<input type="file" />
<button>Sign up!</button>
   결과
  • 앵커 태그 다른 페이지를 링크 걸 때
<h1>My work</h1>
<h2>Project 1: Google.com</h2>
<p>I built this one as a part of HTML&CSS</p>
<p>
  Check out the live demo
  <a href="https://google.com/" target="_blank">here </a>
</p>
   
결과 

  • 구글 페이지로 살펴 본 구조 정리 
       스타일 시트 때문에  코드가 길어 졌습니다.   이건은 나중에 추가 정리 하겠습니다. 

<!doctype html>
<html>
  <head>
    <style>
      body,
      html {
        margin: 0;
        padding: 0;
      }

      img {
        width: 30%;
        display: block;
        margin: 100px auto 20px;
        min-width: 272px;
      }

      input {
        box-sizing: border-box;
        display: block;
        border-radius: 24px;
        border: 1px solid rgb(223, 225, 229);
        height: 44px;
        margin: 0 auto 29px;
        max-width: 564px;
        width: 90%;
        padding-left: 30px;
        font-size: 16px;
      }

      button {
        box-sizing: border-box;
        margin-top: 0;
        padding: 0 16px;
        font-size: 14px;
        height: 36px;
        background-color: #f8f9fa;
        border: 1px solid #f8f9fa;
        cursor: pointer;
      }

      button:first-of-type {
        margin-right: 8px;
        margin-left: calc(50% - 131.5px);
      }

      button::hover {
      }

      p {
        margin-top: 40px;
        text-align: center;
      }

      a {
      }
    </style>
  </head>

  <body>
    <img
      src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
      width="100%"
    />
    <input width="100%" type="text" />
    <button>Google Search</button>
    <button>I'M Feeling Lucky</button>
  </body>
</html>


결과 





  • 리스트 목록 나열하기 

<!DOCTYPE html>
<html>
  <head> </head>

  <body>
    <h1>Beijing Olympics</h1>
    <ui>
      <li>Norway</li>
      <li>Germay</li>
      <li>China</li>
      <li>US</li>
    </ui>
  </body>
</html> 


  결과 

   


시간: 댓글 없음:
라벨: , , , , ,

C 언어 문자 및 숫자 형 보기 char int

   아래의 코드는 코딩자율 학습 나도 코딩의 C언어 입문의 1장 코드를 인용 한것이다. 

나중에  C 언어 치다가  잘 모를 때,  사용  할 수 있어 좋을 것 같아서 기록 한다. 


Read more »
시간: 댓글 없음:
라벨: , ,

전류분석 시뮬레이션 current IOT data simul Rstudio muti core

 IOT 데이터는 일반적으로, 초당 데이터베이스를 받는다. 하지만, 아래와 같은 케이스는 분단위로 데이터 셋을 받아도 연간 한개 포인트에 52만개의 데이터 이다. 이것과 관련 해서 7일 단위 30일 단위 평균을 구할 때, 속도의 문제가 발생 한다.

속도의 문제가 발생 할때, 우리는 어떻게 처리 해야 하며, 그리고, 데이터가 발생 할시 트렌드 분석을 해야 하는데, 트렌드는 비선형 형태로 데이터가 나타난다. 비선형 형태로 데이터가 나타 날때, 어떻게 Base line 신호를 주어야 하는 기준치를 나타낼 것인지 새로운 문제가 될것이다.

Read more »
시간: 댓글 없음:
라벨:

Data Frame 만들고 Filter 하고 query 하기 pandas(판다스)

Pandas는 DataFrame을 아주 쉽게 파이썬에서 사용할 수 있도록 만든것이다.  서적에는 원리나,  기본적인 방법을 설명하는 것이 매우 많이 적혀 있지만,   실무에서 거의 쓰지 않는 것까지 포함되어 있다.   이 부분은  다른  언어(R)로 주로 일을 하였지만,  실제 실무에서 많이 사용하는 것만 정리 하겠다.   쓰지 않는 것 까지 익히려고 애를 쓰게 되면 될 수록 학습의 피로감만 높아 진다. 

Read more »
시간: 댓글 없음:
라벨: ,

RST 6상 그래프 R plot 그리기

   RST 6상 그래프를 구글링해서 찾으러고 하니,  RST  3상만 나왔다.  RST 6상은 특수한 설비에서 작동되는 것이니,  나올 수가 없다.  교육용 자료로 만들려 하다 보니, 찾을 수가 없어 직접 그렸다. 

RST 3상은 360에서 3을 나누니,  120의 파형이 그래프로 보여지지만,   RST 6상은 360에서 6을 나누니 60도의 파형 그래프로 그려 졌다.   아래의 소스코드를 보고 그림을 그릴 수 있다. 


Read more »
시간: 댓글 없음:
라벨:
피드 구독하기: 글 (Atom)

css cheat sheet 클래스 선택자, margin(마진), display , center 조정 간단한 구성 요소

 앞에서는 html의 간단한 sheet를 소개 하였습니다.   html은  주로 골격을 나타나는 것이라, 디자인을 하는데는 css로 하여야 합니다.  아래 코드와 같이 css 관련 하여 매우 간단하게 코딩 하겠습니다.  body 부분의 css 코딩  ...

  • LightGBM 카테고리 변수 (Categorical Variables) 트리기반 그라이던트 부스팅 Telco Customer Churn (통신회사 고객 이탈)
       현업에 있으면,  직면하는 데이터는 항상 범주형(카테고리) 데이터 셋이다.   다른 모델로 하였을 경우 범주형 데이터는 항상 원-핫 인코딩을 하여 계산 하여야 만 했다.   하지만, 원-핫 인코딩을 하지 않고,  범주형 데이터를 이용하는 것에 대...
  • R 4.2 Windows rJava 및 KOLNP 설치
    KoLNP 로딩하면 아래와 같은 메시지가 나올 경우가 있다.   warning message: in i.p(...) : 패키지 ‘c:/users/rdmkyg/appdata/local/temp/rtmps6vlku/file23e45dd83537/konlp...
  • 논리연산자 AND, OR R , if 문 과 for 문 사용법과 dplyr 사용법 비교
      논리연산자 AND,OR는  실무에서 많이 쓰이는 방법이다.  R을 처음 시작 하는 컴퓨터 프로그래머는 for문을 많이 사용한다.  하지만 R에서 for문은 속도 측면에서 최악이다.   그리고 AND, OR, IF 문도 for문을 돌리지 않고 dpl...
  • t-test 샘플의 크기가 다를때 사용하는 방법
      t-검정은  두 데이터 셋의 평균값을 비교하고 동일한 모집단의에서 나온 것인지 결정 할 수 있다.  아래의 데이터 셋의 예에서  Group 1과 Group 2의  다른 샘플은 가진다면,   동일한 평균과 표준편차를 가질 것이라고 기대할 수 없다. ...
  • R 패키지(Package) 설치 devtools wsl 버전
    1. devtools 가 필요한 이유
  • R실전 와이블 분포 (Weibull distribution) 분포로 수명 예측 하기
        통계학에서 베이블 분포(Weibull distribution)는 연속확률 분포로써  고장 확률에 대한 예측에 대하여 많이 쓰인다.   신뢰도를 측정하는데 많이 쓰이는데,  시스템 혹은 부품이 작동을 시작하여  그 시점까지 고장 나지 않고 여전히...
  • 시계열 분석 칼만 필터 개요
       칼만 필터 Kalman filter는 충분히 성숙한 방법이다. 시계열로 부터 새로운 정보를 결합하는 데 사용되고 과거에 알려진 내부 상태 추정 정보를 지능적으로 결합해 준다. 칼만 필터의 최초 사용 사례로는 아폴로 11호 apollo 11 mis...
  • Windows R 관리자 권한으로 실행
      Windows R은 관리자 권한으로 실행하지 않으면 패키지도 로딩이 안되고,   제대로 패키지를 설치 할 수 없다.  따라서 제대로 설치 하고 실행 하려면,   아래와 같이 관리자 권한으로 실행 하여야 한다.  1.아이콘에서 관리자 권한 실행 법 ...
  • 동전 던질때 앞면이 나올 확률
     네이버 지식인에서  질문한 내용이다.  질문 통계학 R 실습 R에서 난수를 이용하여 동전의 앞면이 나올 확률을 구하는 코드 좀 알려 주세요 RStudio 사용합니다!     sample 함수의 복원추출 방식으로 간단하게 함수를 작성 하여,  확률을...
  • 텍스트 마이닝 분석 단어 빈도 및 형태소 분석기, 비교분석
       텍스트 마이닝은  현업에서 은근히 많이 사용하는 기능이다.   즉,  텍스트 데이터를 처리를 엑셀로 하기 어렵고,  응용 해야 할 문제 들이 많이 있다.    아래의 내용은  " 쉽게 배우는 R 텍스트 마이닝"을 Base로  분...