1일차 - OT

주현호·2021년 10월 31일

0. 시작하며

대학 졸업 이후 혼자 데이터 분석 공부를 해왔는데 의지도, 열정도 많이 떨어져가며 스스로에게 많은 실망이 들었었다. 멋쟁이사자처럼 프론트엔드 스쿨에 지원한건 반쯤 충동적인 결정이었다. 그동안 비전공자로 혼자 공부해오며 같이 해나갈 동료들이 있었으면 하는 마음이 있던게 가장 큰 이유였던 것 같다. 데이터 분석이 아닌 프론트엔드 분야를 선택한 데에는 새출발을 하고 싶기도 했고, 어떤 교육기관인지가 더 중요하다는 생각이 들었었기 때문이다. 나는 심리학과 졸업 이후 뭘 해먹고 살아야하지 의문이 들었을 때 미래에도 써먹을 수 있는 발전 가능성이 큰 기술을 배워야겠다는 생각이 들어 개발자가 되기로 마음먹었었다. 심리학과는 전공을 살리기 위해서는 대학원 졸업이 반쯤 필수적인데 그건 스스로에게 너무 큰 부담이었다. 하지만 나는 여전히 심리학과 관련된 쪽에서 일을 하고싶었고, 개발자로도 충분히 가능하다는걸 깨달았다. 심리학과 출신이기에 다른 개발자보다 문제를 더 잘 이해하고 소통할 수 있을 것이라는 자신이 있었기에 개발 공부를 하기로 마음먹은 것이다. 학부생때 통계를 배웠기에 접근이 편한 데이터 분석으로 먼저 시작했던 것이지, 프론트엔드라는 새로운 분야에도 거부감보다는 큰 흥미를 느꼈다. 멋쟁이 사자처럼이라는 좋은 기회가 다가왔으니 열심히 해보고자 한다.

첫 날 이두희님께서 오셔서 강의를 들고 Q&A시간을 가졌는데 공부방향에 있어서 큰 도움을 얻울 수 있었다. 가장 기억에 남는건 괜히 이것저것 조금씩 하기보다는 하나의 분야를 마스터하는게 최우선이라는 말이었다. 하나의 분야를 마스터하면 바라보는 눈이 트여서 인접분야로 자연스럽게 넘어갈 수 있다는 것이다. 나도 프론트엔드 스쿨에 들어온 이상 프론트엔드를 끝까지 마스터해보고 싶다. 이후에 또 기회가 있다면 데이터 분석으로 넘어갈 수도 있고 미래는 모르는 일이지만 일단은 지금 배우는 것에 집중해볼 생각이다. 그리고 이전부터 개발블로그를 만들어서 운영해야지 마음만 먹고 하지 않았었는데 동료분들 덕에 이렇게 실천으로 옮길 수 있었다. 앞으로 매일 배우고 느낀 것들, 어떻게 개선해나갈지 등 회고록을 꾸준히 작성해나갈 예정이다.

1. 일단 만드는 HTML/CSS

코드라이언 강의를 통해 html, css의 기본적인 문법을 배우고 직접 이력서를 만들어보았다. html, css는 간단하면서도 강력한 시각화 도구이다. 웹페이지이기에 접근성도 뛰어나며 자바스크립트나 파이썬, 루비 등 다른 언어들과도 잘 호환된다는 장점이 있다. 프론트엔드를 배워둔다면 이후에 어떤 언어를 배우더라도 깔끔하고 이쁜 결과물을 만들어낼 수 있을 것이다. 다른 언어들과 다르게 문서를 만든다는 생각으로 접근하면 좋다.

1.1 기본 형태

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

위 코드가 html의 기본적인 뼈대라고 할 수 있다. head와 body에 각각 쓰이는 태그가 다르다.
<!DOCTYPE html>, <html> ~ </html>
이것은 html문서임을 알리는 태그로 맨 위에 작성되며, 최신 브라우저에서는 없어도 동작하나 약속처럼 쓰인다.

<head> ~ </head>
문서에 대한 부가정보를 담은 부분

<body> ~ </body>
문서에 보여지는 모든 내용(컨텐츠)가 담긴 부분

1.2 head

<head>
	<meta charset="UTF-8">
        <title>이력서</title>
        <link rel="stylesheet" href="codelion.css">
</head>

<meta charset=문자열>
html 문서의 문자 인코딩 방식을 명시함. 유니코드를 위한 문자셋인 UTF-8이 가장 많이 사용됨.

<title>내용</title>
웹 페이지의 제목을 나타내는 태그, 브라우저의 탭 등에서 보여지는 부분

<link rel=속성값>
현재 문서와 외부 리소스 사이의 연관관계를 명시함.
rel: link 태그의 필수 속성, 위의 코드에서는 stylesheet로 사용함을 의미
href: 링크될 외부 리소스의 URL

1.3 body

<body>
	<div class="mainbox">
		<h1>김멋사</h1>
		<p>HTML/CSS개발자</p>
  	</div>
	<a href="http://facebook.com"><img src="images/facebook.png"></a>
	<footer>copyright codelion</footer>
</body>

<h1~6>내용</h1~6>
제목을 정의하는 태그. h1이 가장 크고 h6이 가장 작은 제목

<p>내용</p>
문단을 정의하는 기본 태그

<footer>내용</footer>
문서 아래에 쓰여지는 저작권 등을 나타내는 태그

<img src="URL">
이미지를 정의할 때 사용하는 태그, html 문서에 이미지가 링크되는 형태

<a href=URL> </a>
하이퍼링크를 정의할 떄 사용하는 태그, 태그 사이에 들어간 것을 누르면 지정한 페이지로 이동

<div> ~ </div>
사이에 있는 여러 태그들을 하나로 묶어서 css나 자바스크립트 등에서 작업 수행
div는 활용도가 매우 높고 중첩되어있는 경우가 많음므로 난잡해보일 수 있음
구분을 위해 같은 의미인 section, article 등의 태그를 섞어 사용하는 편
위의 코드에서는 mainbox라는 클래스를 지정해 하위 태그들을 css로 한번에 꾸밈

1.4 CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');

* {
    font-family: 'Montserrat';
}

footer {
	text-align: center;
	color: white;
   	font-size: 30px;
   	font-weight: bold;
   	font-style: italic;
   	background-color: black;
}

@import url('~')
불러오기, html link 태그와 비슷한 역할, 맨 위에 위치

font-family
글꼴 설정

text-align: left, right, center, justify
속성값에 따라 수평정렬

color
글자 색상
html color code 검색. css색지정에 쓰이는 값 파악(#~).

background-color
배경 색상

font-size, weight, style
글자 크기, 굵기, 스타일

line-height
줄간 간격

float

추가정리예정(부모자식태그 인식, overflow: hidden 등)

.mainbox {
	border: 5px solid black;
   	width: 610px;
   	height: 100px;
   	padding: 20px;
   	margin: 20px;
   	margin-left: auto;
	margin-right: auto;	
   	box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
}

.클래스이름으로 꾸미면 해당 클래스가 오는 모든 것에 적용
박스 쪼개기: margin - border - padding - content
vue image

border: 두께 스타일 색상
테두리 만들기. border-bottom같은 형태면 아래만 테두리 생성

width, height
테두리의 폭, 높이

padding, margin
패딩, 마진의 크기

margin-left: auto; margin-right: auto;
가운데 정렬

box-shadow: x축(뻗어나가는 방향), y축, 블럭값, 퍼지는 정도, 그림자의 색(r,g,b,투명도(%))
박스의 그림자 설정

2. 회고

html, css로 무언가를 처음 만들어봤다. 형식이 직관적인 편이라 이해는 잘 됐는데 아직 손에 익진 않았다. 코딩을 직접 많이 해보면서 손에 익혀야 할 것 같다. 특히 div와 class 부분은 앞으로 몇개정도 더 만들어봐야겠다. 여러 설정값들도 조금씩 수정해가며 확인해 볼 필요가 있다. velog 첫 글인데 마크다운 문법같은 부분에서 아직 어려움이 많아 작성하는데 힘들었다. 매 수업 이후 꾸준히 쓰면서 금방 익숙해지길 바란다. 취미로 영상편집을 했었는데 css로 문서를 꾸미는 과정이 비슷하다고 느껴져 재미있었다.