📌 현직자 특강
by. 네이버 스마트스튜디오 책임리더 우상훈님
-
Frontend 개발자는
웹 기술을 사용해서
웹 브라우저를 포함한 다양한 환경(웹브라우저, 헤드리스 브라우저, 웹뷰, 네이티브 바이너리)에서 사용하는 ex)키오스크, 노션
웹 사이트나 웹 어플리케이션을 만든다 -
비판적 사고 + 논리력 + 학습 능력 필요
-
핵심 기술은 자바스크립트
-
개발, 디자인, 마케팅 다양한 동료와 협업하기 때문에
커뮤니케이션, 공감능력, 사람에 대한 배려가 필요하다
-> 자기를 잘 알아야 한다
나는 커뮤니케이션을 잘하나? 공감을 잘하나?
그에 맞는 분야를 선택해야 한다 -
Frontend 개발자가 하는 일✨
저작권 문제로 비공개 게시글로 작성 -
프엔 개발자 전망
FE 개발자의 역할 확장이 보인다
역할을 확장하거나 이해를 넓혀서 여러 직군과 소통할 수 있다
디자인 - UI/UX
책 추천
도널드 A. 노먼
수잔 웨인쉔크
대니얼 카너먼
백엔드 - 페이지 개발(JSP/Serviet)
- 좋은 개발자?
사용자의 문제를 해결하기 위해
치열하게 고민한 해법으로
적절한 기술을 활용하여
시장이 원하는 시점에 제품으로 출시하는 개발자
React를 n년간 사용했어요
-> ㅇㅇ 프로젝트의 ㅁㅁ한 특성을 극복하기 위해 React를 사용했습니다
저는 정말 개발을 잘하고 좋은 개발자로 성장하고 싶습니다
-> 좋은 개발자로 성장하기 위해 ㅇㅇ 프로젝트를 진행했고 GitHub에 주기적으로 커밋합니다
좋은 개발자라고 말하고 싶다면
열심히 공부하는 것은 기본이고 개발이 재밌고 치열하게 고민하고 있다는
반복적인 증거, 근거(경험, 학습 등)가 필요하다
- 면접 꿀팁
질문 이해못했을 때 물어보기!
면접관들은 날 뽑고 싶어하는 사람들이다
키워드 메모 정도는 가능하다
깃헙, 블로그 다 본다! 성실하게 정성들여 작성하자
프로젝트 경험 얘기할 때는
프로젝트에서 솔직하게 기여도가 몇 퍼센트인지,
어떤 것을 했는지,
어떤 모듈을 만들면서 어떤 문제를 만났는데 어떤 기술을 사용해서 해결했는지,
문제를 해결하면서 어떤 것을 공부할 수 있었는지 대답하기
개발자 한다고 놓고 있었던 UXUI 공부를 다시 시작해야겠다는 다짐을 했다.. 그리고 영어 공부도 틈틈히 해야겠다 개발 공부는 기본! 할 일이 끊임없이 생겨난다😂
꿀팁도 많이 얻을 수 있었다🍯 특히 내 소개, 장단점! 뻔해서 마음에 안들었는데 키워드 뽑아놓고 보니까 더 잘 쓸 수 있을 것 같다ㅎㅎ 이력서 준비도 미리미리 해야지📄
키워드 : 꼼꼼한, 센스있는, 체계적인, 배려, 차분한
🎨 CSS 특강_3
by. 빔 캠프 이종찬 님
magin= 차지하고 있는 공간
콘텐츠가 차지하고 있는 공간과 보여지고 있는 디자인을 다르게 가져갈 수 있는 Property
실제로 보여지는 비주얼은 그대로이고 차지하고 있는 공간만 줄어들거나 늘어난다
콘텐츠가 보여지고 있는 비주얼과 차지하는 공간이 일치한다고 브라우저를 속인다(but Negative Margins가 검사 기능에서 시각화되어 나오지는 않는다)
margin: 0;
차지하고 있는 공간 = 보여지고 있는 디자인
Negative Margins
margin-top: -50px;
차지하고 있는 공간이 줄어든다
margin에 마이너스를 쓰는 것이 버그는 아니지만 브라우저를 속이기 때문에 적재적소에 사용해야 한다
margin-left: auto;
오른쪽으로 보낼 수 있다
- 요소 나오는 순서
- 나중에 작성한 마크업이 순차적으로 앞으로 나온다
- 마크업 순서와 상관 없이 앞으로 나오게 하려면
position이static이 아닌 값을 준다 - z-index
-
위치 이동
- Negative Margins (차지하는 공간이 달라지면서 부수적으로 위치가 이동된 것이다)
trasform: translate();position
-
position: absolute;
left: auto;, top: auto; (초기값)
값을 안 주면 그 자리에서 뜨기만 한다
left: 0;, top: 0;
조상에 relative가 없으면 뷰포트(body X) 좌상단으로 이동한다
containing block이 뷰포트인 것이다
부모에게 position이 static 아닌 값을 넣어주면 그 부모가 새로운 containing block이 된다
가운데 정렬
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* inset: 0;*/
width: 100px;
height: 100px;
margin: auto;
<div>에position: absolute;를 주면 컨테이닝 블록이 제공하던 너비를 최대로 쓰지 않고 최소화가 되기 때문에 너비값이 텍스트 양만큼으로 줄어든다(inline 요소가 된 것이 아니다)
너비가 최소화가 되어야left든,right든 자유로운 이동이 가능할테니 합리적인 변화라 볼 수 있다
left: 0; right: 0;하였을 때 비로소 컨테이닝 블록이 제공하는 너비를 자동으로 모두 쓸 수 있게 된다
width값을 주면 오른쪽 여백이 사용가능한 공간이 되면서margin: 0 auto;를 사용할 수 있다
left: 0;만 주면margin:0 auto;가 적용되지 않는다
top:0; bottom:0;하면 컨테이닝 블록이 제공하는 높이만큼 늘어난다
left:0; right:0; top:0; bottom:0;하면 컨테이닝 블록을 가득채운다
단축 속성inset: 0;, 음수도 가능
- pseudo element
진짜로 마크업에 추가된 것은 아니다
자식 요소로 들어간다
- flex
inline-block, float 가로정렬 되는 요소에 준다
flex 가로정렬 되는 요소의 부모 요소에 준다
Flex Container
Flex Items
margin: auto;를 사용해서도 정렬할 수 있다
flex-basis: auto;(초기값)
자식 요소의 콘텐츠 크기만큼 너비를 가진다
flex-grow: 0;(초기값)
flex-grow: 1;
value(ex. 0, 1) : 비율
사용가능한 공간을 value 비율로 나눠준다
flex-basis에 flex-grow가 더해진다
전체 요소에flex-grow: 1;준다고 해서 무조건 n등분되는 것이 아니다. flex-basis 값을 인지하고 있어야 한다.
flex-shrink: 1;(초기값)
나머지 공간이 1 비율씩 줄어든다
flex-shrink: 0;
flex-basis 값을 보장한다
자식요소가 작은 너비라면 문제가 없지만 flex-container를 벗어 날 수 있는 크기가 된다면 flex items가 flex container 바깥으로 나가버리는 현상 발생하는 이유
flex-items의min-width초기값은auto이며 각각의 하위 자식 요소 크기로 결정된다
min-width: auto;는 flex-items의 자식 너비를 절대 작아질 수 없는 최소 사이즈로 강제하고 있다
자식의 너비보다 작아질 수 없게 막고 있다
min-width: 0;하면 콘텐츠는 삐져나가도 아이템은 컨테이너 안에 다 들어간다
flex-basis: 0;해도 0이 되지 않고 자식 요소 콘텐츠 크기만큼 너비를 가진다
min-width: auto;때문에 콘텐츠 크기만큼 최종 width 값이 강제된다
flex-basis: 0; min-width: 0; flex-grow: 1;
-> 균등하게 n등분 된다
자식 하나가 커지면 부모가 커짐
부모가 커지면 자식들이 같이 커짐
∵align-items: normal;(stretch와 거의 비슷)이 초기값이기 때문
min-width: auto;, min-width: 0;로 flex에서 헷갈렸던 것들이 정리되는 느낌이었다..! 종찬님 짱짱👍🏻👍🏻
