우리 fisa 2기 '클라우드 서비스 개발' 23주차

이제 2주 남았나 ??

 

정말이야 ?

 

진짜야 ?

 

내 나이 ㅋㅋ ㅠㅜㅠ

 

---

일상 얘기

 

 

이 번 주 부터 본격적으로 더워지기 시작한 듯 하다. 

 

어후 날씨가 정말로 후덥지근하더라구요 ..

 

제가 열이 많다보니 이런 날씨 너무 싫어 봄 가을 쵝오야 !!

 

 

두둥 ,.. 정처기 시험이 있던 이번 주 토요일

 

밤샘 한 번 해주고 시험치러 갔다 !!

 

근데 생각보다 문제 자체가 어려운 시험은 아니었던 것 같다. 그냥 얼만큼 암기 했냐?? 정도의 시험인 것을 체감하는 순간이었다.

 

요새 이리저리 바빠서 제대로 된 공부를 못했다. ㅠㅠ

 

그래서 그런지 조금 아쉬운 부분도 있었다. 

 

지금 살짝 턱걸이에 걸려 있는 상태인 것 같은데 .. 일단은 다음 시험도 준비할 생각이었기에 혹시 떨어져도 받아드릴 예정이다 ㅎㅎ ,,

 

그래도 알았잖아 ~~ 이 시험은 정말 크게 별거 아니라구 진짜 어려운 것은 따로 있다 !!

 

 

그렇게 밤이 되고 부산에 친구들이 기습으로 수원 놀러오겠다고 해서 만났다 !!

 

부산에서 올라오는데 수원에서만 놀기 아쉬워서 서울로 오라고 했다.

 

그렇게 남자 셋이서 "ㅋㅋ 우리가 서울에서 놀고 있네 ~~" 라고 하며 ㅋㅋ 신기해 했었다 ㅋㅋ

 

앞으로 더 그럴거야 ~~

 

 

그리고 수원에 와서 다시 한 잔 ㅎㅎ ,,

 

우리의 식성은 진짜 엄청난거 같다 ㅋㅋㅋㅋㅋㅋㅋ

 

 

이번 주는 프로젝트에서 대대적인 UI/UX 변화가 있었다 ㅋㅋ

 

막상 만들고 우리팀과 합쳐보니 마음에 너무 안 들었다..

 

엄청난 스트레스가 있었다.

 

머릿속에 시간을 계산해봤다..

 

가능한가 ??

 

근데 뭐든 간에 후회보다는 바로 실천이다.

 

실천했다.

 

 

 

하나를 예를 들면 이렇게 변화시켰다. 다른 부분도 크게 변화시켰다.

 

그래도 이전에 한 번 삽질을 열심히 해서 그런지 금방 만들었다 ㅎㅎ

 

물론 아직까지는 완벽하지 않다.

 

그렇지만 성장한 이 과정이 정말 중요한 경험이었던 것 같다.

 

지금 전체적인 변화를 마무리하고 반응형으로 모바일 버전을 만들어 가고 있다.

 

다음 주 부터 본격적으로 구현을 할 텐데 잘 되었으면 한다 ㅋㅋ

 

---

공부 얘기

1. 이번 주 배운 것

 

이 번 주는 반응형에 대해 또 다른 발견이 있었다.

 

hidden에 대해 공부하다가 display 속성 inline, block, inline-block 에 대해 알게 되는 계기가 되었다.

 

1.  hidden md:flex md:block

 

<div className="hidden md:flex justify-center items-center h-[300px] w-[1000px]">

 

hidden은 요소를 숨겨주는 명령어이다.

 

md는 768px 이상일 때 적용하는 명령어이다.

 

즉, 768px 이상이 되면 md에 적용한 명령어 들이 적용 되는 것이다.

 

이와 같은 논리로 hidden 이어서 숨겨졌다가 md:flex 또는 md:block 으로 hidden 명령어가 덮히게 된다.

 

2. display 속성 inline 과 block

1. Inline

inline이란 말 그대로 Inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.

 

대표적인 Inline 엘리먼트로 span이나 a, em 태그 등을 들 수 있다.

 

inline 엘리먼트는 width와 height 속성을 지정해도 효과가 적용되지 않는다.

-> 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문이다.

또한 , margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.

마크업 언어: 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종이다.

 

2. block

block이란 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻이다.

따라서 display 속성이 block으로 지정된 엘리먼트는 전 후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.

 

대표적인 HTML element는 block 요소로, header, footer, p, li, table, div, h1 등이 있다.

 

block 엘리먼트는 Inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 된다.

 

3. inline-block

display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 한 줄에 다른 엘리먼트들과 배치된다.

하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해진다.

 

즉, inline 의 성질을 가지면서 동시에 사용자가 원하는 대로 모형을 꾸밀 수 있다.

 

이를 활용하여 반응형 UI/UX를 조금 더 효율적으로 다룰 수 있게 되었다.

 

 

2. 이번 주 시행착오

 

이번 주 시행착오는 정처기 시험이 있는 한 주 ㅋㅋ 그리고 ui/ux의 대규모 변경이었다. 정보처리기사야 곧 다시 따면 된다고 하지만

프로젝트는 어떻게보면 기간이 정해져있기 때문에 더욱 스트레스 였다 ㅎㅎ..

 

하지만 어쩌겠어 해내야지 !!

 

그리고 아무생각없이 대규모 디자인 변경에 몰입했다. 그리고 완성했다 ㅋㅋㅋ 참 사람의 능력은 끝도 없다.

 

위기에 봉착하면 다 한다 이거야 ~

 

물론 이전에 삽질한 것들이 도움이 되어서 금방 고칠 수 있었다.

 

앞으로 모바일 그리고 연결 그리고 배포까지 아직 많이 남았다. 제대로 해보자

 

 

3. 앞으로 어디에 적용

 

지금하고 있는 시행착오들 회사에 취직하고도 많은 도움이 될 것이라고 생각한다. 

 

안 된다고 생각하기 전에 그리고 많은 생각을 하기보다는 우선 실천하고 어떻게든 해보겠다는 자세

 

정말 중요하다고 생각한다. 

 

실천해라 ~ 이상하게 실천을 하게 되면 실패 확률이 오히려 많이 낮아진다.

 

 

 

4. 현재까지의 학습 평가 및 다음 학습을 위한 다짐/목표

 

-프론트앤드-

엄청 공부하고 있는 요즘 더욱 잘 만드는 사람이 되기 위해서 최선을 다할 것이다. 그러기 위해서는 기초도 매우 중요하다고 생각한다. 기초 역시 간파하고 있는 인재로서 성장해보자.

 

-백앤드-

다음 주면 백앤드도 본격으로 뛰어들 예정인데 복습 열심히 해보자.

 

-코테-

우선 정처기가 끝났으니 이제 공부시간 확보이다. 다시 달려봅시다.

 

-이력서-

기업도 다시 한 번 쭉 넣어보고 면접 다니자 !!!

 

-프로젝트 -

우리팀을 최고의 팀으로 최선을 다할 것이다.

 

-기술 블로그-

꾸준히 작성하자 남들에게 보여주는 것이 아닌 나에게 도움이 많이 되는 블로그로

 

24주차도 화이팅 해보자 ☀️