한 축(주로 가로 또는 세로)을 기준으로 요소를 정렬하는 데에 적합한 속성이다. 주로 단일 차원의 레이아웃을 구성하고자 할 때 사용된다.

FLEXBOX 특징

한 축(메인 축)을 기준으로 요소를 배치할 수 있다. 유연한 크기 조정이 가능하며, 요소의 순서를 바꿀 수 있다. 부모 요소에 적용하여 자식 요소를 정렬하는데 사용된다. 반응형 레이아웃을 만들기에 용이하다.

적합한 사용사례

작은 규모의 레이아웃을 만들고자 할 때 유용하다. 요소를 가로 또는 세로로 정렬하고자 할 때 적합하다. 복잡한 그리드 시스템이 필요하지 않은 단순한 레이아웃 구성에 적합하다.

FLEX의 유연한 특징으로 인해 레이아웃을 만들 때 자주 사용하는 것 같다. 특히 적합한 사례에 나와있듯이 요소를 정렬할 때는 필수적으로 사용하는 것 같다.

GRID는 어떠할 때 사용되어질까? 🤔

Grid는 2차원 그리드 시스템을 구성하는 데에 적합한 속성이다. FLEX와 달리 복잡한 레이아웃을 구성하고자 할 때 사용된다.

GRID 특징

행과 열로 이루어진 2차원 그리드를 생성할 수 있다. 요소의 위치를 지정하기 위해 행(row)과 열(column)의 번호를 사용한다. 요소의 크기와 간격을 지정할 수 있다. 반응형 레이아웃을 만들기에 용이하다.

적합한 사용 사례

복잡한 그리드 기반의 레이아웃을 구성하고자 할 때 유용하다. 요소를 정렬하고 배치하기 위해 행과 열을 사용하고자 할 때 적합하다. 다양한 크기의 그리드 셀을 가진 대시보드나 마법사와 같은 인터페이스를 구성할 때 유용하다.

📌 요약

Flexbox는 단일 축을 기준으로 요소를 배치하고 정렬하는 데에 적합하며, 작은 규모의 레이아웃을 만들 때 유용하다. 반면, Grid는 2차원 그리드 시스템을 구성하고 복잡한 레이아웃을 만들 때 유용하며, 행과 열을 사용하여 요소를 정렬하고 배치하는데 적합하다. Flexbox는 주로 단순한 레이아웃을 구성할 때 사용되고, Grid는 복잡한 레이아웃을 다룰 때 유용하다.

하지만, Flexbox와 Grid는 상호보완적인 속성이기도 하다. 즉, 두 가지를 혼합하여 사용할 수도 있다. 예를 들어, 부모 요소에 Grid를 적용하여 그리드 레이아웃을 구성하고, 그리드 셀 내부에 Flexbox를 사용하여 내부 요소를 정렬할 수 있다.

무엇을 사용할지 결정하기 위해서는 레이아웃의 복잡성과 요구 사항을 고려해야 한다. 간단한 수평 또는 수직 정렬이 필요한 경우에는 Flexbox가 적합하며, 복잡한 그리드 기반의 레이아웃을 구성하거나 요소의 위치를 자세히 제어해야 할 때에는 Grid가 더 적합하다.

Flexbox와 Grid 각각의 장점과 적합한 사용 사례를 이해하고 적절하게 조합한다면 웹 페이지 레이아웃을 더욱 짜임새있게 만들 수 있을 것이다.

반응형 웹 디자인에서 왜 rem단위를 사용할까?

rem 단위는 root 요소의 폰트 크기에 상대적으로 크기가 결정되는데, root 요소의 폰트 크기는 뷰포트 크기에 따라 변경되고 모든 요소의 크기가 비례적으로 조정된다. 이에 따라 각 요소에 대해 별도로 미디어 쿼리를 작성할 필요 없이 모든 요소가 자동으로 적절한 크기로 조정되어 디바이스 간 일관성 있는 사용자 경험을 제공할 수 있다. 또한, 사용자가 브라우저의 폰트 크기를 조정할 수 있기 때문에 접근성 측면에서도 유리하다. 즉, 코드의 유지보수성과 접근성 측면을 개선할 수 있다.

그렇다면 미디어쿼리를 어떻게 최소화할까?

1. 뷰포트 단위 사용하기

rem, em, vw, vh 등 뷰포트 단위를 사용하면 미디어쿼리를 사용하는 것보다 더 유연한 반응형 웹사이트를 만들 수 있다. 예를 들어, 폰트 크기를 rem으로 설정하면 브라우저 크기가 변경될 때 폰트 크기도 함께 조정된다.

/* 폰트 크기를 rem으로 설정 */
body {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  /* 뷰포트 너비가 768px 이상일 때 */
  body {
    font-size: 18px;
  }

  h1 {
    font-size: 2.5rem;
  }
}

2. 미디어 쿼리를 모듈화하기

미디어 쿼리를 모듈화하는 것을 통해 웹사이트의 레이아웃을 변경할 때 필요한 미디어 쿼리만 추가하면 된다. 이렇게 하면 불필요한 미디어 쿼리를 제거하여 웹사이트의 성능을 향상시킬 수 있다.

/* 모듈화된 미디어 쿼리 */
/* 브라우저 너비가 768px 이하일 때 */
@media (max-width: 768px) {
  .main-nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }
}

/* 브라우저 너비가 768px 이상일 때 */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
  }

  .menu-toggle {
    display: none;
  }
}

3. 최소한의 미디어 쿼리 사용하기

모바일 기기에서 보여지는 콘텐츠와 데스크톱에서 보여지는 콘텐츠를 구분하는 데 필요한 최소한의 미디어 쿼리만 사용하는 것이 좋다. 이렇게 하면 웹사이트의 로딩 시간이 줄어들며 코드 유지 보수도 쉬워진다.

/* 모바일 기기용 스타일 */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* 데스크톱용 스타일 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
}

4. 미디어 쿼리 중첩 피하기

미디어 쿼리를 중첩하는 것은 코드를 복잡하게 만들 수 있다. 가능하면 중첩된 미디어 쿼리를 피하고 단일 미디어 쿼리로 대체하는 것이 좋다.

/* 중첩된 미디어 쿼리를 사용한 예 */
@media (min-width: 768px) {
  .header {
    padding-top: 2rem;
    padding-bottom: 2rem;

    /* 브라우저 너비가 1024px 이하일 때 */
    @media (max-width: 1024px) {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
  }
}

/* 중첩된 미디어 쿼리를 사용하지 않은 예 */
@media (min-width: 768px) and (max-width: 1024px) {
  .header {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1025px) {
  .header {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

5. 미디어 쿼리 범위 결합하기

미디어 쿼리를 결합하여 불필요한 코드를 제거하는 것이 좋다. 예를 들어, 미디어 쿼리를 결합하여 768px 이상과 1024px 이하의 모든 해상도에 대한 스타일을 적용할 수 있다.

/* 미디어 쿼리를 결합한 예 */
/* 브라우저 너비가 768px 이상 1024px 이하일 때 */
@media (min-width: 768px) and (max-width: 1024px) {
  .main-nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }
}

📍 이러한 방법을 활용하여 미디어 쿼리를 최소화하면 웹사이트의 성능을 향상시키고 유지 보수성을 높여 코드를 더 쉽게 수정하고 유지할 수 있게 해준다.

3D 변환을 사용하는 이유는 하드웨어 가속을 통해 더 빠르게 애니메이션을 처리할 수 있기 때문이다. 3D 변환은 GPU 가속을 이용하여 렌더링되며, 이는 CPU가 처리하는 것보다 훨씬 빠르다. 따라서 3D 변환을 사용하면 부드러운 애니메이션을 구현할 수 있으며, 성능도 향상된다.

📌 animation 사용할 때 css로 최적화하는 방법

CSS 기반 최적화는 애니메이션을 구현할 때 CSS 속성을 최적화하여 성능을 향상시키는 기술이다.

1. GPU 가속을 활용하는 CSS 속성 사용

GPU 가속은 3D 변환에서 사용되지만, 일부 CSS 속성도 GPU 가속을 지원한다. 이러한 속성은 변환, 투명도, 그림자 등이 있다. GPU 가속은 애니메이션 처리에 필요한 작업을 GPU에 할당하여 성능을 향상시키는 방법이다. 이를 위해서는, 요소에 transform 속성을 적용하고, 애니메이션을 처리할 때 translateZ() 값을 사용해야한다.

.element {
  transform: translateZ(0);
}

2. will-change 사용

will-change 속성은 브라우저에게 요소가 변경될 것임을 알리고, 변경될 요소를 브라우저가 최적화할 수 있도록 한다. 이를 통해 애니메이션 처리에 필요한 리소스를 미리 할당하여 성능을 향상시킬 수 있다.

.element {
  will-change: transform;
}

3. translate3d() 사용

transform 속성은 다양한 2D 및 3D 변환을 지원하지만, 이러한 다양성은 불필요한 계산을 초래할 수 있다. 따라서 필요한 단일 변환만 사용하는 것이 좋다. translate3d()는 3D 변환을 지원하며, 하드웨어 가속을 사용하여 애니메이션을 부드럽게 처리한다. translate3d()를 사용하면, X, Y 및 Z 축에 대해 이동할 수 있다.

.element {
  transform: translate3d(0, 0, 0);
}

4. requestAnimationFrame 사용

requestAnimationFrame은 브라우저에서 제공하는 API 중 하나로, 애니메이션을 부드럽게 처리할 수 있도록 도와준다. 이 API는 브라우저가 다음 리페인트를 그릴 때마다 자동으로 호출되며, 브라우저의 최적화된 애니메이션 처리 시스템을 활용하여 성능을 최적화한다. requestAnimationFrame을 사용하면, 브라우저의 다른 탭에서 작동하는 애니메이션이나 스크롤 이벤트에 대한 처리를 고려할 필요 없이, 현재 탭의 애니메이션 처리에만 집중할 수 있다. 이를 통해, 더욱 부드러운 애니메이션을 구현할 수 있다.

function animate() {
  requestAnimationFrame(animate);
  // 애니메이션 처리 로직
}

animate(); // 애니메이션 시작

5. 애니메이션 속성 최소화

애니메이션을 처리할 때 필요한 속성을 최소화하는 것이 중요하다. 이를 위해서는, 애니메이션 처리에 필요한 속성만 사용해야 하며, 다른 속성은 최소화해야 한다.

.element {
  transition: transform 0.3s ease-in-out;
}

사용자의 컴퓨터나 디바이스에 미리 설치된 폰트를 의미한다. 사용자는 로컬 폰트를 이용하여 웹 페이지에서 텍스트를 보거나 인쇄물을 제작할 수 있다. 예를 들어, "Arial"이나 "Times New Roman"과 같은 폰트들은 대부분의 컴퓨터나 디바이스에서 기본적으로 제공되는 로컬 폰트이다.

웹 폰트(Web Font)

인터넷을 통해 다운로드하여 사용하는 폰트이다. 웹 페이지에서 사용하는 특정 폰트가 로컬 폰트에 없을 경우 이를 대신하여 사용할 수 있다. 웹 폰트를 사용하면 디자인적 자유도가 높아진다. 또한 웹 폰트를 사용하면 폰트의 일관성을 유지할 수 있다. 대표적으로 Google Fonts, Adobe Fonts, Font Squirrel 등이 있다.

웹 페이지에서 폰트를 로딩하는 방법

<link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin>

 @font-face {
  font-family: "MyWebFont";
  src: url("myfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "MyWebFont";
  src: url("myfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

📍 preload와 font-display 속성을 적절히 사용하면 웹 페이지의 렌더링 성능을 향상시키는 데 가장 효과적이다.

웹 폰트만 로딩해야하는 상황에서 최적화 기법

📍 최적화 기법들을 적절하게 활용하면 웹 페이지의 폰트 로딩 성능을 향상시킬 수 있다.

여러 가지 브라우저에서 동일한 사용자 경험을 제공하기 위한 작업

크로스 브라우징 문제점

1. 브라우저 호환성 각 브라우저마다 HTML, CSS, JavaScript를 해석하는 방식이 다르기 때문에, 특정 기능이나 디자인이 다른 브라우저에서는 제대로 작동하지 않을 수 있다.

2. 버전 관리 각 브라우저마다 여러 버전이 있고, 각 버전마다 동작하는 방식이 다를 수 있어, 이를 모두 고려하여 구현하려면 많은 노력이 필요하다.

3. 개발 비용 크로스브라우징을 구현하는 것은 개발 비용을 증가시키는 요소 중 하나인데, 여러 브라우저에서 동일한 기능이나 디자인을 구현하기 위해 추가적인 코드 작성과 테스트가 필요하기 때문이다.

4. 시간적 제약 크로스브라우징을 구현하는 것은 당연히 시간적 제약이 따른다. 각 브라우저에서 동일한 기능이나 디자인을 구현하기 위해 추가적인 코드 작성과 테스트를 진행해야 하기 때문인데, 이러한 과정은 개발 기간을 연장시키거나 출시일을 지연시키는 결과를 초래할 수 있다.

5. 유지보수 크로스브라우징을 구현한 이후에도, 브라우저의 업데이트나 새로운 브라우저의 출시 등으로 인해 계속해서 유지보수가 필요하고, 이는 추가적인 개발 비용과 시간적 제약을 초래할 수 있다.

크로스 브라우징을 해야하는 이유

📌 Safari 브라우저에서 크로스브라우징 하기

1. viewport meta tag 설정 Safari 브라우저는 viewport meta 태그를 사용하여 모바일 기기에서 웹 페이지가 표시되는 방법을 제어할 수 있다. 모바일 기기에서 레이아웃을 조정하는 데 필요한 viewport meta 태그를 설정해야한다.

<meta name="viewport" content="width=device-width, initial-scale=1">

이렇게 하면 페이지가 모바일 화면 크기에 맞게 조정된다.

2. CSS3 사용하기

CSS3를 사용하면 모바일 브라우저에서 디자인 및 레이아웃을 향상시킬 수 있다. 하지만 일부 오래된 브라우저는 CSS3를 지원하지 않을 수 있으므로 CSS3 기능을 사용하면서도 기본 기능을 제공해야 한다. 예를 들어, CSS3의 그림자 효과를 사용할 때 그림자 효과를 지원하지 않는 브라우저에서는 대체로 단색 배경을 사용할 수 있다.

3. Javascript 사용 최소화

Javascript는 Safari 브라우저에서 속도가 느리거나 일부 기기에서 작동하지 않을 수 있으므로 최소화하는 것이 좋다. Javascript가 필요한 경우에는 가능한 한 작고 간단한 스크립트를 사용하자.

4. CSS Prefixes

CSS Prefixes는 브라우저마다 공급업체 접두사를 추가하여 브라우저 호환성을 지원한다. 이것은 CSS 코드에 브라우저마다 다른 접두사를 적용하여 동일한 스타일을 모든 브라우저에서 동일하게 나타나게 한다.

5. Modernizr 사용

Modernizr는 기능 검사 라이브러리인데, 이 라이브러리는 현재 브라우저에서 사용 가능한 기능들을 감지하여 각 브라우저에서 지원하는 기능에 따라 서로 다른 코드를 작성할 수 있도록 한다.

6. W3C 표준 준수

웹 표준은 모든 브라우저에서 동일한 방식으로 웹 페이지를 렌더링하기 위한 규칙과 규격이다. W3C 표준을 준수하면 모든 브라우저에서 동일한 결과를 보장할 수 있다.

7. 브라우저 호환성 테스트

모든 브라우저에서 웹 페이지가 올바르게 작동하는지 확인하는 것이 중요하다. 브라우저 호환성 테스트를 수행하여 모든 기기에서 웹 페이지가 제대로 작동하는지 확인해야한다.

HTML5 시멘틱 태그는 웹 페이지의 구조와 내용을 명확하게 정의하는 데 도움을 주며, 검색 엔진 최적화(SEO)와 웹 접근성에도 중요한 역할을 한다.또한 웹 표준을 준수하여 크로스 브라우징이나 호환성 문제를 최소화할 수 있다.

그렇다면 왜 시멘틱 태그를 사용하는 것일까?

시멘틱 태그 종류

w3schools header

nav

section

article

footer

웹 표준을 지키는 이유

웹 표준(Web Standards)이란?

웹 표준이 중요한 이유

웹 표준을 지키는 이유

• 호환성 문제 최소화: 웹 표준을 준수하면 모든 브라우저에서 웹 페이지가 일관된 방식으로 동작한다. 이를 통해 크로스 브라우징이나 호환성 문제를 최소화할 수 있다.
• 개발 생산성 향상: 웹 표준을 준수하면 다른 개발자들과 협업하기 쉬워지는데, 웹 페이지를 개발할 때 필요한 기능들이 미리 정의되어 있어, 개발 생산성이 향상된다.
• 보안 강화: 웹 표준을 준수하면 보안에 대한 이슈를 사전에 예방할 수 있어서 보안을 강화하는 데에 큰 도움을 준다.

📍시멘틱 태그를 사용하고 웹 표준을 지키는 이유는 구조와 내용을 명확하게 정의하여 검색 환경을 최적화하고 유지 보수성 향상 및 보안을 강화시키는데 목적이 있다.

마무리

결론적으로, 시멘틱 태그를 사용하고 웹 표준을 지켜 품질을 향상시키는 것은 사용자들의 접근성과 만족도를 높이기 위함이라고 할 수 있다. 그렇기 때문에 개발을 하면서 항상 이 두가지를 염두에 두며 진행해야할 것이다.

프론트엔드 개발자란?

프론트엔드 개발자는 개발하는 웹 개발 영역 중 사용자가 눈으로 보는 영역을 구축하고, 기능을 구현하는 개발자를 말합니다.

프론트엔드에서 사용하는 메인 언어는 HTML, CSS, JAVASCRIPT 입니다.
HTML은 웹사이트의 구조를, CSS는 웹사이트가 표시되는 모습 즉 디자인을, 그리고 JAVASCRIPT는 웹페이지에 포함되어 있는 다양한 구성요소들의 동작을 변경할 수 있는 도구를 제공해줍니다.

프론트엔드 개발은 내가 구현한 것이 눈 앞에 바로 보인다는 특징이 있다.
이러한 특징과 직접 프로그래밍을 통해 디자인적 요소를 부여하기 때문에 하나의 작품을 만드는 작업이라고 생각한다. 그렇기 때문에 다른 개발자들보다 더욱 꼼꼼해야하고 세밀하게 프로그래밍을 해야한다. 평소에 집중을 하며 창작하는 것을 좋아하는 나에게는 프론트엔드 개발이 상당히 매력적으로 다가왔고 앞으로 공부를 하면서 다양한 개발을 해보고 싶다.

프론트엔드와 백엔드 개발자의 차이점

짧게 결론부터 말하자면 프론트엔드는 사용자 인터페이스, 즉 사용자가 보는 화면과 그 안에 있는 요소들을 개발한다면 백엔드는 사용자가 볼 수 없는 영역, 데이터베이스나 서버를 개발하고 관리한다는 차이점이 있다.
내가 좋아하는 축구에 비유하자면 프론트엔드 개발자는 경기장에서 뛰는 선수들이고 백엔드 개발자는 선수들이 자신이 설계한대로 뛰게끔 하는 전술을 개발하는 감독과 같다고 생각한다. 결국 이 둘은 각자 맡은 일이 다르지만 서로 상호보완적인 관계라고 볼 수 있다. 개발을 하면서 서로를 배척하기보다는 함께 도우고 의지하며 협력을 해야하는 존재가 아닐까 싶다.

HTML/CSS 공부하면서 어려웠던 개념과 이유

제로베이스 온라인 강의 중 가장 도움이 되었던 강의와 이유

나만의 공부팁

미션을 끝낸 후 앞으로의 각오와 다짐

"퍽이 있는 곳이 아니라, 퍽이 가야할 곳으로 움직인다" - 웨인 그레츠키

한달 간 공부하면서 여러 개인사정으로 인해 흐름이 끊기기도 했었고 그로 인해 게을러지기도 했었다. 하지만 이제는 마음을 다 잡았으니 앞으로 정진할 일만 남았다.
내가 좋아하는 어록 중 하나인 "퍽이 있는 곳이 아니라, 퍽이 가야할 곳으로 움직인다" 정신에 입각하여 개발자의 길에 들어왔으니 나만의 독창적인 방식으로 기나긴 마라톤을 끝내 웃으며 완주하리라 🏃🏻

• 여러 태그 중 원하는 태그를 선택하기위해 사용하는 선택자
• 예로들면 :hover :active 같은 클래스가 있습니다

section .button:hover{
    background-color: #0074e9;
    color: white;
    cursor: pointer;
}

:hover 클래스를 사용하면 버튼에 마우스를 갖다댔을 때 배경색과 기본 색상을 바꿀 수 있고 커서에 효과를 주는 등 다양한 상호작용 효과를 줄 수 있습니다.

가상요소

• 내용의 일부만 선택해 스타일을 적용할 때 사용함
• 가상클래스와 구분하기 위해 콜론 두개::를 붙여서 사용함
• 대표적으로 ::before ::after가 있음

<body>
  <h1>아이폰</h1>

이렇게 h1 태그로 마크업 되어있는 아이폰 앞,뒤에 기호를 넣어보겠습니다.

h1::before{
    content: "*";
}    

```css
h1::after{
    content: "-"
}

이런식으로 ::before와 ::after를 활용하여 원하는 부분에 기호 혹은 이미지를 넣을 수 있습니다. 그리고 css를 활용해서 기호를 넣으면 나중에 특수기호를 따로 제거해줘야하는 번거로움을 줄일 수 있어 좋습니다.

마무리

프론트엔드에 대해 항상 관심이 있었고 독학으로 공부를 하였지만 그 이후에는 어떻게 해야할지 감이 안잡혔었다. 그리고 학과 공부를 하다보니 온전히 개발공부에 집중하기 어려웠었고 프론트엔드 라는 존재는 잊혀져만 가고 있었다. 올해 대학교를 졸업한 후 비교적 자유의 몸이된 나는 생각해두었던 것을 실행에 옮기자 라는 생각을 하였고 그렇게 프론트엔드 공부를 시작하게 되었다. 내가 설정한 플랜대로 잘 따라가고 페이스를 잃지 않도록 하자.

🧑🏻‍💻 프론트엔드 개발자가 되기로 결심한 이유🧑🏻‍💻

교환학생 시절 친구들과 앱을 기획해보면서 자연스럽게 개발에 관심을 가지게 되었다. 작년부터 막연하게 혼자서 개발 공부를 시작하였고 그 첫 시작은 백엔드 공부였다. 그렇게 개발 분야에 대해 서서히 알아가던 중 프론트엔드 분야를 접하게 되었고 눈 앞에서 바로 구현이 되는 점에 큰 매력을 느꼈었다. 그리고 뭔가 개인적으로는 창작(?)을 한다는 생각에 멋있어보여서 더 끌리기도 했다. 그렇게 프론트엔드 개발자가 되기로 결심하였고 이제 최선을 다하는 일 밖에 안남았다.

📚 6개월간 학습 계획 📚

우선 내가 설정한 커리큘럼대로 잘 진행할 것이다. 뭐든 기본이 중요하다고 생각하기 떄문에 나중에 있을 프로젝트를 하기 전에 프로젝트에 필요한 기본기를 꼼꼼히 잘 다질 생각이다. 하루에 설정한 공부량은 다 완수하는 것이 목표이고 틈틈히 CS 공부를 하는 것도 놓치지 않을 것이다.

분명 학습을 하는데 있어서 어려움이 있겠지만 포기하지않고 끝까지 완수하는 것이 사실 제일 큰 목표이자 계획이다. 주어진 과제를 모두 잘 완수하여 더 발전된 내가 되었으면 좋겠다.