유데미 취업부트캠프 - 프론트엔드&백엔드 : 3일차 TIL

어느덧 1주차의 마지막 3일차 TIL입니다.

오늘은 여태 배운 HTML과 CSS를 적용하여 웹사이트를 만들고, 호스팅,배포와 git에 대한 학습을 하였습니다.

 

 

 

Text-align

어제 배운 text-align의 적용을 해보았습니다. 자주 사용되는 css인 만큼 꼭 기억해야하는 개념입니다. 

text-align은 텍스트처럼 취급되는 인라인 콘텐츠나 텍스트를 정렬합니다.

 

<h1> 내부의 텍스트= 인라인 요소

ex. header에 text-align을 사용하면 하위 요소들이 인라인 콘텐츠가 되어 중앙에 배치되는것

 

Margin 겹침

 

CSS 작업을 하다보면, box model을 내가 생각했던대로 제어가 안될때가 있다. margin 겹침은 그 중 하나의 경우이다.

<header>요소 안의 <h1>요소에 브라우저가 기본적으로 margin (34px)이 지정되어있기 때문에,

h1의 부모요소인 header에 margin (32px)을 정의해도 margin 겹침 현상때문에, header의 margin이 적용이 안된다.

그럼 어떻게해야 될까?

어제 (2일차) 복습을 해보자면, 

 

1. 부모 요소에 overflow: hidden을 주면 자식 요소가 부모 요소 범위 밖으로 나가지 못하게 됩니다. 부모의 밖으로 나가지 못한 자식요소는 부모 요소 안에서만 있게 됩니다.

2. 부모 요소에 display: inline-block을 지정하여, 인라인과 블럭 두가지 특징을 가지게 되면서 자식 요소의 마진값을 살릴 수 있게 됩니다.

3. 부모요소에 padding 값을 주어서 미리 그만큼의 간격을 띄어 놓는 것입니다. 자식요소의 margin이 닿으면 마진겹침현상이 일어나지 않아 간격이 2배가 되므로 이때는 자식의 위아래 margin 값을 0으로 두어야한다.

 

이러한 방법들이 있다.

 

강의에서는 부모요소에 padding을 넣어 우리가 원하는 여백을 지정하였습니다.

 

<em>, <strong>

HTML에서 텍스트를 강조하는 데 사용되는 인라인 요소입니다.

 

<span class="highlight">don't</span>

 

don't을 강조하기 위해 css로 bold로 강조 할 수 있지만, 이렇게 강조를 할 경우, 스크린리더가 감지할 수 없다. 

이러한 사소한 것들도 항상 염두해두어야 한다는 것 잊지말자.

 

<em>,<strong>은 내용은 동일하지만 , 스크린리더의 억양에 차이가 있다고한다. 

 

<em> (Emphasis):

• <em> 태그는 텍스트를 강조할 때 사용되며, 일반적으로 기울임(italic)체로 표시됩니다.
• 브라우저는 <em> 태그 내부의 텍스트를 강조하여 중요성을 나타냅니다. 시각적 효과는 브라우저 및 스타일에 따라 다를 수 있습니다.
• 예시:

<strong> (Strong Importance):

• <strong> 태그는 텍스트의 강한 중요성을 나타냅니다. 일반적으로 굵은 볼드체로 표시됩니다.
• <strong>은 시각적 표현뿐만 아니라 음성 브라우징 도구나 스크린 리더 등에서도 중요성을 강조하는 데 사용됩니다.

 

배포 / 호스팅

 

 

 

배포:  소프트웨어나 애플리케이션을 실행 가능한 상태로 만들고, 사용자 또는 다른 시스템에서 접근 가능하게 하는 과정을 나타냅니다.

웹사이트 코드를 remote 컴퓨터(서버)로 옮기는 것

 

호스팅: remote(서버)가 특정 주소를 통해 웹사이트에 들어오는 방문자에게 저장된 코드를 제공합니다.

즉 , 웹 사이트, 애플리케이션 또는 서비스를 인터넷을 통해 접근 가능하게 하는 서비스를 제공하는 것을 의미합니다. 

 

상대경로 / 절대경로

상대 경로 (Relative Path):

• 현재 작업 중인 디렉토리나 파일 위치를 기준으로 상대적인 경로를 나타냅니다. (현재 위치에서 얼마나 떨어져 있는지를 표시)
• 주로합니다.
• .  현재 디렉토리 / .. 상위 디렉토리

절대 경로 (Absolute Path):

• 절대 경로는 파일이나 디렉토리의 전체 경로를 나타냅니다.
• 루트 디렉토리부터 출발하여 특정 파일이나 디렉토리에 도달하는 경로입니다.

 

상대 경로는 주로 프로젝트 내에서 파일의 위치를 찾을 때 사용되며, 절대 경로는 파일이나 디렉토리의 정확한 위치를 나타낼 때 사용됩니다. 경로의 선택은 작업 환경 및 파일의 위치에 따라 달라집니다.

배포시, 파일 경로가 잘못되어 파일을 잃어버리지 않기 위해선 , 주의해야한다!

 

 

✓ index.html은 서버가 자동으로 찾기때문에 폴더명만 명시해도 가능하다.

 

 

Git & Github

 

 

github를 사용하면서도, 아직 완전하게 두 차이점을 모르고 있었다. 

 

Git은 분산 버전 관리 시스템으로, 

• 소스 코드 버전을 추적하고 변경 내역을 관리하는 데 사용.
• 개발자들이 로컬 환경에서 작업을 할 수 있고, 필요한 경우 중앙 서버와 동기화할 수 있습니다.

 

Github은 Git을 기반으로 한 웹 기반 호스팅 서비스로,

• 프로젝트를 관리하고 온라인으로 저장소를 호스팅할 수 있으며, 여러 사용자가 협업할 수 있는 플랫폼을 제공합니다.
• 이슈 트래킹, 코드 리뷰, 웹 인터페이스를 통한 코드 브라우징과 같은 기능을 제공하여 팀 작업을 용이하게 합니다.

→ Git은 로컬 환경에서 개발자가 코드를 관리하는 데 사용되며, GitHub은 팀이 협업하고 코드를 공유하며 관리하는 데 사용됩니다.

 

CLI 명령어

• pwd (print working directory) : 현재 위치 표시
• ls (list Items) : 사용자 폴더에 있는 파일을 보여줘
• cd m : m으로 시작하는 폴더
• mkdir: 새로운 디렉토리 생성
• rmdir: 디렉토리 삭제
• touch: 파일 추가
• rm 파일명: 파일삭제

Git 명령어

git status: 현재 깃 프로젝트 정보 확인

git add : Git에서 작업 디렉토리의 변경 내용을 스테이징 영역에 추가

git log : branch안에 모든 커밋들의 개요 확인

 

working directory: 현재 프로젝트 폴더 (현재 작업중인 폴더와 파일)

Repository: 여러 다른 코드의 스냅샷을 저장하고, 변경 사항을 추적한다.

레포지토리는 숨김파일이라 보이지 않지만 이 안에는 모든 추적된 파일과 폴더들이 들어있다. 이들은 git의 관리를 받는다.

 

git은 오직 파일의 1번째 버전만 저장하고, 변경사항을 추적한다! 

변경사항을 최신 코드 스냅샷에서 작업시에 반영한다.

 

commit: git이 추적된 파일과 폴더를 관리하는법으로,  code snapshot

branch: commit이 저장된 곳 (주로 main, master)

 

→ 배포된 웹사이트의 최신 상태정보는 보통 main/master 브랜치 안에 있는 최신 커밋/스냅샷으로 생각할 수 있다.

---

 

CSS 박스모델, Git 사용법에 대한 복습을 마쳤다.

아직 commit, push 같은 단순 git 활용만 해보았는데,

앞으로 프로젝트를 진행하기 전에 병합 충돌과 같은 문제점이 발생하지 않도록,

미리 git에 대한 학습을 확실히 해둬야할 것 같다.