프론트엔드 개발
열심히 공부해 보자.
독학과 함께 스파르타 코딩클럽의 웹종합반 수업을 결재 했다. 인강으로서 내가 필요할때 찾아 들을 수 있을거라는 생각이 들었고, 유튜브 등에서 찾아보며 공부하는 이론적이고 세세한 부분들과 함께 맞춰가며 보기 적당할 것이라 생각했기 때문이다. 물론, 어느정도 독학에 비해 가지는 금액적, 느낌적인 강제성 또한 메리트가 될 수 있을거라는 생각이 들었다. 자신에 대한 약간의 불신은 도움이 될때가 제법 있다.
나는 유튜브로 기본적인 개념을 약 4~5일 정도 미리 비교적 자세히 공부해보고 강의를 들었고, 아직도 궁금한 부분이나 보다 자세한 설명이 필요하다 느낄땐 유튜브나 MDN사이트를 사용했다. 즉, 오늘 정리하는 내용은 스파르타 코딩클럽 + 독학내용으로 이루어져있다.
아니, 강의에서의 설명이 부족했나요?
그렇다기보단 외워가는 부분들이나, 나중에 찾아써도 괜찮으니 개념과 구조만 파악하라는 부분 중에서도 궁금해진다면 확 꽂히는 내 공부타입에서 기인된 현상이다. 강의는 세세한 개념들을 일일이 짜내지 않고 초보들에게도 쉽게, 그리고 축축처지지 않게 정보의 전체적인 틀을 알려주는데에 강점을 가지고 있다. 라고 느꼈다. 문법이나 함수를 정리해가며 배운다면 분명 도움이 될 것이다.
자, 이제 1주차 공부한 개념들을 정리해보자.
html, css, JS (javascript) 이 세 가지를 배웠는데, JS는 2주차에 조금 더 가르쳐 줄 것 같다. 오늘은 간략히 html과 css에 대해 적어보려고 한다.
먼저 html을 알아보자.
<!DOCTYPE html>
<html>
<head>
<body>
html을 키면 요 네가지 태그가 선두에 서서 인사를 하는데, 쉽게 말하자면 구역을 나타내는 표시같은 것이다. 아직 공부중이라 완벽하진 않지만, 지금까지 본 바로는 html은 컨텐츠의 영역을 나누고 요소를 그위에 쌓아올리는 것이라는 생각을 하며 파악하면 이해에 도움이 된다.
_!DOCTYPE html 은 해당 문서의 타입을 정의 하는 언어로, 문서의 맨위에 적혀있다. 나는 html이랍니다~ 알리는 부분 이라 생각하면 된다.
_html 또한 html 이란다~ 라는 것을 보여주며, 위의 !DOCTYPE html을 제외한 파일의 내용 전체를 감싼다.
헤드_head 에는 메타데이터라고, 홈페이지가 가진 데이터이지만, 사용자에게는 보이지않는 정보들이 기록된다.
내용을 좀 들여다 보면 이해가 되는데, 분명 이 카테고리 속에
<meta charset="utf-8">
라는 내용을 볼 수 있을 것인데, 여기서 utf-8이란 유니코드로, 대부분의 언어를 지원하는 문자 전산 처리 방식이다.
즉, 이것이 헤드에 적히면서 우리는 utf-8 문자 전산처리 방식을 사용합니다. 라는 정보를 기록하지만, 사용자의 입장에서는 이사실이 사이트에 시각적으로 드러나지 않는다. 이렇듯 헤드는 이렇게 다른 데이터를 설명하기위한 메타데이터가 기록되지만, 앞서 서술했듯 사이트에 드러나지는 않는다.
두번째로 바디_body 는 헤드와 달리 사이트에 직접적으로 드러나는 부분이다. 보통 우리가 생각하는 네이버, 구글, 페이스북, 인스타그램, 유튜브 등의 사이트에서 우리 눈에 보이는 시각적인 부분을 담당하는 부분이다.우리가 눈에보이는 요소를 넣는 작업은 이 태그 아래에서 시행된다.
자꾸 태그태그하는데 그게뭔가요?
우리가 어떤정보를 드러내고 배치하고자 할때 이 태그를 사용해서 해당 정보를 감싸서 드러낸다. 대부분 <태그명>"내용"</태그명>의 형식으로 사용된다. 가끔은 끝난다는 표시인 </태그명>이 없을때도 있다.
그리고 해당 태그 속 태그 그속에 태그가 연결되어 있는데, 상위태그를 부모, 그아래 태그들을 자식으로, 부모-자식관계라는 용어로 파악해두면 좋다.
태그의 종류로는
<a> <div> <nav> <p> <oi> <ul> <img> <video> <input> <label> <span> ...etc쓰임이나 차이에 따라 많은 태그가 있고, mdn이라는 사이트를 이용해 찾아쓰며 공부하면 좋다.
참고로, block과 inline, inline block 이렇게 해당 태그의 컨텐츠를 이전 컨텐츠 옆에 표시(Inline) 하는지 줄바꾸어 아래에 표시(block) 하는 지, 블럭으로 옆에 표시(inline block) 하는 지에 대한 개념이 있는데 아직 공부중이지만, html에서 보았을때 예를들어 div태그는 블럭레벨이고, span태그는 인라인레벨이다. 이부분은 뒤에 css에서 수정이 가능하다.
그리고, class와 id가 있는데, 이걸 태그에 부여하는 것이다. 왜 부여하는지는 후에 css에서 이어서 말해보도록 하겠다. 일단 부여 방법은
<태그명 class="클래스명">, <태그명 id="아이디명">
이다. 해당 방법을 통해 클래스와 아이디를 부여할 수 있는데, 클래스는 해당 클래스를 가진 모든 요소를 묶어 분류해주고, id는 고유한 값을 해당 요소에 부여한다는 차이가 있다.
이것을 왜 부여할까, css에 대해 알아보면 바로 그 쓰임을 느낄 수 있다.
css는?
css는 위의 html을 예쁘게, 보고 사용하기 좋게 꾸며주는 것이다. 색을 넣거나, 위치와 크기를 조정하거나.
헤드부분에 style이라는 태그를 사용해서 그 속에서 css를 사용해도 되고, 따로 css파일을 만들어 헤드부분에 script라는 태그를 써서 연결해도 된다. 나는 개인적으로 후자의 경우를 사용한다.
css문법은 개념을 이해하면 편하다. css는 "요소를 선택" 하고 "어떻게 꾸밀지 말한다."로 이루어져 있다. 이를 생각하며 언어를 보면,
"selector(꾸밀요소)" { color: position: display: ..etc }
이런식으로 선택자(꾸밀요소)를 html에서 지정하고, 뒤에 색, 위치, 배경색 등을 지정하면, 해당 부분이 꾸며진다. 참고로 글자의 색 등은 html의 해당태그에서 바로 바꿀 수 있지만, css를 이용하는 것이 좋다고 느꼈다.
여기서 주목할 부분은 선택자. 저 부분에서 요소를 지정 한다고 말했는데, 앞서말한 태그, 아이디, 클래스 등이다.
*(모든요소)
태그명
.클래스명
#아이디명
등으로 해당부분 선택이 가능하다. 그리고, 해당태그의 해당 클래스를 선택하고 싶다면,
태그명 .클래스명(요소 요소) {}
으로 가능하고, 당연히 반대도 성립하고 요소를 바꾸어도 성립한다. 그리고 해당요소에 바로 아래있는 요소(자식요소)만 선택하고자 한다면,
요소>요소 {}
로 가능하다. 이외에도 first-child, last-child등의 상황에 따른 선택방식이 많다.
이 내용들 외에도 더 많은 이야기들이 펼쳐져 있었다.
지금 적은 내용 뿐 아니라, html 태그들과 구성요소에 대한 더욱 세부적인 사항들, html에서 emmet을 활용해 빠르게 문서를 쓰는 방법, flexbox를 활용한 레이아웃과 CSS의 선언 속 속성에 따라 그값을 입력하는 문자나 단위, 이 단위에서 상대적인 단위와 절대적인 단위 등 많은 내용들이 있었고, 생각보다 재미있었다. 개념을 공부하다 보니 이것도 사람이 만들어낸 언어 라 그런지 뭔가 다른점은 있지만, 결국은 사람이 편하고 잘 사용하는 것을 목표로 설계되었다는 느낌을 개인적으로 받았다. 앞으로도 열심히 공부해 나가야겠다.
이번글은 개념을 설명하며 써내렸기에, 다음 글은 아마 해당 인강에서 예제를 하며 작성한 html, css, JS 파일의 내용을 주제로 작성 될 것 같습니다.
혹시나 읽으신 분이 있다면, 좋은 삶을 보내시길 바라고, 다음에도 꾸준히 쓰러오겠습니다.
