2023.04.12 TIL(컴퓨터 이해)

ETC🧷

2023.04.12 TIL(컴퓨터 이해)

hae02y 2023. 4. 12. 14:04

👀Today...

일을 하는동안에는 항상 길다고 느껴졌던 9-18시까지의 시간이 정말 빠르게 지나갔다. 이번주 동안에는 기본적인 워밍업느낌의 과정이 짜여져 있는것같아서 힘을 좀 빼고 쉽게 해도 될거라고 생각했는데, 모르는 부분이 너무나도 많았다. 무언가에 대해 어느정도 알고있다는 생각이 어쩌면 가장 위험할수도 있는것 같다. 알고있는 부분에 대해 자만하고 그냥 넘겨버리지 말고 처음부터 다시시작한다는 마음으로 우직하게 앞으로 나아가야 되겠다.

☕오늘의 TIL(Today I Learn)

컴퓨터와 프로그래밍의 이해

# 컴퓨터란?

컴퓨터는 계산한다는 의미의 라틴어 Computare에서 유래되었다.
컴퓨터는 명령없이는 아무것도 할수없다. 여기에 명령을 내려주는게 우리가 할일!
입력받은 데이터를 정해진 규칙대로 처리해서 처리결과를 저장하고 출력하는 전자 장치이다.

# 프로그래밍이란?
프로그래밍이란 프로그램을 만드는 과정으로써, 특정한 목적을 달성하기 위해서 설계된 알고리즘을 프로그래밍 언어를 사용하여 코드를 작성하는 과정을 의미

컴퓨터(1,0) -----기계어 ----- JAVA C언어 등
(저수준)---------------------------------(고수준)

# 컴파일(Compile)?
프로그래밍 언어로 작성된 소스코드를 컴퓨터가 이해 할수있는 기계어 코드로 번역하는 과정이다. 이러한 컴파일은 빌드(build) 과정의 일부이며, 빌드는 작성한 소스코드를 실행할수있는 산출물로 변환시키는 과정이다. 빌드가 완료되어야 소스코드가 실행시킬수있는 하나의 프로그램으로 완성된다.

웹

천천히 정리를 해보려고 했는데 학교에서 배웠던 부분이여서 알고있는 부분은 패스하고 모르는 부분만 정리하자고 생각했다.

1. 클라이언트 - 서버 (2티어 아키텍쳐)
2. 클라이언트 - 서버 - 데이터베이스 (3티어 아키텍쳐)

HTML / CSS

# HTML = HyperText Markup Language
웹페이지를 구성하는 마크업언어 , 웹페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어, 전체적인 구조를 담당

# CSS = Cascading Style Sheets
HTML로 작성된 웹애플리케이션 구조에 디자인을 적용하는데 사용, 웹페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어, 좋은 사용자 경험을 제공하기 위한도구,

# UI - 사용자 인터페이스(User Interface)
웹 애플리케이션이 제공하고자 하는 웹서비스와 사용자를 연결해주는 매개체

# UX - 사용자 경험(User eXperience)
사용자가 서비스를 사용하고 경험하면서 직/간접적으로 느끼는 종합적인 경험

이과정에서 핵심이 되는기술이 바로 CSS 이다.

block - 줄바꿈 ( <div>, <p> 등)
Inline - 줄바꿈x ( <span> 등)
inline-block - Inline과 같이 한줄을 차지하지는 않지만 width, height 사용 가능

ChatGPT를 활용한 학습

# HTML 구현부

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>twittler</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>
  <body>
    <!-- 여기에 HTML 구조를 작성하세요. 아래 코드는 예제이며, 얼마든지 바꿀 수 있습니다 -->
    <header id="greeting">twittler</header>

    <section id="login">
      <label for="usernameInput">ID</label>
      <input type="text" id="usernameInput" placeholder="ID" />

      <label for="messageInput">Message</label>
      <textarea id="messageInput" placeholder="New comment"></textarea>
      <button id="tweetButton">tweet</button>
    </section>
    <!-- Tweet lists -->
    <section id="tweetlist" class="white">
      <button id="randomButton">check new tweet</button>
    </section>

    <script src="script.js"></script>
  </body>
</html>

# CSS 구현부

#greeting {
  font-size: 2em;
  font-family: sans-serif;
  font-weight: bold;
  border: 2px solid #ccc;
  border-radius: 1em;
  color: white;
  background-color: skyblue;
  text-shadow: 0 0 5px #333;
  text-align: center;
  margin: 0.5em;
  padding: 0.5em;
}

#login {
  padding-left: 20px;
  background-color: #2bc5e0;
}

#tweetlist {
  background-color: navy;
  padding-top: 15px;
}

#randomButton {
  padding: 15px 15px;
  margin: 10px 10px;
  background-color: white;
}

label {
  display: block;
  color: white;
}

input {
  display: block;
}

textarea {
  display: block;
  height: auto;
  width: 90%;
  height: 20vh;
  resize: none;
}

button {
  box-shadow: none;
}

#tweetButton {
  background-color: white;
  text-align: center;
  font-size: 15px;
  box-shadow: none;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border: none;
}

#tweetWrapper {
  padding-top: 20px;
  padding-bottom: 10px;
  list-style: none;
  background-color: whitesmoke;
  padding-right: 20px;
}

.tweet__username {
  font-weight: bolder;
  font-size: larger;
}

.tweet__createdAt {
  color: #ccc;
}

.tweet__message {
  padding: 10px;
  border-bottom: 1px solid #000; /* 위쪽에 1픽셀 두께의 검은색 실선 구분선 추가 */
}

# 결과

비슷하게는 만들어진것같다. ChatGPT랑 심심해서 놀아본적은 있어도 업무나 무언가를 해결하기위해서 사용해본건 처음이였는데 와... 이거 생각보다 너무 똑똑하다. 앞으로도 많이도와줘 친구!

👊혼자서 해결하기

오늘은 없음...!

저작자표시 비영리 변경금지

현재글2023.04.12 TIL(컴퓨터 이해)

fee-fi-fo-fum

[2024.08.]블로그 이사중...

도커, 독서, Til, Java, 정보처리기사 실기, oracle, error, PostgreSQL, mapper, mysql 설정, codestates, docker, 회고, 백준, Stream, 다이나믹프로그래밍, pyinstaller 설치, sqld, 코드스테이츠, Spring,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

fee-fi-fo-fum