전에 면접을 봤던 곳에서 출근 가능 여부를 물었지만, 운명인지 내가 가고싶었던 회사에서 코딩테스트에 통과를 하였고 1차 면접에 대한 연락이 왔다. 나의 선택은 당연히 후자를 선택했다.
너무나 값진 시간이었고, 그렇기에 친구랑 밥먹으면서 메모장에 끄적인 것과 집에 오면서 생각나는대로 적었던 것을 정리해 보려고 한다.
브라우저에게 어떤 버전의 HTML 문서로 작성했는지 알려주는 것이며, 웹브라우저가 내용을 올바르게 출력하도록 도와주는 것
선언을 하지 않게 되면 호환 모드(Quricks Mode)로 작동해 나의 의도와는 다르게 표시 될 수 있다는 것
HTML 과 CSS 표준에 따라 렌더링이 된다.
- http-equiv="항목명" : 웹 브라우저가 서버에 명령을 내리는 속성, HTML 문서가 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖는다.
- content="정보값" : meta 정보의 내용을 지정한다.
- name="정보 이름" 몇개의 meta 정보의 이름을 정할 수 있으며, 지정하지 않으면 http-equiv 와 같은 기능을 한다.
정말 많이 봤지만 왜? 라는 궁금증을 가져보기 + 모든 것에는 이유가 있다.
이유를 설명 할 수있는 사람이 되자.
html 파일의 인코딩을 알려주는 태그 즉 브라우저에게 text를 그리는 방식을 말해주는 것 이것을 하지 않게 되면 한글, 특수문자가 깨질 수 있다.
나는 html파일,css파일,js파일,img파일 이렇게 정리를 해왔다.
그렇지만 프레임워크를 조금이라도 써봤으면, 파일 정리에 대해서도 조금 보기 좋게 할 수 있는 것을 알고 있음에도 그렇게 하지 않았다는 점
알고 있으면 실천으로 옮기자.
OOCSS, BEM , SMACSS
WHY?
1. 코드의 재사용성을 높이기 위하여
2. 쉬운 유지보수를 위하여
3. 확장의 용이성을 위하여
4. class명으로 어떠한 의미인지 알 수 있게 하기
1. 구조와 외형의 분리
2. 컨테이너와 내용 분리
1)구조와 외형의 분리
2)컨테이너와 내용 분리
<!-- 지양 --> <h2>....</h2> h2{font-size : 16px;} <!-- 지향 --> <h2 class="title">....</h2> <span class="title">....</span> .title{font-size : 20px;}
<button class="btn cart">장바구니</button> <button class="btn menu">메뉴</button>
/* 버튼에 대한 공통적인 구조를 설정 */ .btn{....} /* 버튼의 외형을 추가적으로만 설정한다.*/ .menu{....} .cart{....}
1)Block
<!-- 지양 --> <!-- red,등 상태에 대한 내용은 클래스로 담지 않는다. --> <div class="btn-red">...</div> <!-- 지향 --> <!-- 목적에 맞게끔 설정, id 선택자 사용 X --> <div class="btn-area">...</div> <div class="menu">...</div>
2)Element
.header__logo{...} .header__menu{...} .btn-area__login{...}
3)Modifier
.form__btn--disabled{....} .btn-area__login--green{....}
1)Base - 기초 스타일
2)Layout - 레이아웃 관련 스타일
l-width #header{....} l-width #gnb{....}
3)Module - 모듈 관련 스타일
.title {....} .sub-title {....}
4)State - 상태 관련 스타일
is-hidden {....} is-disabled {....} is-error {....}
5)Theme - 테마 관련 스타일
/* main.css */ .btn {color : red;} /* theme.css - main.css의 뒤에 컴파일이 되어야한다. */ .btn {color : green;}
이렇게도 많은 규칙들이 있다. 조금 더 생각을 하고 코드를 짜는데 신경을 써보자.
- reset : 입력된 데이터를 초기화 하는 타입
- submit : 입력된 데이터를 서버로 전달하는 타입 (기본 값)
- button : 클릭을 할 수 있는 버튼 타입
- a태그 : 페이지의 이동, 페이지 내의 다른 영역으로의 이동
- button태그 : 클릭 이벤트, 입력된 내용을 서버로 전송할 때
- #: 아무것도 실행하지 않지만 페이지 최상단으로 이동
- #none : 아무것도 실행하지 않고, 페이지 최상단으로 이동을 막는다.
- #id : 지정된 id 값으로 포커스 이동
- _blank : 새로운 탭에 연결된 url이 열린다.
- _self : 열려진 창에서 주소창으로 새로운 페이지가 열린다.(기본값)
- _top : 링크된 문서를 현재 윈도우 전체에서 오픈함.
- _frame : 링크된 문서를 명시된 프레임에서 오픈함.
1.css를 보다 쉽게 작성 할 수 있게
2. 코드의 가독성을 높이기 위해
3. css로는 구현 불가능한 변수 또는 함수를 사용 할 수 있게
4. css파일이 커짐으로 그 해당 위치를 찾기 힘들기 때문
Sass/Scss, less, Stylus, PostCSS
이러한 것들은 Syntax 만 다르고 개념 자체는 동일
단점 : 전처리기를 위한 도구 필요
- 문법의 차이 {} , ;의 유무
- 확장자 (.scss , .sass)
- @mixin : 재사용할 css 스타일 그룹을 정의 하여 @include로 호출
- @extend : 스타일을 정의하다가 부분적으로 다른 부분에 대해 제외 시키는 것
- @import : 외부에 모듈화 해서 분리한 파일에 대해 호출하는 것
dl태그는 정의를 나타내기 위해 사용하는 태그이다.
- 자식으로 dt, dd를 가진다.
- 문법적으로 순서가 중요하다. dl은 직계로 dt를 가지며, dt는 dd를 가져야한다.
- 같은 dt, dd 끼리의 연속 가능하다.
- ex) dt dt dd 가능 // dt dd dt 불가능
웹 페이지에 대한 자료 수집 검색 결과의 상위에 나올 수 있도록 하는 작업
그러기 위해선 시멘틱 마크업이 필요하다.
시멘틱 태그 : 어떤 의미를 하고 있는지 사용되는 태그.
WHY?
- 웹 표준과 접근성의 측면
- 코드의 가독성 측면
- 코드의 재사용성의 측면
css도 작성을 할 때 규칙이 있다. 건축물을 지을 때에도 순서가 있듯이....
WHY? : 속성의 순서가 있음으로 특정 속성을 찾기 쉽다는 것
- 1순위 : 객체의 노출여부와 표현방식
- display , list-style
- 2순위 : 위치와 좌표
- position , float , clear
- 3순위 : 크기와 여백
- width / height , padding / margin
- 4순위 : 윤곽과 배경
- border / background
- 5순위 : 글자와 정렬
- color / font , text-deco , text-align / vercical-align , white-space
- 6순위 : 내용
- content
아 처음에 배울 때 뭘로 하지 하다가 제 별명을 영어로 적었습니다.
두분의 개발자와 나 2 : 1로 진행 하였고, 중간 중간 긴장하지 말라고
물 먹을 시간도 계속 챙겨주시고 너무 젠틀하셨다.
합격을 포기하고 오늘 보낸 한시간 반은 정말 뜻 깊었고, 배울 점이 너무 많았다.
코딩 테스트를 보았는데 그거에 대해서도 방향성을 제시 해주셨고
이 면접을 계기로 많은 생각을 하게 되었다. 나는 아직 우물안의 개구리구나
평소에 면접은 하나도 긴장이 되지 않았지만, 가고 싶다는 욕심이 있어서 인지
오늘만큼은 긴장을 해서 그런지 지금 생각해보면 엉뚱한 대답을 한 것 같긴 한데,
그래도 하는 말에 대해 경청 해주시고 하시는데 면접 본 곳들도 다 그렇긴 했지만
다른 느낌이였다. 이 회사에 들어가게 된다면 배울 점이 더욱 더 많을 것이라는 생각이 들었다.
블로그를 통하여 공부를 하고 있다고 슬쩍 말하니 좋아 하셨다.
1년하다 그만하지 말고 꾸준히 하는게 나중에 큰 재산이 될 거라고 하셨다.
1차 코딩테스트 합격
2차 기술 면접 (이번주에 연락 기다리기) 꼭 3차도 볼 수 있는 기회가 있으면 좋겠다.
+12/8 네이버 운세에서 희소식 올거라 했는데 진짜 왔다 마지막 까지 화이팅
3차 개발 실장님과 1:1 컬쳐 핏 면접 (2차 붙어라~~)
그 인터뷰를 통하여 내가 느낀 점이 있다면,
내가 인터뷰를 하면서 보낸 시간들이 정말 값어치 있는 시간이라 생각한다.
면접을 앞으로 더 나아갈 수 있는 경험이 될 수 있다라는 자세로 임한다면
알게 모르게 본인도 성장을 하고 있을 것이다.
만약 그 날 본 면접이 망했다고 하더라도 이것 또한 경험이고,
슬퍼할 시간이 없다. 그 날 면접 본 것을 내 것으로 만들어서 다음 면접을 준비 하면 되는 것이다.
모두들 취뽀 화이팅
주간 인기글 감사합니다.
김동현 취업 축하요