[TIL] Udemy 6일차 프론트엔드/백엔드 - 반응형 웹 디자인

강준호·2023년 12월 20일
개발부트캠프백엔드유데미유데미부트캠프유데미취업부트캠프유데미큐레이션프론트엔드

Udemy

목록 보기
7/44

데스크탑 vs 모바일

데스크탑

  • 최대 너비

최소넓이

  • 최소 너비

미디어 쿼리

  • 레이아웃과 모양을 다양한 장치에 맞게 조정하는 웹 페이지를 만들 수 있도록 하여 사이트가 데스크톱, 태블릿 또는 휴대폰에서 표시되는지 여부에 관계없이 최적의 사용자 경험을 보장합니다.

max-width

  • max-width보다 작은 경우 콘텐츠의 원래 크기가 사용됩니다. 콘텐츠가 더 큰 경우 'max-width' 값이 대신 사용됩니다.

  • "모바일 우선" 웹사이트를 디자인하는 데 사용

min - width

  • 최소 너비보다 큰 경우 콘텐츠의 기본 크기가 사용됩니다.
  • "데스크톱 우선" 웹사이트를 디자인하는 데 사용.
  • 더 큰 기기(데스크톱)에 대한 스타일 지정으로 시작한 다음 '최소 너비'와 함께 미디어 쿼리를 사용하여 더 작은 화면(예: 태블릿이나 휴대폰)에 맞게 디자인을 조정

사이드 바(햄버거 버튼)

    1. 버튼이 웹사이트가 모바일 화면일 때만 보여야하는것.
    1. 버튼을 클릭하면 사이드 바가 열림.
  • 3 . 햄버거 버튼을 다시 누르면 다시 nav 메뉴 사이드바가 닫히고 초기.

aside 태그

  • 내부의 내용은 문서의 본문으로 간주되지 않습니다.
  • 사이드바, 광고, "관련 기사" 링크 또는 기타 유형의 보충 콘텐츠가 포함

:target 이란

#side-drawer:target{
    display: block;
}

z-index

  • 특정 요소의 스택 순서를 설정하는 CSS 속성.
  • 더 큰 스택 순서를 가진 요소는 항상 더 낮은 스택 순서를 가진 요소 앞에 옵니다.
  • z-index' 값이 높은 요소가 'z-index' 값이 낮은 요소 앞에 렌더링됩니다.

웹페이지 만들기

팁

1. 전체적인 카드부터 만들기

  • 첫번째 카드를 만들고 컨텐츠를 생각

2. 전달되어야 하는 핵심정보

3. 적을 수록 좋다.

  • 시작할때는 최대한 많은 공간을 주기

보기 좋게 하는 세가지 속성

1. 폰트 유형

  • 무 많은 폰트 집합 사용하기 보다, 두개를 조합해서 사용하자.
  • 특정 영역에 다른 폰트 사용하지만 두께로 너무 강조하지는 말자.

2. 색상

  • 검정 보다는 회색이 훨씬 자연스럽다.
  • 주색상

CSS 변수

    --color-grey-100: rgb(236, 236, 236);
    background-color: var(--color-grey-100);
    
    --size-1 : 18px;

CSS 셀렉터

html 선택기

  • html 태그인 HTML 문서의 루트 요소를 대상으로 합니다.
  • 전체에 스타일을 적용할 때 사용
  • 이 선택기는 HTML 문서에만 적용되며 XML 또는 SVG에는 적용되지 않습니다.

'*'(범용 선택기):

  • 문서의 모든 요소를 선택합니다.
  • 여백, 패딩 또는 글꼴 모음과 같은 모든 요소에 대한 기본 스타일을 설정하는 데 자주 사용됩니다.
  • 범용 선택기는 DOM의 모든 단일 요소에 적용되므로 과도하게 사용하거나 복잡한 CSS 규칙과 함께 사용하면 성능에 영향을 미칠 수 있습니다.

:root 선택기:

  • 문서의 루트 요소를 나타냅니다. HTML에서는 html 선택기와 동일합니다.
  • 주로 CSS Variables(Custom Properties)와 결합하여 전역 변수를 정의하는 데 사용됩니다.
  • :root 선택기는 html 선택기에 비해 더 높은 특이도를 갖습니다.
  • 즉, :root와 html에 대해 동일한 속성을 정의하면 :root에 정의된 속성이 우선 적용됩니다.
  • html 선택기와 달리 :root는 XML이나 SVG와 같은 다른 유형의 문서에 적용 가능합니다.

정리

html

  • 특히 루트 HTML 요소용입니다.

*

  • 모든 요소를 대상으로 하며 이는 광범위한 전역 스타일에 유용하지만 성능이 떨어질 수 있습니다.

:root

  • html과 유사하지만 더 구체적이고 HTML이 아닌 문서에도 적용 가능합니다. 일반적으로 CSS 변수를 정의하는 데 사용됩니다.

CSS 변환과 전환

CSS 변환

  • CSS 시각적 서식 모델의 좌표 공간을 수정하는 데 사용됩니다.

  • 변환을 사용하면 2D 및 3D 공간 모두에서 요소를 회전, 크기 조정, 기울이기 및 이동(변환)할 수 있습니다.

transform: Rotate(30deg); - 요소를 30도 회전합니다.
transform: scale(1.5); - 요소의 크기를 1.5배 확대합니다.
transform:translate(100px, 50px); - 요소를 오른쪽으로 100픽셀, 아래로 50픽셀 이동합니다.
transform:skewX(20deg); - 요소를 X축을 따라 20도 기울입니다.
변환은 결합될 수 있습니다(예: 변형: 회전(30deg) 스케일(1.5);).

CSS 전환

  • 전환을 사용하면 마우스 오버나 포커스와 같은 상태 변경이 발생할 때마다 요소의 모양과 동작의 변경을 정의할 수 있습니다.

  • CSS 속성을 변경할 때 애니메이션 속도를 제어하는 방법을 제공합니다.

  • 구문에는 transition-property, transition-duration, transition-timing-function 및 transition-delay와 같은 속성이 포함됩니다.

transition: background-color 0.5seasy-in-out; - 'ease-in-out' 타이밍 기능을 사용하여 요소의 배경색을 0.5초에 걸쳐 원활하게 전환합니다.
여러 속성을 전환할 수 있습니다: 전환: 배경색 0.5초, 색상 0.5초;.
  • 전환은 :hover, :focus 등과 같은 사용자 상호작용에 의해 실행되는 경우가 많습니다.

메인인 변환(hover 색변환)에 + 전환(시간초 조절)을 주면 역동적인 애니메이션 가능!

SVG

  • 브라우저가 렌더링 할 수 있는 확장형 이미지의 텍스트 기반 묘사.
  • 품질 저하 없이 확장 가능한 이미지를 만들기 위해

사례

  • SVG의 일반적인 용도에는 로고, 아이콘, 그래프 및 복잡한 일러스트레이션이 포함됩니다

https://heroicons.com/

  • 미리 정의된 SVG 아이콘 사이트

웹 폼 Web Form

input type

  • 가장 다양한 형태의 요소입니다. type 속성에 따라 다양한 유형의 입력을 만들 수 있습니다.
  • 텍스트 필드(type="text")
  • 비밀번호(type="password")
  • 체크박스(type="checkbox")
  • 라디오 버튼(type="radio")
  • 파일 선택기(type="file")
  • 제출 버튼(type="submit") 등

input type="hidden"

  • 사용자가 보거나 상호 작용할 수 없는 숨겨진 입력을 만듭니다. 사용자가 변경할 수 없는 정보를 보내는 데 자주 사용됩니다.

textarea

  • 메시지, 댓글 등과 같은 긴 텍스트 입력에 적합

select, option

  • 이들은 함께 작동하여 드롭다운 목록을 만듭니다.
  • select는 목록을 정의하고
  • option 요소는 해당 목록 내에서 사용 가능한 옵션을 정의합니다.

button

  • 클릭 가능한 버튼을 만드는 데 사용됩니다. 양식 제출, 양식 재설정 또는 사용자 정의 JavaScript 기능에 사용할 수 있습니다.

멘토링 QnA

코딩테스트 결과로,채점 상 높은 점수 (즉, 높은 정확성과 효율성) vs (가독성 및 재사용성 측면에서) 높은 코드 퀄리티. (단, 비교적 낮은 점수)두명의 지원자의 코딩테스트 결과가 위와 같이 나왔고, 다른 모든 조건이 동일하다는 가정하에 한명만을 합격시켜야 한다면 누굴 뽑으실지 궁금합니다ㅎㅎ실제로 코딩 테스트에 응시하게 되면 시간적인 압박을 받을 때가 많은데요,당연히 위 두가지를 모두 갖추면 좋겠지만 우선적인 초점을 어디에 두고 준비하는 것이 좋을지 알고싶어서 질문을 드립니다.

  • 대부분 전자가 좋은 평가를 받아. 과제 평가인 경우에도 전자였어. 퀄리티에 집중한 사람은 나중에 입사 후에도 퀄리티때문에 일정을 못맞출거같아서 별로 안좋게 생각할거같아.

  • 보통 코딩테스트를 진행하실때 요구사항을 충족하면 점수가 같은데, 그것을 푸는 과정도 기록에 남기도 하고, 주석이나 알고리즘의 시간복잡도 이해한거. 주석으로 시간복잡도 써서, 알고리즘 테스트를 보는 힌트를 남기면 좋은 점수를 받을 수 있어.

신입 개발자와 경력 개발자를 뽑을 때의 주요 평가항목이 다를 것 같습니다.멘토님의 경험에서 신입 개발자를 뽑을 때 중점적으로 보았던 항목,경력 개발자를 뽑을 때 중점적으로 보았던 항목에 대해서 궁금합니다. 그리고 면접관의 입장을 많이 경험해보셨을 것 같은데, 가장 인상깊었던 지원자나 뽑고 싶지 않았던 지원자에 대한 멘토님의 생각과 그 이유에 대해서 알고 싶습니다.

  • 신입은 많이 늘거같은 사람을 뽑는경향이 있어. 지금 가진게 없더라도 습관,마인드셋, 노력, 고찰, 해결방법을 봤을때 이사람이 많이 늘것같다. 또 도울 수 있는 조직이다 가 포인트였어.

  • 경력자를 뽑을 때면, 이미 가진사람을 뽑아. 적응기간이 최대한 짧게 가져가려면 기술스택, 가치관, 성향이 일치해야해. 이런게 비슷한 사람을 뽑는 경향.

  • 5년차 정도면 도메인은 일치해야해. 기술스택도 반이나 최소 1~2년정도는 한 경험이 있어야 채용 가능성이 높아지는거같아.

  • 요약하면, 신입은 가르쳐줬을때 더 빨리 성장할 수 있는 사람을 뽑아. 이해력이 떨어지는 사람은 한번 설득할때 너무 힘들겠다라는 생각이 들어서 잘 뽑지는 않아.

  • 태도나 마인드, 이해력 논리력이 좋은 사람을 뽑아.

  • cs 기초도 사실 외우는게 아니라 원리를 깨닫고자 이해를 하는거야. 면접관이 평가를 쓸 때 센스가 있어야 주니어로서 성장을 잘할것같음이 보여.

  • 외우는 사람은 한계가 있어. 외우는 성향으로 성장한 사람들은 좋은 평가를 안주고있어. 외우다보면 응용력이 떨어지다보니..

  • 근거 기반의 사고를 노력해봐.

  • 경력개발자로 갈때는 그 회사에 니즈에 부합할 수록 좋은데, 어떠한 경험을 어떻게 승화시키는게 좋은데, 이걸 경력자는 이력서에 잘 안나타내, 오히려 신입이 이력서를 잘써오지.

  • 그래서 이러한 부분을 잘 드러내면 좋은 점수를 받을거야. 토스 뱅크에 지원한다고 하면 뱅킹 시뮬레이션 포폴을 만드는게 좋아. 기왕이면 내가 지원하는 회사에서 만들 제품, 만들 수 도 있을거같은 제품을 주제로 잡으면 가산점이 커. 토스 뱅크에서 쓸거같은 기능을 만들어왔습니다~ 등등.

  • 뱅킹의 경우 이체 기능을 만든다. 이체를 API 호출하고 응답을 받고 처리하는 과정을 구현한다.. 등, 노드를 잘다루는데 자바도 잘하는걸 어필하면, 자바 버전에서 이렇게 만들거고, 노드 버전에서 이렇게 만들것이고.. 등등

profile
강준호
이전 포스트

[TIL] Udemy 5일차 프론트엔드/백엔드 - HTML & CSS 레이아웃 및 포지셔닝 이해

다음 포스트

[TIL] Udemy 7일차 프론트엔드/백엔드 - Form 폼

0개의 댓글