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 코딩  ...

  • R 4.2 Windows rJava 및 KOLNP 설치
    KoLNP 로딩하면 아래와 같은 메시지가 나올 경우가 있다.   warning message: in i.p(...) : 패키지 ‘c:/users/rdmkyg/appdata/local/temp/rtmps6vlku/file23e45dd83537/konlp...
  • R실전 와이블 분포 (Weibull distribution) 분포로 수명 예측 하기
        통계학에서 베이블 분포(Weibull distribution)는 연속확률 분포로써  고장 확률에 대한 예측에 대하여 많이 쓰인다.   신뢰도를 측정하는데 많이 쓰이는데,  시스템 혹은 부품이 작동을 시작하여  그 시점까지 고장 나지 않고 여전히...
  • 시계열 분석 시계열 통계 모델의 장단점
      시계열 분석의 장단점을 아래와 같이 나열을 한다.  장점 통계 모델은 간단하고 투명해서 모델의 파라미터 측면을 보면 명확하게 이해 할 수 있다.  통계 모델을 정의하는 간단한 수학적 표현 덕분에 철저히 통계적인 방식으로 관심 속성을 도출하는 것이 ...
  • LightGBM 카테고리 변수 (Categorical Variables) 트리기반 그라이던트 부스팅 Telco Customer Churn (통신회사 고객 이탈)
       현업에 있으면,  직면하는 데이터는 항상 범주형(카테고리) 데이터 셋이다.   다른 모델로 하였을 경우 범주형 데이터는 항상 원-핫 인코딩을 하여 계산 하여야 만 했다.   하지만, 원-핫 인코딩을 하지 않고,  범주형 데이터를 이용하는 것에 대...
  • R 중급 R list 합치기 및 데이터 프레임 나타내기
       list는 R에서 매우 어려운 부분이다.  이 부분을 알게 되면 중급 정도의 소리는 듣는다.  아래 네이버 지식인의 질문에 대한 답변이다.  R스튜디오 도와주세요 문제) r에서 제공하는 mtcars 데이터세트를 이용하여 다음 코드들을 작성 하시오...
  • 생존분석 패키지 survival, survminer, muhaz 설치 및 예제
       필자가 근무하고 있는 부서는  보전(maintenance Dept') 부서이다.  생존분석이  매우 중요하다.   고장확률은 아래와 같다.      고장확률 =  1 - 생존확를     센서에서 고장에 대한 Event 알람 신호를 받아,...
  • matplotlib 그래프 그리기 DNN 딥러닝 Line chart
     딥러닝을 맨 처음 테스트로 배우는  쉬운 예제로 mnist 데이터셋을 사용한다. 사람이 우편번호를 적은 숫자를 컴퓨터가 얼마나 잘 인식 하는지에 대한 문제이다. 복잡한 그림의 문제는 CNN의 Convolution filter를 이용해서 Ne...
  • R & Python 문자열 붙이기
      R 하고 Python을 같이 사용하게 되면,  두개의 문법이 매우 헤깔리다.   헤깔린 부분을 해결하려면,  나름대로 기록이 필요하다.   R에서는 paste  또는 paste0로 하지만, Python은  문자열 + 문자열로 한다.  문자열을 그대...
  • R-4.2.0 for Windows downloag 페이지 오류 cran.r-project.org에서 연결을 거부했습니다.
       R Base를 다운로드 하려 하니  아래와 같은 문제가 발생 하였다.   구글링에서 r download 치고 검색하고 들어가면 아래와 같은 메세지가 뜬다.  사이트에 연결할 수 없음 cran.r-project.org 에서 연결을 거부했습니다. 다...
  • R CRAN Mirror site 패키지 선택 하여 설치
      보안이 매우 중요한 회사에서는   웹사이트가 접속이 제한이 된다.   그래서,  R CRAN Mirror  사이트를 선택해서 설치 해야 한다.     앞으로의 보안 정책은  전부다 막고, 일부만 풀어 주는 방식으로 될 것이며,  물론 보안 신청 한...