오늘도 데이터

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 언어 치다가 잘 모를 때, 사용 할 수 있어 좋을 것 같아서 기록 한다.

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

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

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

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

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

RST 6상 그래프 R plot 그리기

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

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

오늘도 데이터

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

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

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

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

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

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

RST 6상 그래프 R plot 그리기

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

전체 페이지뷰