AI 전문가가 되고싶은 사람
[KT 에이블스쿨 기자단] 12주차 회고 본문
이번 12주차에는 웹 프로그래밍에 대한 개념과 프론트엔드에 대해서 배우게 되었다. 개발자라는 직업을 딱 들었을 때 드는 생각이 프론트엔드 or 백엔드 였기에 기초라도 잘 배워보자하는 생각을 가지고 수업을 듣게 되었다. 막연하게 생각해봤을 때 프론트엔드는 웹 디자인을 하는거 아닌가 생각을 하였다. 실제로 프론트엔드는 사용자가 웹사이트나 앱과 상호작용하는 부분을 담당하고 이는 웹사이트의 시각적인 부분과 사용자가 직접 보는 부분을 의미한다고한다.
* 12주차 웹 프로그래밍 수업
* JavaScript : 사용자와의 상호작용을 구현하는 데 사용
Python과 JavaScript의 차이점
● Python : 데이터 분석, 인공지능, 머신러닝 등 다양한 분야에서 사용되며, 간결하고 가독성이 좋으며 배우기 쉬워 편리한 언어로 평가받음
● JavaScript : 주로 웹 개발에서 사용되며, 클라이언트 측 웹 개발 언어로서 HTML과 함께 사용되며 동적인 웹 페이지를 만들기 위해 사용됨
1. 문법 (for문, while문)
● Python
- 문법이 간결하고 가독성이 좋다.
- 들여쓰기를 사용하여 블록을 구분한다.
● JavaScript
- 문법이 다소 복잡하고, 세미콜론(;)으로 문장을 구분한다.
- 중괄호({})를 사용하여 블록을 구분한다.
python : for
# 리스트를 순회하면서 출력하기
names = ["KT", "Aivle", "school"]
for name in names:
print(name)
# 숫자 범위를 순회하면서 출력하기
for i in range(5):
print(i)
# 인덱스와 함께 순회하기
for index, name in enumerate(names):
print(index, name)
python : while
# 조건이 참인 동안 반복하기
i = 0
while i < 5:
print(i)
i += 1
JavaScript : for
// 배열을 순회하면서 출력하기
var names = ["KT", "Aivle", "school"];
for (var i = 0; i < names.length; i++) {
console.log(names[i]);
}
// 숫자 범위를 순회하면서 출력하기
for (var i = 0; i < 5; i++) {
console.log(i);
}
JavaScript : while
// 조건이 참인 동안 반복하기
var i = 0;
while (i < 5) {
console.log(i);
i++;
}
2. 함수
● Python
- 함수 정의 시 def 키워드를 사용한다
● JavaScript
- 함수 정의 시 function 키워드를 사용한다.
HTML
● 웹 페이지를 만드는 데 사용되는 마크업 언어이다.
● 웹 페이지의 구조를 정의하고 콘텐츠를 표시하는 데 사용된다.
● 각 요소는 태그(tag)라고 불리는 특별한 표시로 작성되고, 어떻게 표시해야 하는지를 알려준다.
간단한 예시를 보면서 복습해보자!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>Home</h2>
<p>This is the home page of my website.</p>
</section>
<section id="about">
<h2>About</h2>
<p>This is the about page of my website.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>This is the contact page of my website.</p>
</section>
</body>
</html>
● <!DOCTYPE html> : HTML 문서의 유형 정의
● <html lang='en'> : HTML 문서의 기본 언어 설정
● <head> : 웹 페이지에 대한 메타 정보 포함 ( 스타일 시트 링크, 자바스크립트 파일 링크, 페이지 제목 등 )
● <meta charset="UTF-8"> : 문서의 문자 인코딩 설정
● <meta name="viewport" content = "width=device-width, initial-scale=1.0"> : 모바일 장치에서 화면의 너비를 장치의 너비와 일치시키고, 초기 배율을 1로 설정
● <title>My First Web Page</title> : 웹 페이지의 제목 설정
● <body> : 실제 콘텐츠를 포함하는 부분
● <header> : 문서나 섹션의 헤더를 정의 ( 보통 웹 페이지의 제목이나 로고, 네비게이션 메뉴 등 포함
● <nav> : 문서의 네비게이션 링크 정의
● <ul> : 순서가 없는 리스트 정의 ( 보통 <li> 요소와 함께 사용되어 메뉴나 목록 만듦 )
● <li> : 리스트의 각 항목 정의 ( 보통 <ul> 또는 <ol> 요소 안에 사용 )
● <a> : 하이퍼링크를 정의 ( 사용자가 클릭하면 지정된 URL로 이동)
● <section> : HTML 문서의 독립적인 섹션을 정의 ( 주로 콘텐츠를 그룹화하기 위해 사용 )
● <h2> : 두 번째 수준의 제목을 정의 ( 보통 섹션의 제목이나 소제목으로 사용 )
● <p> : 단락 정의 ( 텍스트나 문단을 포함하는 데 사용 )
CSS
● HTML로 작성된 문서의 스타일을 꾸밀 때 사용되는 스타일 시트 언어
● HTML은 웹 페이지의 구조를 정의하는 데 사용되고, CSS는 해당 구조를 스타일링하여 멋지게 만들어줌
● 선택자(selector), 속성(property), 값(value)으로 이루어져 있다.
간단 예시!
/* 선택자 { 속성: 값; } */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
text-align: center;
}
● 글꼴과 텍스트 스타일
■ font-family : 글꼴을 지정
■ font-size : 글꼴 크기 지정
■ font-weight : 글꼴 두께 지정
■ color : 텍스트 색상 지정
■ text-align : 텍스트 정렬 지정
■ text-decoration : 텍스트에 선이나 줄 추가
● 배경과 박스 모델
■ background-color : 배경 색상 지정
■ background-image : 배경 이미지 지정
■ width : 요소의 너비 지정
■ height : 요소의 높이 지정
■ margin : 요소의 외부 여백 지정
■ padding : 요소의 내부 여백 지정
■ border : 요소의 테두리 지정
● 레이아웃
■ display : 요소의 표시 방법 지정
■ float : 요소를 좌우로 띄움
■ position : 요소의 위치 지정
■ top, bottom, left, right : 위치 지정 요소의 위치를 상대적으로 이동
위 요소들을 사용하여 작성한 예시!
/* 배경과 박스 모델 */
.container {
width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ccc;
}
/* 레이아웃 */
.float-left {
float: left;
width: 50%;
}
.float-right {
float: right;
width: 50%;
}
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
이게 뭐지 싶으면서도 어... 하면서 따라했던 것 같다. 아무래도 복습하면서 자주 접해서 익숙하게 만드는게 좋을 것 같다. 최근 AI 관련 취업한 사람들의 후기를 보면 개발자 + AI라서 웹 개발 자체를 아예 못할 경우 배제되는 경우가 많은 것 같다. 부족한 부분들을 KT AIVLE 기간동안 보완할 수 있는 것 같아서 성취감을 느끼고있다. 코딩 마스터스 2차가 시작되었는데 첫날부터 60문제를 푸신 분이 계셔서 이게 맞나 나는 뭐지 싶은 생각이 들었다... 해보고 안되면 말지라는 생각으로 이번에도 70문제를 목표로 풀어봐야겠다. 그리고 이번주에는 정보처리기사 필기 시험에 73점으로 통과하게 되었다 하하... 현재 SQLD,ADsP,빅분기 자격증이 있는데 있는데 정보처리기사도 추가하고 AICE도 추가해서 9월 전에 5개를 만들어놓는 것이 목표이다.
* 공모전 끝!!
공모전 제출을 완료했고, 이제 심사를 기다리면 된다. 아래와 같이 웹 페이지를 통해 단속카메라 위치와 주차장 정보를 표시하고 주차장에 현재 몇 대가 주차되어있는지를 머신러닝 모델을 통해서 예측하여 제공하는 프로젝트를 하였다. 이번에 웹 개발을 들으면서 백엔드를 맡으신 분과 프론트엔드를 맡으신 분들의 노고를 더 잘 알게된 것 같다.. 추후에 있을 빅프로젝트에서는 나도 이런걸 해야할텐데 싶어서 더더욱 공부를 해야겠다는 생각이 드는 것 같다.
주차장 마크를 클릭했을 때 나오는 화면
추가적인 목표
- 해이해지고 있다... 수업 잘 듣고 복습을 잘해보자
- 책을 요즘 다시 안 읽고 있는데 읽자
- 운동 시작했다 살 좀 빼보자 인생 최대 몸무게다
KT AIVLE과 함께 더 성장해보겠다. 수료 후에 이런 글들을 보며 자랑스러워하고 싶기에...
'기자단 활동' 카테고리의 다른 글
| [KT 에이블스쿨 기자단] SQL 복습2 (0) | 2024.05.18 |
|---|---|
| [KT 에이블스쿨 기자단] SQL 복습 (0) | 2024.05.16 |
| [KT 에이블스쿨 기자단] 11주차 회고 (0) | 2024.05.14 |
| [KT 에이블스쿨 기자단] 10주차 회고 (0) | 2024.04.29 |
| [KT 에이블스쿨 기자단] 9주차 회고 (0) | 2024.04.29 |
