가짜연구소 블로그 제작기 & HTML

Jul 30, 2021

가짜연구소블로그
HTML
CSS

[Guide] 직접 해보면서 배운 HTML 사용법

나는 가짜연구소에서 1-2기 파이토치 튜토리얼 제작팀으로 활동했다. 튜토리얼이라는 결과물을 같이 만들어가는 과정에서 많은 것을 배울 수 있었고 뿌듯함&성취감을 느낄 수 있었다. 그리고 가짜연구소에서 열리는 전체 행사나 가짜반상회를 통해 다른 스터디의 사람들도 만났다. 좋은 분, 열정적인 분을 만나면서 자극을 받을 수 있었고 가짜연구소의 작은 인연들이 매우 소중해졌다. 튜토리얼팀에서도 작은 인연이 또 다른 시작을 만들고 나를 성장시켰기에 이러한 인연을 자꾸 만들어가고 싶었다. 그래서 3기에는 커뮤니티 빌더로 활동하며 커뮤니티 활성화, 자료 아카이빙을 함께 해보기로 한다.

여기서 내가 도전한 미션은 가짜연구소 블로그 제작이다. 현재 가짜연구소는 홈페이지(노션), 페이스북, 링크드인 등 다양한 플랫폼을 사용하여 아카이빙하고 있다. 이번에는 좀 더 친숙하고 라이트한 블로그를 만들어 인터뷰, 머신러닝 기술을 아카이빙하는 것이 목표이다.

내가 선택한 블로그는 Github 블로그이다. 이미 가짜연구소 깃허브는 많은 사람들이 사용중이라 작성 및 접근이 쉬울 것이라 생각했기 때문이다. ~~다들 많이 써주시겠죠…?~~ 이미 내 블로그를 만들었던 경험이 있고 게시물로 정리를 해두었기에 jekyll 테마를 적용하는데까진 쉽게 할 수 있었다. 하지만 그 이후가 문제였다.ㅠㅠ 최대한 원하는 템플릿의 테마를 골랐지만 가짜연구소 특성에 맞춰서 바꿔야할 부분도 있었다. 바꾸려면 html, css를 수정해서 고쳐야 하는데 나는 이러한 언어를 알지 못했다. 그래서 일단은 내 미션이니까 바꾸고 싶은 작은 부분부터 하나씩 찾아보기로 했다. 그리고 내 블로그 만드는 글과 마찬가지로 나중에 똑같은 과정을 반복할 나에게, 나와 같은 고민을 하는 사람들에게 가이드처럼 이 글을 기록해두려고 한다.

1. HTML과 CSS의 관계

HTML은 Hyper Text Markup Language의 약자로 페이지의 제목, 문단, 표, 이미지 등을 정의하고 그 구조와 의미를 부여하는 정적 언어이다. 즉, 웹의 구조를 담당하는 언어이다. 반면, CSS는 Cascading Style Sheets의 약자로 HTML 문서의 스타일(색상, 크기, 폰트, 레이아웃 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어이다. 즉, 웹의 시각적인 표현을 담당하는 언어이다.

2. Bootstrap의 공백 클래스

HTML의 각 엘리먼트들은 박스 형태를 가지고 있다.(=Box model) 각각의 Content가 있고 그것을 둘러싼 Border가 존재하는데, Border안에 주는 공백을 Padding, Border밖에 주는 공백을 Margin이라고 부른다.

이러한 Padding과 Margin을 주는 방법은 다음과 같다. (html 코드는 W3Schools에서 바로 실행해볼 수 있다.)

구분	의미	방향	의미	색	의미	수치	의미
P	Padding	t	위	primary	파란색	0	0
M	Margin	b	아래	secondary	회색	1	0.25rem(글자 크기 16px일 때, 4px)
text-색	글자색	l	좌	success	초록색	2	0.5rem(글자 크기 16px일 때, 8px)
bg-색	배경색	r	우	danger	빨간색	3	1rem(글자 크기 16px일 때, 16px)
		x	좌 + 우	warning	노란색	4	1.5rem(글자 크기 16px일 때, 24px)
		y	위 + 아래	light	흰색	5	3rem(글자 크기 16px일 때, 48px)
		공백	위 + 아래 + 좌 + 우	white	흰색	auto	margin의 자동으로 세팅
				dark	검정색

<div class="text-white bg-dark">text-white bg-dark</div>
<div class="m-1 bg-warning">m-1 bg-warning</div>
<div class="mt-5 ml-3 bg-success">mt-5 ml-3 bg-success</div>
<div class="mx-3 text-danger bg-primary">mx-3 text-danger bg-primary</div>
<div class="p-3 text-white bg-danger">p-3 text-white bg-danger</div>
<div class="pb-5 pr-2 text-white bg-dark">pb-5 pr-2 text-white bg-dark</div>
<div class="py-3 bg-secondary">py-3 bg-secondary</div>
<div class="ml-2 my-3 px-5 text-danger bg-warning">ml-2 my-3 px-5 text-danger bg-warning</div>

3. 블록레벨요소와 인라인레벨요소

블록레벨요소는 혼자 한 줄을 차지하는 요소라 왼쪽, 오른쪽에 다른 요소가 올 수 없다. 반면, 인라인레벨요소는 줄을 차지 않는 요소라 한 줄에 여러 개의 요소를 표시할 수있다.

블록레벨요소 : <P>,<H1>~<H6>,<ul>,<ol>,<div>,<blockquote>,<form>,<hr>,<table>,<fieldset>,<address>
인라인레벨요소 : <img>,<object>,<br>,<sub>,<sup>,<span>,<input>,<textarea>,<label>,<button>

하지만 블록레벨요소를 인라인레벨요소처럼 바꿀 수 있다. 즉, <H1> 옆에 <span> 을 넣게 할 수 있다. 방법은 아래 코드이다.

<H1>블록레벨요소</H1>
<span class="ml-3">인라인레벨요소</span>

<H1 style="display:inline">블록레벨요소</H1>
<span class="ml-3">인라인레벨요소</span>

4. 태그

태그는 HTML 문서를 구성하는 구조와 형태를 표현하는 문법적인 요소이다.

<div> </div> : 영역을 바꿈
<p> </p> : 문단을 바꿈
<br /> : 줄을 바꿈
<span> </span> : 적용 범위를 바꿈

1번 영역<div>2번 영역</div>

<p>1번 문단</p><p>2번 문단</p>

1번 문장<br />2번 문장

1번 범위<span>2번 범위</span>

추가로 <a>태그는 하이퍼링크를 걸어주는 태그이다. 직접 절대주소를 명시할 수도 있고, #은 페이지 최상단으로 이동할 수도 있다.

<a href="https://www.linkedin.com/in/mmminji/">강민지 링크드인 프로필</a>
<a href="#">클릭</a>

Minji Kang