WIL 1 - 스파르타 코딩 웹개발 종합반 1주차 (22.10.06)

Pablaw·2022년 10월 6일

CSS html 구글폰트 부트스트랩

WIL

목록 보기

1/12

WIL를 시작하며

스파르타 코딩의 웹개발 종합반 강의를 수강하며 WIL(Week I Learned)을 작성하고자 한다.
강의를 들으며 기록했던 내용들을 바탕으로 배운점 및 느낀점 등을 추가하는 방식으로 작성할 생각이다.

개발 공부를 하다보면 이전에 검색했던 내용을 다시 찾아보게 되는 경우를 많이 경험했다.
학습 내용의 정리와 기록을 하면서 허비되는 시간을 줄일 수 있기를 기대한다.

- HTML 기본 구조

<meta property="og:title" content="Pablaw's 링크 모음" />
<meta property="og:description" content="Pablaw의 기록모음입니다." />
<meta property="og:image" content="img/greenCat.png" />

$<head>의 $<meta property=”og: ${abc}”>를 사용하면 링크 공유 시 표시되는 내용을 설정할 수 있다.

✍️ 배운점
링크 $<head> 태그 내에 meta property를 이용하면 링크 공유 시 표시되는 내용을 설정할 수 있는 것을 배웠다.
내가 만든 페이지를 공유하고 소개할 때 유용하게 사용할 수 있을 것이라 생각한다.

- HTML, CSS 기본 내용

$<div> 구역을 나눈다.

$<p> 문단을 나눈다.

$<ul> <li> 불렛 포인트를 만들어서 목록을 만든다.

$<h1> 문서의 제목을 만든다. 구글검색 엔진 등에서 파악

$<span> 특정 글자를 꾸민다.

$<a> 하이퍼링크로 사용한다.

✍️ 배운점

링크 $<div> 태그는 무색무취의 쓰임새가 다양한 태그 정도라고 알고 있었지만 가장 기본적인 의미인 division의 약자로 의미를 지닌다는 사실을 모르고 있었다.

중국에서는 요즘 중국어로 텍스트 코딩을 하는 경우도 있다고는 하지만 텍스트 코딩에 기본적인 언어는 영어로 작성되었기 때문에 태그가 지니는 의미에 대해서도 생각해보게 되었다.

- CSS 기초

html 태그는 어떤 태그가 어느 태그에 속해 있는가에 따라서 속해진 태그의 스타일을 따라서 적용된다. (그림 출처 - 스파르타코딩클럽)

ex) 위 그림에서 빨간색 div의 위치를 옮기거나 스타일을 변화시키면 초록색 div,
파란색 div 모두 변경된 내용이 적용된다.

✍️ 배운점

태그의 부모, 자식 관계에대해서는 어렴풋이 알고 있었지만 좀 더 체계적으로 활용할 수 있다면 유지, 관리 측면에서도 유리한 코드 작성이 가능할 것이라고 생각한다.

$<div>를 이용해서 기능별, 용도별로 구분지어서 스타일을 적용하고 관리할 수 있기 때문이다.

- 구글폰트 적용방법

구글폰트 링크 - https://fonts.google.com/?subset=korean

링크 import 하기

<head>
	<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
</head>

CSS Style 적용하기

<style>
	* {
			font-family: 'Jua', sans-serif;
}
</style>

{ } 안에 적은 내용은 ‘모든 태그에 적용하겠다’는 의미.

✍️ 배운점

프론트엔드로 진로를 희망하고 있지만 디자인과 관련해서는 특별히 관심을 두지 않는 편이기 때문에 폰트에 관해서도 무심한 편이다.

구글폰트를 사용해서 디자인과 어울리는 폰트를 적절히 활용한다면 좀 더 완성도 있는 페이지 작성이 가능할 것이다.

- 부트스트랩, 예쁜 CSS 모음집

부트스트랩 적용하기


<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

</head>