개발자로의 진로를 정하고 여러 대외활동을 찾아보던 중 나의 현재 상태와 가장 적합한 대외활동을 찾게 되었다.
멋쟁이 사자처럼은 코딩 동아리로, 비전공자인 나는 프로그래밍에 열정이 있는 다른 팀원을 구하기 힘든 상황이였다.
지난 겨울 학교에서 주최한 4주과정 부트캠프에 참여한 경험을 바탕으로 자기소개서를 작성하고, 면접을 본후 합격하였다.
백엔드에 지원하였지만, 학업과 병행하기에 어렵다 생각한 운영진분이 프론트엔드를 추천해주셔서 프론트엔드 분야로 합격하였다.
1주차
HTML 과 CSS를 공부하는 이유
컴퓨터에는 사람의 생각을 보여주는 도구와 언어가 굉장히 많다. 그중 가장 빠른것이 HTML, CSS 이다.
또한 기본적으로 설치되어 있는 브라우저로 인해 누구나 접속 가능한 웹 페이지다. 이렇듯 HTML, CSS는 강력한 접근성을 보인다.
HTML과 CSS 강의를 수강하였다. 노베이스라 가정한 강의였고, 나만의 HTML 이력서를 만드는 과정이였다.
HTML의 기본 작성은 다음과 같다.
<태그 속성="속성값">내용</태그>
- <!DOCTYPE HTML> - HTML5의 문서 지정이다.
- <html> - HTML 웹페이지의 시작과 끝이다.
- <head> - 웹페이지의 정보를 적는 태그이다. 외부 파일들을 링크할 때 사용한다
- <body> - 웹페이지에 실제 표시되는 내용이다.
- <title> - 문서의 제목. 페이지를 나타내는 제목이다.
- <meta> - 문자 인코딩 및 문서 키워드를 나타내거나 요약 정보이다.
ex) <meta charset="utf-8"> 웹페이지의 문자 인코딩 방식을 utf-8로 지정해야 한글이 출력된다.
- <div> - 묶을때 사용하는 태그이다. <section>, <article> 과 비슷한 목적으로 사용된다.
- <a> - anchor, 웹 페이지나 외부 사이트를 연결한다. 하이퍼링크
ex) <a href="연결할 링크의 경로">내용</a>
- <link> - 외부 파일을 연결할 때 사용한다. 주로 CSS.
ex) <link href="외부 CSS파일 경로" rel="stylesheet" type="text/css"> type 대신 href="css파일이름.css" 를 사용하기도 한다.
- <p> - 단락. 사용하면 내용 앞뒤로 빈 줄이 생기면서 단락이 생긴다.
- <h1> - 제목. <h1>~<h6> 까지 있다. 1부터 글자의 크기가 가장 크고 6까지 갈수록 크기가 작아진다.
- <footer> - 제작 정보와 저작권 정보이다. 웹페이지의 가장 하단에 작성한다.
추가로 css의 내용들을 연결하기 위해 class 속성을 태그 안에 넣어야한다.
ex) <p class="abc">들어갈 내용</p>
이 태그들을 통해 이력서의 기본 구조를 작성하였고, 이력서의 디자인적인 요소를 꾸미기 위해 css도 작성하였다.
css의 기본 작성법은 다음과 같다.
선택자 {속성:속성값; 속성:속성값;}
모든 태그에 선택하고 싶을 경우에는 * { 속성:속성값; }
특정 임의의 태그를 선택하고 싶을 경우에는 앞에 점을 붙여야한다.
ex ) .abc{ css }
- font-size - 글자크기를 정하는 문법이다.
- font-weight - 글자 굵기를 정하는 문법이다. 이 강의에선 bold, lighter 등이 쓰였다.
- font-style - 글자의 생김새를 정하는 문법이다. italic 으로 설정하면 기울어진다.
- color - 글자의 색을 정하는 문법이다.
- margin - 양파 껍질이라 비유하면 가장 외적인 부분. 다른 태그와 거리를 조절하는 용도이다.
- border - 중간부분. 네모난 구역을 실선으로 그리는 용도로 사용하였다.
- padding - 가장 안쪽. 태그의 내용과 border 사이의 거리를 조절하는 용도이다.
margin border padding은 후에 좀 더 자세히 설명하겠다.
- width - 가로 너비
- height - 세로 너비
- text-align - 글자 정렬 ex) text-align: right; 라면 글자가 오른쪽 정렬된다.
- float - 글자가 공중에 띄워졌다고 생각하면 된다. 두 태그를 같은 구역에 표시하려는 용도로 쓰인다.
하지만 float으로 태그가 띄워져 있으므로 float 영향을 받지않은 다음태그까지 겹쳐 보이는 오류가 생긴다.
이를 방지하기 위해 보이지 않는 공간을 채운다. 방법은 다음과 같다.
overflow: hidden;
- line-height - 글 간격. 한글에서 보이는 150% , 160% 의 줄간격과 같다.
- box-shadow - 그림자 생성. 가로방향, 세로방향, 흐림정도, 번짐정도, 색깔 순으로 작성한다.
ex) 0 1px 20px 0 rgba(0, 0, 0, 0.1);
- min-width/ min-height - 최소 너비를 지정한다.
- @import url - 해당 url에서 가지고 오고싶은 값을 가지고 온다. 해당 강의에서는 폰트를 가지고 왔다.
- font-family - 글자 폰트를 정한다.
추가로 margin, border, padding은 다음과 같다.
위 그림과 같이 태그 내용을 기준으로 다른 태그와 거리를 조절하기도 하고 구역을 서로 나누기도 하고 실선을 그리기도 한다.
이렇게 html과 css를 통해 이력서를 작성하였다.
강의를 들을때에는 쉽다고 생각하였는데, 아예 처음부터 다시 작성하려 하니, 생각보다 어렵고 기억이 잘 나질 않았다. 익숙해질 때까지 꾸준히 반복해야 내 것으로 다가오는것 같다.
2주차에도 3주차에도 멋사 활동이 기대가 된다.
'멋쟁이 사자처럼' 카테고리의 다른 글
| 멋쟁이 사자처럼 10기 해커톤 후기 (0) | 2022.09.11 |
|---|---|
| 멋쟁이 사자처럼 10기 3,4주차 (0) | 2022.05.24 |
| 멋쟁이 사자처럼 10기 2주차 (0) | 2022.04.22 |