1일차 수업이 끝났다.
수업은 오후 6시에 끝난다. 하지만 LG HelloVision의 DX Data School은 서초역 부근에서 진행한다. 이는 2호선을 타는 나에게는 지옥철을 탈 수는 없으니 오후 8시 까지는 강의실에서 공부하고 정리하라는 의미로 받아들여졌다. 😂
강사님께서 7월간 배울 것을 알려주셨다.
- 웹 프론트
- 파이썬
- DB
- 시각화 시작하기
- 이때, docker와 git은 계속 사용한다고 하셨다.
웹 프론트는 안해봤는데 잘 할 수 있을까...? 의문이다 😢
HTML?
HTML, CSS, JS 등은 웹 브라우저가 번역해서 실행을 하는 구조이다. 크롬, 엣지, 파이어폭스 뭐라도 있으면 가능하다.
하지만 회사마다 조금 다르게 나올수도 있기는 하다.
IDE(통합 개발 환경)으로는 vscode를 이용한다.
❓
IDE : 프로그래밍 언어로 소스 코드를 작성하고, 번역 및 빌드(실행 할 수 있는 코드를 만드는 작업)등을 편리하게 해주는 SW
다시 HTML을 보자.
HTML은 결국 웹 브라우저에 무엇인가를 출력해서 보여주려고 하는 것이다.
신기한 점은 파일 이름에 관습이 존재한다는 것이다.
예시로 첫 번째 페이지의 이름은 index.html로 한다거나 이런것도 있다.
이때 Naming이 있는데 이는 매우 중요하다.
다른 사람들이 내가 한 Naming을 보고서 이게 어떤 기능을 할 지 알아야 한다.
HTML 구조를 알아보자
<!doctype html>
<!-- 이 문서의 종류를 나타냅니다. 다른거 말고 저것만 쓰면 끝이라 편하네요 -->
<html>
<head>
문서에 대한 정보(브라우저가 보는 것)
</head>
<body>
화면에 보여지는 내용(브라우저에서 보여주는 것)
</body>
</html>정말 간단하게 생겼다!
우선 <> 이게 태그인 것은 알겠다.
근데 / 인게 있고 없는게 있다.
태그는 2개의 구조를 가진다고 한다.
TAG
<></> : 여는것과 닫는것이 따로 있는 것
</>: 안에서 닫는 것
블록 태그 : 내 옆에는 아무도 못와!(영역을 차지함, 줄바꿈)
인라인 태그 : 내 옆에 올 수 있기는 해!
그리고 이 태그 안에는 속성이라는 것이 존재한다.
속성
태그 안에 속성이름="값" 형태로 작성해서 태그의 옵션을 설정하는 것이다.
모든 태그에 사용할 수 있는 속성이 있고, 태그별로 별도로 갖는 속성이 있다.
그러면 공통적으로 갖는 속성에 대해 알아보자.
공통속성
1. ID : 페이지 내에서 구분하기 위한 이름. 중복 불가능
2. Class : 동일한 묶음을 만들기 위한 이름
3. Name : 서버에게 데이터를 전달할 때 사용하기 위한 이름. 서버 관련 속성
4. Data : 태그 안에 데이터를 포함하고자 하는 경우
요새는 프론트나 클라이언트단에서도 처리를 한다고 한다. 이때 일을 하려면 데이터가 필요하기에, 페이지 안에서 어떤 데이터를 보관하고 싶다면 data 속성을 이용하라는 뜻이다.
이제 많이 쓰는 태그를 확인해 보자.
a 태그
경로 설정에 주의를 해야 하는 태그이다.
href 를 속성으로 주로 사용한다.
<a href="https://www.naver.com">네이버</a>이렇게 사용하는 편인데. href에서 값에 사용하는 것은 경로 이다.
이 경로는 상대경로와 절대경로가 존재한다.
상대경로 vs 절대경로
상대경로 : 현재 위치에서의 경로
ex) ./ : 현 디렉토리
../ : 상위 디렉토리 (windows에서는 문제없이 사용 가능)
절대경로 : 변하지 않는 경로
ex) https://www.naver.com : web url
C:\windows~~ : 파일 시스템 경로
img 태그
이미지 태그는 속성에서 src=""를 사용해서 작성합니다.
이때, 절대경로 상대경로 다 가능합니다.
추가로 alt="~~"를 작성해서 이미지가 안보일 때,
대체 텍스트를 작성할 수 있습니다.
<img src="https://velog.velcdn.com/images/mhlee5894/post/8e9079a9-35d1-4438-9ceb-202fe7eeae50/image.jpg" width="250"
height="300" alt="galoo">❓
오늘 수업을 진행하면서 로컬에서 진행 하였을 때의 오류가 있었다.
body의 일부분이다. ul과 ol을 확인하고, 경로를 절대와 상대경로를 사용하였을 때, 어떻게 할 것인지 확인하는 문제였다. 이때, 파일시스템을 절대경로로 표현한 이미지 태그는 나오지 않고 대체 텍스트만 나온 것을 확인 하였다.
❗
왜 그러는지 강사님께 여쭈어 봤다.
이는 나의 파일시스템 경로가 노출되어 외부에서 접근이 가능하기에 보안 문제가 발생할 수 있기에 막은 것이라고 하셨다.
추가로, 이미지 태그에서 주의할 점이 있습니다.
랜더링과 이미지 파일 다운로드의 문제가 존재합니다.
이를 알아보기 이전에 html이 어떤 순서를 거쳐 표시되는지 알아봅시다.
- 이미지 태그는 웹 페이지에서 구조를 먼저 생성합니다.
- 전체 구조를 만든 뒤, 맨 마지막으로 이미지를 생성한 구역에 할당합니다.
그렇기에 이미지 태그를 작성하고, 하단에 무엇인가를 작성하였을 때,
크기 사이즈를 배정하지 않았다면, 초기 구역에는 이미지 사이즈가 없는 것으로 할당되어서 해당 이미지 자체의 크기가 바로 배정됩니다.
이렇게 기존 하단에 배정받고 작성된 데이터들은 이미지의 하단으로 밀리게 되어서 랜더링에서의 문제가 발생합니다.
그렇기에 알아두어야 하는 것은 바로
이미지는 나중에 가져와서 넣어주기에
width와 height를 할당해고, 절대경로를 사용해주자 입니다.
추가로 한 가지의 문제가 더 발생합니다.
만약 2개의 html 파일이 존재하며,
같은 이미지 파일을 쓰는 파일이라고 가정합니다.
이때, 한 파일은 이미지 파일과 같은 디렉토리에 있으며, 다른 파일은 그 디렉토리보다 한 단계 상위 디렉토리에 있다고 가정합시다.
이렇게 된다면, html1와 html2에서 같은 이미지를 다운받아서 쓰는데, 이를 같은 것이라고 인지하지 못하고 2번 반복하게 되는 상황이 발생합니다.
❓ 그게 왜 문제인가요?
단순히 한 번 다운로드를 더 한 것이 문제인가? 라고 하지만, 실제 현업 상황으로 넘어간다고 해봅시다.
100만명이 사용을 했다면 과연 몇 번을 더 한 것일까요? 비용의 증가가 매우 큰 상황이 발생하기에 이를 막아야 한다는 것입니다.
결국 하나의 결론이 더 나옵니다.
html 과 이미지(리소스)는 같은 디렉토리에 넣지 말자 입니다.
그래서 이미지 리소스는 static 이라고 디렉토리를 따로 만들어서 해당 디렉토리에 저장하는 편입니다.
스크립트와 스타일시트
- 태그는 순서대로 읽어서 번역합니다.
- css(스타일)은 코드를 전부 읽은 후, 마지막에 읽어서 반영합니다.
- 스크립트도 순서대로 읽어서 번역한 후 실행합니다.
그렇기에 스타일시트와 스크립트는 따로 파일을 만들어 두거나, 바디 밑부분에 적는것을 추천합니다.
주의할 점은 스크립트는 스크립트 내용안에 있는 것들이 이미 적혀져 있어야 한다는 것이기에 순서를 조심해야 한다는 점입니다.
GIT을 알아보자.
-
git : 분산 버전 관리 시스템 or 명령어
-
git hub : 저장소
-
Repository : 프로젝트 저장소
-
Branch : repository 안에 만들 수 있는 가지들. Merge 가능
참고로 git을 설치하고 git init을 하려고 했을 때 문제가 생길 수 있다.
C:\Users\USER\Desktop\Hello_Vision\HTML>git init
'git'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.
이는 설치가 안된 것 혹은 path 설정이 안된 것이다.
설치는 git --version을 통해 확인해보자.
원하는 디렉토리에서 git init에 성공하였다면 .git 파일이 생겼을 것이다.
이후에는 github에 올려보는 활동을 해보자.
- git add 파일명 : git에 관리하도록 더하는 것.
- git add . : 현 디렉이 있는 것 전부
- commit : 현재 변경 내용을 로컬 git(내 컴퓨터)에 반영
git commit -m "메시지"
->변경 내역 확인 : git log
- 현재 git 디렉토리와 repo 연결
- git remote add 이름 url
- 코드 업로드
- git push 이름 브랜치 이름
- 원격 저장소의 내용을 가져오기
- git clone 저장소url 저장소이름
