Lina's Toolbox

[스파르타 내일배움캠프_AI 웹개발 과정] 1일차 복습/ frontend 본문

스파르타 내일 배움 캠프 AI 웹개발 과정/front-end

[스파르타 내일배움캠프_AI 웹개발 과정] 1일차 복습/ frontend

Woolina 2024. 6. 25. 22:06

스파르타 코딩클럽 AI 웹개발 과정 2일차.

9-6이면 좋을 텐데 9-9이라 정말 빡센 것 같다.

이사 날짜랑 겹쳐서 은행이랑 부동산을 가야하는 상황이다 보니 ㅠㅠ 

 

커리큘럼 첫 과정으로는 각자 [GPT]웹개발 종합반을 수강하는 것이다.

coursera로 공부를 하다가, 나를 채찍질해 줄 무언가가 필요해서 수강신청했던 나는, 당연히 live 강의를 기대하고 와서 처음에 당황;

하지만 하다보니 실시간 랭킹으로 내가 프로세스 몇위인지 확인 가능해서 승부욕이 생겨서 강의를 게을리 듣지 않게된다.

실시간 강의는 화장실 다녀오거나, 잠깐 다른거 확인하다가 수업 내용을 놓쳐도 뒤로 감기가 안되고

나한테 쉬운 내용은 배속으로 들을 수 있어서 사실 이런 방식이 나에게는 제일 잘 맞는 것 같다.

 

개발 경력은 그래도 몇년 차 이기 때문에 첫 내용은 당연히 쉬울 거라고 생각

역시나 html css 와 기본 프로그래밍 문법들.. 너무 쉬운 내용이기는 하지만

html css는 거의 혼자 독학을 했었고, 한동안 코딩을 쉬어서 리뷰겸 + 전체 내용의 5프로 정도는 새로 배우는 내용이 그래도 있어서 들을 만 하다.

강사님이 처음 하는 사람 눈높이에 맞게 잘 설명하시는 듯

근데 사실 내가 이미 내용을 알아서 그러는 건지 아닌 지는 모르겠음

 

자주 까먹어서 매번 구글링하는.. 블로그에 정리해두고 싶은 유용한 내용과, 내가 몰랐던 새로운 부분을 정리한다.

 

Visual Studio Code 단축키

파일 탐색창 열기 : ctrl + B
html 태그 자동완성: ! 작성 후 + 탭 (익스텐션 필요)
자동정렬 : cmd + a 로 전체선택 후 cmd + K + F (차례대로 눌러야함)
코드 이동: alt + 위 or 아래 (옮기고 싶은 방향으로 이동)
명령 팔레트 실행: cmd + shift + p

 

 

강사님이 윈도우 기준으로 설명해주셔서 나는 따로 찾아야했다.. 은근히 잘 안나와서 찾을 때마다 시간낭비하는 정보들

Flex(css 속성)

display:flex;

display: flex;

 

html은 보통 위에서 아래로 브라우저에 정렬되는데, flex 는 html 요소들이 가로로 정렬되게 만들어줌

 

플렉스 적용 후 브라우저에서 연 후에 관리자 도구에서 플렉스 부분을 보면 flex말고 다른 걸로 지정할 수 있는 버튼이 나옴

 

justify-content: 활용하면 주축 방향(화살표 머리)으로 배치할 수 있다.

justfy-ccontent: center;

를 하면 주축이 가로니까 가로로 배치된다.

 

.container {
    background-color: rgb(216, 216, 219);
    margin: 10px;
    padding: 7px;
    height: 50vh;

    display: flex;
    justify-content: center;

  }

 

align-item

교차축(주축의 90도)로 정렬됨

.container {
    background-color: rgb(216, 216, 219);
    margin: 10px;
    padding: 7px;
    height: 50vh;

    display: flex;
    justify-content: center;
    align-items: center;

  }

 

 

따라서 display: flex, justify-content: center; align-items: center; 로 콘텐츠 화면 정가운데에 배치 가능

 

Navbar

<body> 안에서 nav.navbar 입력하면 navbar가 클래스인 태그가 자동완성됨

<body>
	<nav class="navbar">
	  <img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg" alt=""/>
	  <p>날씨 맑음, 20ºC</p>
	</nav>
</body>

 

Padding, Margin

padding: 요소 사이의 공간(테두리까지의 공간)
margin: 요소 밖의 공간(테두리 사이의 공간)

 

 

할 때마다 헷갈려서 찾아보는 패딩과 마진 오랜만 ㅋㅋㅋ

 

vh

viewpoint height  화면에서 몇 퍼센트를 차지하는 지를 의미. 

웹 브라우저의 높잇값을 기준으로 영역의 크기가 정해짐

 

.{
	height: 100vh;
}

 

flex-direction

컨테이너 내부의 아이템들이 만들어지는 방향

. {

	flex-direction: column;

}

하면 아이템 추가 시 위에서 아래로 붙음.

 

커서 이동 시에도 화면에 한 위치에 고정시키기

.{
	position: fixed;
}

 

여기서

left:0 (왼쪽으로 0만큼 떨어짐=왼쪽으로 붙음)

bottom: 0

width:100%

padding: 20px 0; (위 아래 여백은 20, 좌우는 0이라는 뜻)

정도 조절 해주면 예쁘게 왼쪽 아래에 고정됨

 

폰트 적용

구글 폰트 사이트 https://fonts.google.com/?subset=korean&noto.script=Kore

 

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

원하는 폰트 선택 후

get font > get embed code> @import

선택 후

스타일 태그 안에 @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap'); 작성

CSS class 탭의 코드는 복사한 후 전체적용*{}을 css에 넣으면 된다

<style>
	@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
    
    * {
	font-family: "Gowun Dodum", sans-serif;
	}
</style>

 

CSS 파일 분리하기

<style></style> 부분을 파일로 분리한 후

<head>
	<link rel="stylesheet" href="경로.css" type="text/css">
</head>

 

부트스트랩

부트스트랩 연동하는 법

CSS CDN

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

JS CDN

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

둘다 각각 복붙해준다

 

부트스트랩에서 자주 참고할만한 항목들

 ✅ Components(구성 요소)
Cards(카드): 정보를 시각적으로 나타내는 데 사용되는 카드 형식
Navbar(네비게이션 바): 웹 페이지 상단에 위치하여 사이트의 탐색을 제공하는 데 사용됩니다.

 ✅ Utilities(유틸리티)
Flex justify-content: 요소들을 주축 방향으로 정렬
align-items: 요소들을 교차축 방향으로 정렬
Spacing(간격): 요소들 사이의 간격을 조절하는 데 사용
Text(텍스트): 텍스트 스타일을 조절하는 데 사용
Position(위치): 요소의 위치를 조절하는 데 사용

✅ Forms(양식)
Input group(입력 그룹): 사용자가 값을 입력하는 공간 

 

맥에서 VS 다중 커서로 선택하는 법

option키를 누면서 추가하고 싶은 부분을 클릭하면 커서가 추가됨

 

여러 지점 선택하는 법 드디어 알게 됐다..! 이것도 윈도우 기준으로 설명해주셔서 따로 찾음 ㅠ

mx-auto(css 속성)

가로 정렬해줌

mx에서 x가 x축할 때 x임

 

리스트와 딕셔너리 쉽게 구분법

[]  ->  리스트

{}  ->  딕셔너리 

jQuery

한 마디로 

간편한 자바스크립트 코드

자바스크립트를 짧고 간편하게 쓸 수 있게 해주는 라이브러리다.

 

결국 자바스크립트로 이루어져있으므로 그냥 js처럼 <script>에 넣어주면됨.

cdn은 <head>에 넣어주기

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>

 

 

flex 같은 건 꽤 중요해 보이는데 몰랐다..!

내가 프론트 엔드를 왜 안좋아했는 지 알겠음

저리 쉬운 방법이!?

'스파르타 내일 배움 캠프 AI 웹개발 과정 > front-end' 카테고리의 다른 글

[스파르타 내일배움캠프_AI 웹개발 과정] 2일차 복습/ fetch  (0) 2024.06.25
'스파르타 내일 배움 캠프 AI 웹개발 과정/front-end' Related Articles more