시멘틱 구조란, HTML 문서에서 의미 있는 구조에 의미가 맞는 태그를 사용하는 것을 말한다.
HTML5 시멘틱 구조
시멘틱 구조에서는 위와 같이 웹 페이지에서 가장 윗부분에 올만한 내용들, 이를테면 웹사이트 로고나 로그인 폼 등을 배치할 때 header 태그를 사용하고 header 답게 맨 위에 배치하게 된다. 문서에서 메뉴를 나타낼 때는 nav 태그를 사용할 것이고 여기에 목차나 리스트, 링크 등이 배치된다.
이렇듯 의미 있는 구조에 맞는 의미 있는 태그들을 사용하여 HTML 문서를 구성하는 것을 시멘틱 구조라 한다.
Naver 메인 화면을 보면 대략적으로 우리는 어디가 header이고 어디가 nav인지 감으로 알 수 있다. 하지만 컴퓨터라는 기계는 인간이 아니기 때문에 대략적으로 파악이 불가능하다. 구성 요소들이 그저 div 태그로 이루어져 있다면 효율적으로 데이터를 추출하기 어렵다는 것이다. 하지만 시멘틱 구조로 이루어져 있다면 각 정보들이 분류되어 데이터 추출이 용이해진다.
Tag
Description
header
맨 윗부분으로 사이트 로고, 로그인, 언어 선택 등이 위치한다.
nav
문서에서 방향을 지시하는 곳으로 메뉴, 리스트 등이 위치한다.
aside
본문과 관련 없는 배너 광고 등이 위치한다.
section
여러 중심 내용을 감싸는 공간 ex) 네이버 뉴스에서 연예 섹션 혹은 스포츠 섹션 등등
article
직접적인 내용이 들어가는 곳으로 뉴스 기사 본문 내용 등이 위치한다.
footer
가장 밑 부분으로 주소, 연락처, 저작권 등의 내용이 위치한다.
시멘틱 태그는 모두 div 태그와 같은 기능을 수행한다. 하지만 검색 엔진이 웹 페이지를 파악하거나, 기계적인 동작이 더해질 때 시멘틱 구조로 이루어져 있다면 더욱 쉽게 이해하고 용이하게 이루어진다.
시멘틱 이전의 HTML 구조
<divid="wrap"><divid="header"><h1>HTML</h1></div><divclass="section"><divid="article"><h2>컨텐츠 1의 제목</h2><p>컨텐츠 1의 내용</p></div><divid="article2"><h2>컨텐츠 2의 제목</h2><p>컨텐츠 2의 내용</p></div></div><divid="footer"><span>저작권, 연락처, 주소</span></div></div>
시멘틱 구조의 HTML
<divid="wrap"><header><h1>나는 제목</h1></header><nav><ol><li><ahref="#">Menu 1</a></li><li><ahref="#">Menu 2</a></li><li><ahref="#">Menu 3</a></li></ol></nav><section><article><h2>컨텐츠 1의 제목</h2><p>컨텐츠 1의 내용</p></article><article><h2>컨텐츠 2의 제목</h2><p>컨텐츠 2의 내용</p></article></section><footer><address>경기도 평택시</address></footer></div>
위에서 표현한 것처럼, <div id="header">라고 표현하는 것보다 <header>로 헤더를 장식하는 것이 직관적이고 효율적이며 의미론적이다.
시멘틱 구조를 사용하는 것은 검색 엔진이 파악하는 데에 도움을 줄 뿐만 아니라 개발자들이 코드의 구조를 파악할 때 보다 용이하게 파악할 수 있다.
※ 링크 태그인 a 태그의 속성값으로 target="_blank"를 부여하면, 새로운 웹페이지에서 링크가 열리게 할 수 있다. 그리고 title="나홀로 메모장 Ver2.0"을 부여하면, 링크에 마우스 커서를 갖다 댔을 시 자그마한 툴팁이 뜨게 된다.
CSS가 필요한 이유
SW사관학교 정글 자료를 공부할 당시 만들었던 사이트를 가져와보았다! 만약 '나홀로 메모장 Ver2.0'이라는 링크를 초록색으로 꾸미고 싶을 때, HTML로만 해결하려고 하면 a 태그 안에 style="color: green"이라는 속성 값을 부여하면 된다. 하지만 점점 색상을 부여해야 할 요소가 많아지는 등, 복잡해지면 일일히 속성값을 부여하는 것은 상당히 비효율적이다. 이를 해결하기 위해 CSS가 등장했는데 HTML이 정보 전달, 즉 뼈대 구성에만 전념하게 하고 꾸미는 부분은 CSS가 전담하게 하여 보다 효율적으로 문서를 작성할 수 있게 되었다.
<head>
<style>
a {
color: green;
}
</style>
</head>
CSS를 작성할 때는 head 태그 안에 style 태그를 넣고, style 안에서 CSS 코드를 작성하면 된다. 위와 같이 작성 시 a 태그의 모든 폰트 색상은 초록색이 된다.
박스 모델
우리가 만든 어떤 요소가 HTML 문서 안에서 얼마만큼의 크기를 가지고 있는지 직관적으로 알기는 어렵다. 이때 border를 이용해서 해당 요소가 어떤 크기를 가지는지 직관적으로 알 수 있다.
전체화면을 3으로 보았을 때 Navigation이 2를, Article이 1을 차지하는 것을 알 수 있다. 이는 페이지의 크기를 늘리거나 줄여도 비율이 유지된다. 만약 150px 1fr;로 했다면 Navigation은 페이지의 크기가 늘어나든 줄어들든 150px를 유지하는 한편, Article은 나머지 부분을 차지하고 페이지 크기 변화를 따라간다.
※ div 태그는 Block Level Element이고 span 태그는 Inline Element이다.
※ caniuse 사이트를 통해 해당 기술이 얼마나 자주 사용되고 어느 플랫폼에서 사용할 수 있는지 확인할 수 있다.
FlexGrid
Flex와 Grid 모두 대부분의 플랫폼에서 사용가능하며 전세계 90% 이상의 인구가 Flex 혹은 Grid로 이루어진 사이트를 이용할 수 있다.
미디어 쿼리, Media Query
div {
border: 10px solid green;
font-size: 60px;
}
/* @media (min-width: 800px) {
div {
display: none;
}
} */@media (max-width: 800px) {
div {
display: none;
}
}
<div>Responsive</div>
800px을 넘은 경우800px까지 display: none;
미디어쿼리를 사용하면 페이지의 크기 변화에 따른 동적인 반응을 이끌어낼 수 있다. 위와 같이 @media (max-width: 800px)로 코딩이 된 경우, 이는 최대 800px까지 해당 코드인 display: none;을 실행한다는 뜻이다. 즉 0 ~ 800px까지는 보이지 않다가, 800px부터는 display: none;이 실행되지 않으므로 Responsive가 보이기 시작한다.
반면 @media (min-width: 800px)는 최소 800px부터 해당 코드인 display: none;이 실행된다는 뜻이다. 즉 800px 이상부터는 보이지 않는다. 0 ~ 799px까지는 display: none;이 실행되지 않으므로 Responsive가 보인다.
위와 같이 HTML은 구조를 결정하는 한편, CSS는 그 날 것의 구조를 꾸미는 것이고, JavaScript는 꾸며진 구조가 동적으로 움직일 수 있게 해준다.
CSS
<!DOCTYPE html><htmllang="ko"><head><style>h1 {
color: black;
font-size: 30px;
font-weight: 1500;
}
li,
p {
color: blue;
font-size: 30px;
}
#firstList {
font-size: 20px;
}
</style></head><body><h1>바닐라코딩</h1><ul><liid="firstList">HTML</li><li>CSS</li><li>JavaScript</li></ul><p>한 번 끝까지 달려보자!</p></body></html>
위 코드에서 head의 style 태그 안에 담긴 것들이 CSS이다. 단순히 h1, li, p와 같은 태그들을 선택할 때는 그대로 입력 후 중괄호 {} 안에 원하는 CSS를 기입하면 된다. id를 선택할 때에는 앞에 #을 붙여주어야 한다. 또한, CSS는 각 코드의 끝에 세미 콜론 ;을 붙여주어야 한다.
참고로 id나 class를 정해줄 때 위와 같이 firstList처럼 이름을 정해주는데, 이 때 대부분의 개발자들이 사용하는 규칙이 있다. first list처럼 쓰는 것이 아닌, _을 활용한 first_list나 앞 단어 이후 붙는 뒤의 단어들의 첫 번째 글자는 대문자로 시작하는 firstList로 이름을 정해준다.
thick과 같은 class의 경우는 앞에 .을 붙여주어야 한다. class의 경우, id와 달리 하나 이상의 요소에 class를 부여할 수 있다. 또한 class명을 thick_alert 혹은 thickAlert가 아닌 thick alert로 지었을 경우, style에 작성한 thick과 alert의 영향을 동시에 받는다.
id는 앞에 #을 붙여주면 되고, 하나의 id명에는 하나의 HTML 요소만 적용하는 것이 원칙이다.
li, p처럼 쉼표를 이용해 2개 이상을 동시에 지정할 수 있다.(Compound)
#nav li, #list > li 처럼 한 요소의 하위 요소를 선택할 수도 있다.
*을 이용하면 HTML body의 모든 요소를 선택하게 된다.
img[alt="cat"]으로 지정하면, img 태그 중 alt 속성의 값이 cat인 HTML 요소를 선택하게 되는 것이다.
Block 요소들은 줄바꿈이 실행되어 새로운 줄에서 시작한다. 대표적으로 p와 div 태그가 있다. Block은 Block이나 Inline을 자식으로 품을 수 있다.
반면 Inline 요소들은 줄바꿈이 실행되지 않아, 새로운 줄에서 시작하지 않는다. 텍스트 흐름과 동일하게 동작한다. 하나에 이러 또 다른 하나가 줄줄이 이어 붙여진다는 것이다. Inline은 Inline을 자식으로 품을 수 있지만, Block은 자식으로 품을 수 없다. Inline의 대표적인 태그로는 span이 있다.
빨간색 점선 박스로부터 위에서 20px, 왼쪽에서 20px 벗어난 파란색 박스를 볼 수 있다. relative-element는 Position Property를 부여하지 않았기 때문에 이동할 수 없는 Static 상태일 것이고, relative-element라는 부모 안의 자식 요소인 code, 즉 <div class="relative-element">는 relative라는 Position Property를 부여받아 top이나 left라는 좌표 Property에 의해 이동할 수 있다.
relative의 경우 기본 위치는 static이고 부모를 기준으로 두고 이동하게 된다.
- Absolute : 가장 가까운 부모 요소 중 position: relative;가 적용된 요소를 찾아, 그 요소를 기준으로 위치가 정해지게 된다. 만약 부모 요소 중 position: relative;를 가진 요소가 없다면, 전체 페이지를 기준으로 위치를 잡게 된다.
Hypertext Markup Language의 줄임말로, 프로그래밍 언어가 아니며 '웹사이트'를 만드는 가장 기초가 되는 'Mark Up'언어이다. 특별한 기호나 표기를 사용해 글의 서식과 스타일을 정해주는 언어를 뜻한다.
마크업 언어가 무엇인지 사실 감이 잘 잡히지 않았었다. 몇 번 반복하다보니 감이 오는데, 함축적인 단어 표현을 통해 글의 구조, 내용, 스타일 등을 꾸밀 수 있게 해주는 언어를 말하는 것 같다.
바닐라코딩 사이트의 HTML 코드
생활코딩에서 HTML, CSS, Javascript도 들어보고 SW사관학교 정글 자료를 보면서 공부도 했었지만, 잘 만들어진 페이지의 코드를 보면 여전히 모르는 것이 많다.
태그, Tag
태그란 '<'와 '>' 사이에 어떤 단어(태그)를 적는 것이다.
<br> br 태그는 줄바꿈을 실행시킨다.
<p> p 태그는 paragraph의 약자이다. 말 그대로 단락을 표현할 때 사용되는 태그이며 자동으로 줄바꿈이 실행된다.</p>
HTML Tag의 특징으로는 여는 태그와 닫는 태그가 있다는 것이다. 한 예시로, 제목을 나타낼 때 자주 쓰는 h1 태그가 있다.
<h1>바닐라코딩</h1>
개발자 도전기
<br>
hello world
이와 같이 <h1> 다음 </h1>을 적어 '바닐라코딩'부분만이 제목으로 사용되게 할 수 있다. 닫는 태그에는 '/'가 추가된다. 태그의 종류는 무수히 많다. 이걸 하나하나 공부해가며 외울 필요는 없고, 필요할 때 검색을 통하여 알아내면 된다. 혹은 https://developer.mozilla.org/ko/docs/Web/HTML/Element 모질라 사이트에서 검색하면 빠르게 찾아낼 수 있다.
문서의 구조
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"></head><body><h1id="profile">프로필</h1>
안녕하세요
<br>
바닐라코딩을 준비하고 있는 사람입니다.
<p>
현재는 설비엔지니어로 일하고 있고, 개발자가 되기를 희망하고 있습니다.
</p></body></html>
HTML의 구조는 대부분 위와 같이 html 태그 안에서 head와 body로 이루어진다.
- html : 웹 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려준다.
- head : 외부 소스를 참조할 때 사용한다. 예로 jQuery나 Bootstrap, 구글 폰트를 따오는 코드가 head 태그 안으로 들어가게 된다. style 태그로 CSS가 들어가기도 하고 script 태그로 JavaScripr가 들어가기도 한다.
- body : 웹 브라우저는 이 태그에 포함되어 있는 내용들을 화면에 보여준다. 페이지의 내용을 구성하는 부분이라고 보면 된다.
HTML에서 이미지는 말그대로 img 태그를 통해 구현할 수 있다. 이 때 src는 source의 약자이고 여기에 이미지의 주소나 파일 이름을 기입하면 된다. 여기서 src는 속성, attribute이다. 포함하고자 하는 이미지로의 경로를 지정할 때 사용된다. 그러므로 img 태그를 사용할 때 src는 필수이다.
alt는 alternative의 약자로, 이미지의 간단한 설명을 나타낼 때 사용된다. alt는 필수는 아니지만 네트워크 오류 혹은 콘텐츠 차단, 죽은 링크로 인해 이미지를 표현할 수 없을 때 alt 속성 값이 대신 나타나며 사용자에게 차단된 이미지가 어떤 것이었는지 암시해줄 수 있다.
링크는 우리가 원하는 공간(페이지)로 이동할 수 있게 해준다. a 태그를 이용하고 href 속성값에 따라 어떤 페이지로 갈지가 정해진다. a 태그는 '바닐라코딩 홈페이지'라는 글씨 뿐만 아니라 img 태그도 감쌀 수 있어, 사진에도 링크를 걸 수 있다.
또한, mailto: 혹은 tel:을 href에 기입해 클릭 시 이메일을 보내거나 전화를 걸 수 있다.
그리고 id 값을 기입하면 HTML 문서 내의 같은 id 값을 가진 곳으로 이동한다. 보통 id는 HTML 문서에서 1개만 지정되기 때문에 이동하는 곳이 중복되지 않는다. 예로, 내가 h1 태그에 id 값으로 profile을 부여했으면, 다른 태그에는 id 값으로 profile을 부여하지 않는 것이 원칙이다.
위는 CSS인데, HTML 문서를 꾸며줄 때 사용되는 언어이다. a 태그의 href 속성값에 https, mailto, tel이 들어가면 각각에 해당되는 아이콘을 앞에 붙여줄 수 있다.
절대경로와 상대경로
- 절대경로 : 전체 인터넷을 기준으로 해당 자료의 위치 표현
- 상대경로 : 같은 파일 시스템 구조 상의 위치 표현
사실 처음 듣는 개념이고 Prep Guide만으로는 이해가 안되어 검색을 해봤다.
절대경로란, 최초의 시작점으로 경유한 경로를 전부 기입하는 방식이다. 내가 만약 윈도우 OS의 바탕화면에 index.html 파일을 두었다고 가정하면, C:\Users\Administrator\Desktop\index.html이 절대경로가 되는 것이다. (이 때 Administrator는 UserID로, 각 사용자의 이름에 따라 달라질 것이다)
어떠한 OS든 이렇게 최상위의 경로, 즉 모든 경로를 기입한 절대경로로만 파일을 찾을 수 있다. 그렇다면 상대경로는 왜 생겼을 까.
상대경로는 이름처럼 상대적인 개념이 적용되는데, 항상 그 기준이 필요하다. C:\Users\Administrator\Desktop\index.html처럼 절대경로가 아니라, 만약 Desktop\index.html 혹은 index.html이라고 표현되어 있다면 해당 경로는 어디를 나타내는 것인가? 이는 기준 경로에 따라 결정된다. 만약 기준(비교 대상)이 C:\SSJ라면 두 경로는 C:\SSJ\Desktop\index.html과 C:\SSJ\index.html이 된다.
상대경로가 필요한 이유는, index.html의 경로가 항상 일정한 것이 아니고 바뀔 수도 있기 때문에, 절대경로만 존재한다면 매번 경로를 일일히 바꿔주어야 할 것이다. 크게 와닿진 않는다. 하지만 좀 더 학습하다가 절대경로와 상대경로를 쓰게 되는 시점이 오면 더 이해할 수 있을 것이다.
결론적으로 절대경로란 최상위 경로(디렉토리)가 반드시 포함된 경로이고, 상대경로는 현재 기준(현재 디렉토리, 비교대상)으로 작성된 경로를 의미한다.
설비엔지니어에 관한 컨텐츠로 가장 먼저 다룰만한 것이 뭐가 있을까 생각해보았다. 그리곤 얼마 전까지 해보았던 5개월 간의 셋업 업무가 기억에서 흐릿해지기 전에 얼른 적어야겠다고 느꼈다. 그리고 혹여나 '얼마 근무해보지도 않은 놈이 글을 쓰네?'라는 분이 있다면 그냥 욕 한번 날려주고 귀엽게 봐주시길 바랍니다 선배님! :)
출처 : Applied Materials
Set-Up : (기계 등의) 구성, 장치, 설치, 설정
말 그대로 반도체 설비를 제 자리에서 가동할 수 있도록 설치하는 것이다.
신입사원 연수가 끝나고 나면 어떤 기술팀으로(설비엔지니어로서는 어느 공정으로 갈 것인지라고 보면 된다) 가고 싶은지 결정되는 면담이 진행된다. 아는 사람도 있겠지만 소위 말해 꿀이라는 소문이 자자한 기술팀의 경우는 눈치 게임이 시작된다. 'T/O도 적은데 내가 될까?', '못 먹는 감, 먹어나 볼까!'
나 같은 경우엔 셋업을 경험할 수 있는 곳으로 가고자 했다. 밑바닥부터 시작하는 것이 어떤 업무를 하든 장기적으로 봤을 때 좋을거라 생각했고, 기본기가 중요하다고 생각했었기 때문이다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 젠장!
면담에서 이러한 것을 어필해, 대부분이 가기 싫어하는 평택으로 발령이 났다^.^ 평택으로 발령이 날 경우 다시 어느 기술팀으로 가고 싶은지 면담을 거친다. 이 때는 내가 가고 싶은 기술팀으로 배정이 되었다.(면접부터 일관되게 어필한 것이 도움이 되었나?) 지금 와서 생각해보면 꿀인 곳에 지원 안해본 것이 조금은 후회가 된다. '여기 아니면 퇴사하겠습니다.'라고 배수의 진이라도 쳤어야 됐나...
출처 : WECO
셋업 업무를 해보기 직전까지는, 그래도 내가 어느 정도 장비나 부품을 설치하거나 장착하는 줄 알았다. '마! 내가 거 다 했어 임마! 전기도 연결하고! 장비도 옮기고! 나사 다 박고 임마!'라는 말을 하게 될 날이 올 거라 예상하면서 ㅎㅎㅎ 너무나도 멍청했다.
설비엔지니어가 직접 실질적으로 설치하는 거~~~~~~~의 없었다. 이해는 한다. 당연히 장비에 대해 더 잘 아는 장비사가 설치하는 것이 확실하고, 혹여나 설치가 잘못되어 귀책을 따질 때 당연한 처사가 이루어질 수 있기 때문이다. 그리고 배관이나 전기 같은 경우는 숙련자가 아니면 많이 위험해 협력업체분들이 도맡아 한다. 그래도 아쉬운 것은 어쩔 수 없다. 백문이 불여일견이라고, 보기만 하는 것보단 무엇이든 해봐야 깊이를 느낄 수 있지 않는가! 주구장창 '이거는 왜 하는 거에요?, 왜 그걸 해요? 이건 언제 하는 거에요?' 등 질문만 해댔다. 장비사 엔지니어분, 협력사 형님들 나때매 많이 귀찮았을 거다.
그렇다면 무엇을 했는가! 설비가 들어올 자리의 밑바탕 작업이나 가스나 전기 배관 설치의 현장과 앞으로의 일정 등을 확인해 겹치지 않게 조율한다던가 환경안전 관련 인증 업무, 부수적인 작업에 대한 업체 Arrange, 셋업 보고서 작성 등 말 그대로 관리자의 업무를 하게 된다. 진짜 설치는 못하면서 관리자라니... 조금 허탈했다. 관리하는 업무라지만 8시까지 출근해 7시 넘어서까지 일하는 등 잔업은 거의 일상이었고 1달에 2번 정도는 주말에 출근하는 특근도 있었다. 납기 또한 촉박했기 때문에 1가지 일이라도 틀어지면 예민해질 때도 있었다.
근데 지금 생각해보면 이 때가 몸은 힘들지만 그래도 정신적으론 즐거웠던 것 같다. 교대 근무를 돌아보니 나한텐 셋업 업무가 그리울 때가 많다... 야근은 잦았지만 동료분들과 농담도 하며 일했고 끈끈함이 있었다. 주간에 일하니 그래도 회사다니는 느낌이 들었고 약속 잡기에도 비교적 수월했었다.
바닐라코딩 프렙 코스의 신청서에는 사전학습 가이드 혹은 다른 자료를 이용해 공부했던 흔적이 담긴 자료를 첨부해야 한다. 그 자료는 다음과 같이 준비해야 한다.
- 본인이 공부하며 혼자 작성해본 코드 : Github 등등
- 공부하며 배운 것을 기록했던 자료 : 개인 블로그 등등
어찌 보면 개인 블로그로는 네이버, velog, Notion, Github 등등의 플랫폼에서 많이 고민해보았는데 아무래도 익숙하면서 내 삶도 담을 수 있고, 코딩 첨부 기능 또한 있는 네이버가 아닌 티스토리!를 선택했다.(네이버는 좀 가벼워질 것 같고 구글 검색 시 노출 또한 잘 안되니까 ^.^)
하지만 넘어야 할 언덕이 바로 코드 저장소인데, Github는 생활코딩 HTML 강의에서 한 번 해보고 버전 관리?에 좋다는 것만 알 뿐 잘 모르는 영역이다. 겁부터 나지만, 어떤 일이든 알고 나면 별거 아니지 않는가?
그래서 준비한 것은 Github 강의이다. Inflearn에서 찾아보니 Github 강의가 있다! 그것도 무료로!
아직 듣진 않았지만 평이 아주 좋다. 2시간 23분으로 길지 않고 간단하다. Github는 개발자로서 입사 후 실무에서도 자주 사용된다고 한다. Github는 이 강의로 시작해봐야겠다.
3. 꾸준함
바닐라코딩 Prep Guide에는 꾸준함이 적혀져 있지 않지만, 작심삼일이 되지 않기 위해 꾸준함도 추가해보았다. 하루 3시간, 5시간, 주말에는 10시간 등 얼마나 공부하느냐도 중요하지만 단 몇 십분이라도 꾸준히 해야한다고 생각한다. 마음 먹은 김에,1 Day 1 Commit을 실천하도록 하겠다!
코드 에디터
바닐라코딩 Prep Guide에서는 Visual Studio Code 뿐만 아니라 확장 프로그램까지 설치하길 추천해준다.
- Trailing Spaces
- Prettier
찾아보니 Trailing Spaces는 공백에 색감을 줘서 불필요한 공간을 없애게 해주는 것이고(공백 또한 코드를 읽는 시간을 잡아먹을 수 있는 것인가?), Prettier는 말그대로 코드를 더 이쁘게 만들어주나보다.
