기술을 뜯고, 사고를 담다.

3 분 소요

🚩시작하면서

프론트엔드 개발을 하면서 느꼈던 것이 기초의 부재라고 생각합니다.

요즘 바이브코딩으로 AI와 함께하는 빠른 코딩이 주를 이루고 있고 저도 실제로 많이 사용하는데요.

이게 가끔은 제게 독으로 느껴질 때가 있습니다.

HTML/CSS, JS를 처음 접한지도 거의 9년이 다 되어갑니다. 그 당시 배웠던 문법과 사용법 언어들이 달라진 것들도 많고 사용하지 않은 만큼 머릿속에서 지워진 것들도 많아 아직 뼈대가 잡히지않은 느낌입니다.

그래서 AI도 잘 활용하고, 책도 활용하면서 제게 필요한 지식과 기초를 쌓는 시간을 오래 길게 가져보려고 합니다.

Frontend UX Enginer를 위하여, 크게는 5단계로 계획을 세웠습니다.

  1. React + TypeScript 능숙
  2. UI/UX에 대한 이해 (HIG, Material, Web Accessibility, Web Standard 포함)
  3. 고성능 컴포넌트 최적화
  4. 애니메이션 라이브러리 (Framer-motion, GSAP)
  5. 디자인 툴 활용 경험 (Figma, Sketch 등)
  6. 시스템화/라이브러리화 능력 (재사용 가능한 패턴 설계)
  7. 오픈소스 경험 (선택사항이지만 강력한 어필 포인트)
  8. 주도적인 문제 해결 능력

이 과정이 잘 뜯어보고 제것으로 만들 수 있는 기회가 되었으면 좋겠습니다.

1주차는 HTML과 CSS 기반을 다져볼 겁니다.

시멘틱태그와 접근성을 위한 속성들 그리고 Form 구성요소 등을 구현하고 정리하면서 제것으로 만들겠습니다.

👑HTML

HTML이란 무엇일까?

HTML(HyperText Markup Language)는 하이퍼 텍스트 마크업 언어라는 뜻입니다. 그렇다면 하이퍼 텍스트란 무엇일까요. 하이퍼텍스트는 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능을 말합니다.

마크업이란 태그를 사용해서 문서에서 어느 부분이 제목인지 본문인지 그리고 사진인지 링크인지 표시하는 것들을 말합니다.

구역을 구별하여 웹을 설계하고 링크등을 통해서 다른 문서나 사이트로 이동할 수 있는 언어를 가지고 우리는 화면을 구현하는 겁니다.

[출처]HTML5 + CSS3 표준의 정석

웹 표준이란 무엇이고 왜 사용할까?

다양한 브라우저들이 존재하는데 브라우저들마다 규칙과 표준이 다르다면 브라우저에 맞춰서 같은 결과를 내는 다른 코드들을 준비해야합니다.

➡️그래서 웹 표준은 이런 문제를 해결하기 위해 등장했습니다.

웹 표준을 지켜서 사이트를 제작한다면 일반 사용자는 장소나 브라우저와는 상관없이 같은 화면을 볼 수 있고 개발자들은 여러번 개발해야하는 수고를 덜게 되는 것이죠.

HTML 기본 문서 구조

태그를 사용하는 것이 SEO에 중요하다고 알려져있습니다. 위 설명을 보니 tag를 사용하여 구현하는 것이 웹 사이트의 구역, 혹은 전체적인 뼈대를 보여주는 부분이라고 보여집니다.

  • 태그는 <와>를 이용해 구분
  • 태그는 소문자로 사용
  • 여는 태그와 닫는 태그를 정확히 입력
  • 들여쓰기 등으로 가독성 ⬆️
  • 태그는 속성과 함께 사용할 수 있음
  • 포함관계 명확하게

👁️HTML 기본 문서 구조 살펴보기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset = "UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie-edge">
        <title>HTML 공부하기</title>
    </head>
    <body>
        <h1>
            이것은 제목입니다.
        </h1>
        <p>이것은 본문입니다.<br>
        이것은 본문2입니다.
        </p>
        <img src="image/first.jpg">
    </body>
</html>

  1. <!DOCTYPE html>: 현재 문서가 HTML5언어로 작성됨

  2. <html></html>: 웹 문서의 시작과 끝을 나타내는 태그로 웹 브라우저가 이 태그를 만나면 소스를 일겅 HTML문법에 맞춰 브라우저에 표시

  3. <head></head>: 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분

    ➡️ 실제 브라우저에 표시 ❌

  4. <body></body>: 실제 브라우저 화면에 나타날 부분

✍️텍스트 관련 태그

<hn>태그 - 제목 표시하기

제목 텍스트는 일반 텍스트보다 굵고 진한 표시.

<p> 태그 - 단락

텍스트를 표시할 때, 단락을 나눌때 가장 많이 사용하는 태그가 p태그

Paragraph의 줄임말

<p></p>태그로 감싸서 표시하는 텍스트 단락은 줄바꿈 없이 한 줄로 표시하는 데, 텍스트 줄이 브라우저 창 너비보다 길어지면 줄이 자동으로 바뀜

<br> 태그 - 줄바꿈

텍스트 단락에서는 줄 바꿈을 해도 적용이 안된는데, <br>태그를 사용해서 줄을 바꿉니다.

<hr>태그 - 수평 줄

hotizontal의 줄임말로, 수평 줄 삽입 할 때 사용.

<blockquote>태그 - 인용문

글을 인용하는 경우에 <blockquote>태그를 이용해서 표시

다른 텍스트보다 안으로 들여 써지므로 다른 텍스트랑 구별됩니다.

<pre>태그 - 입력하느 그대로 화면 표시

<pre>태그를 사용하면, 소스에 표시한 공백이 브라우저에 그대로 표시

<pre>태그를 사용할 때는 접근성에 대해 고려했습니다.
책에서는 웹 문서를 소리나, 점자로 읽어주는 기계는 이 태그를 건너뛴다고 하는데, 최근 웹 기술 및 보조기기(스크린 리더) 기준에서 <pre>태그 자체를 건너뛰는 일은 일반적으로 없다고 합니다.
다만 어떻게 <pre>안의 내용을 작성했는지, 그리고 어떤 보조 기술과 환경인지에 따라 접근성 차이는 존재합니다

텍스트 효과 태그

  • <b></b>: 굵게

  • <i></i>, <em></em>: 이탤릭체

  • <q></q>: 인용

    다만 <blockquote>태그와 다른 점은 블록레벨이 아니라 인라인레벨 태그여서 줄바꿈 없이 다른 내용과 함께 한 줄로 표시

  • <mark></mark>: 형광펜 효과

  • <span> - 줄바꿈 없이 영역 묶기

    줄바꿈 없이 일부 텍스트만 묶어서 스타일 적용하려고 할 때

🤔생각하기

오늘은 잠깐 훑어보는 시간을 가졌습니다.

HTML/CSS JS를 3주에 걸쳐 달려보려고 합니다. 물론 잘 아는 내용들은 건너뛰거나 정리하지 않고 넘겨야겠죠.

평소 화면을 구현할때, <div> ,<span>, <button>, <image>정도의 태그만 사용하고 있는 것 같은데, 실제 현업에서 좋은 디자인 시스템과 잘 정리된 화면을 가지고 있는 브랜드는 이를 어떻게 사용하고 있는가 공부하면 도움이 많이 될 것 같습니다.

제가 대기업이라고 불리는, 혹은 유니콘이라고 불리는 IT회사에 다니고 계신 개발자분들과 이야기해봤을 때, 생각하는 방식이 달랐습니다.

공통적으로 그분들이 가지고 있는것은 바로 왜?라는 질문의 빈도입니다.

그냥은 없는 것이죠. 그리고 진지하게 고민합니다. 이게 필요한가? 왜 필요한 것인가? 다른 방법은 없는가?

저도 무조건 말고 질문을 하고 스스로 나름의 답변을 할 수 있는 개발자가 되고자 합니다.

나는 왜 이것을 공부하려고 하는것일까?

➡️ 스스로 개발을 하며 부실한 코드, 혹은 나도 왜 이렇게 하고 있는지 모르는 남의 스타일의 코드를 치고 있기에 기초를 알고 적어도 내가 선택하여 사용하고 생각하여 사용하고 싶기 때문에 공부합니다.

아자아자!

카테고리:

업데이트:

댓글남기기

참고