Front-End Developer/HTML

웹 접근성(Accessible HTML) - 큰 깨달음..!!!

flex에 한참 빠져있던 나. 팀원과 토의 중 아래와 같은 문제에 봉착했다. flex를 이용해서 뷰포트의 정 중앙에 로고이미지가 있고 같은 수평선 라인 오른쪽 끝에 버튼 하나 는 어떻게 구현할 수 있을까? 음... justify-content 속성을 center로 주고 버튼만 밀어낼 수는 없다. 왜냐면 로고가 아닌 저 두 컨텐츠의 사이가 center가 되니까. justify-end속성을 주고 마진을 이용해 로고이미지를 마진으로 밀어내는방법? 하지만 마진계산을 어떻게 하느냐에 따라 반응형 웹 구현에 방해받을 수 있다. 같은 수평선 안에서 로고나 텍스트를 정렬해야하는 상황은 항상 있고 그 때마다 난관에 봉착하지만 또 어찌어찌 하다보면 되서 되는대로 넘어가게 되는 이런 악순환을 끊기 위해 멘토님께 질문을 드렸..

5살에게 가르치는 안헷갈리는 HTML table

목차 intro- table을 만들기 전에.. 1. tabel을 만드는 핵심 요소들 - 다른건 몰라도 이건 있어야 해 2.1 Table을 Semantic하게 만드는 요소 1 2.2 Table을 Semantic하게 만드는 요소 2 2.3 Table을 Semantic하게 만드는 요소 3 3. 헷갈리는 표 병합. 이것만 생각하자 4. 열 그룹을 묶기 위해 존재하는 태그 5. 이 밖의 이런저런 팁들 table을 만들기 전에... 은 표가 들어갈 '컨테이너'요소다. 그렇기 때문에 당신이 일단 표를 만들기로 마음을 먹었다면 table태그를 열고, 테이블을 만드는 여러 자식요소들을 담아주고, table을 닫아주면 된다. 일단 table을 열고 시작하자. 1. tabel을 만드는 핵심 요소들 - 다른건 몰라도 이건 있..

점진적 향상기법이란? / 이미지 포맷의 종류

점진적 향상기법 기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법. 예시 작동방법 웹 브라우저가 위에서부터 차례대로 내려오며 지원 가능한 포맷인지 탐색한다. (그래서 맨 위에게 가장 성능이 좋으며 효율적인 최신 기술임) 내려오며 지원 가능한 것을 택한다. 아무것도 지원하지 않을 경우, 기본 이미지를 택한다. (여기서의 babies.jpeg) 때문에 WebP나 AVIF 와 같은 최신 포맷의 이미지를 지원하고 싶다면 크로스브라우징을 위해 요소와 함께 사용 하는것이 좋다. 이미지 포맷의 종류 GIF(Graphics Interchange Format): 256색의 컬러만 표현 가능하기 때문에..

srcset attribute를 이용해서 반응형 이미지 만들기

무엇을? CSS media 쿼리가 아닌 HTML만을 이용하여 반응형 이미지를 만들어 보고 싶다. 일단 부모elements로 picture태그를 사용해준다. 그 밑에 source 태그를 사용하고, 그 안의 attrubute로 srcset으로 사진파일의 이름, media attribut로 min-width를 지정해준다. min-width는 최소 넓이로, 960px로 설정했다면 최소 넓이가 960px에 도달할 때 까지 srcset에 지정해준 사진을 사용해. 라는 뜻 화면 넓이가 960px에 도달할 때 까지는 > 과카몰리_600.JPG 사진이 나온다. 화면을 줄여 넓이가 620px에 닿을 때 까지는 > 과카몰리_400.JPG 사진이 나온다. 620보다 더 작아지면 > 기본 이미지로 설정해 둔 과카몰리_200.J..

Grouping Content

HTML 작성시 가장 중요한 것들 중 하나는 항상 그룹핑(박스모델 이라고도 한다.)을 잘 해야 한다는 건다. 이렇게 해야 하는 이유는 크게 두가지 이다. CSS styling시 가장 효율적인 방식으로 작업을 가능하게 하기 위해서. 각 태그가 가진 의미들로, Semantic HTML을 작성하기 위해서. header 보통 해당 페이지에서 가장 중요한 h1태그를 포함하는 경우가 많다. 보통 웹사이트에서 윗부분에 웹사이트의 이름, 검색창, nav 태그들과 함께 들어있다. 네이버로 예를 들면 아래 사진처럼 네이버 로고와 검색창, 아래 메뉴바들을 포함한 곳이 되겠다. nav 보통 웹페이지 header 안에서 메뉴바, 혹은 카테고리를 만들어주는게 가장 흔하게 사용되는 방식이다(이 외에도 여려군데서 쓰임) ul>li ..

What is HTML Living Standard?

HTML5이라고 우리가 흔히 부르는데, 엄밀히 말하면 그건 틀린말이다. 그건 W3C사에서 주관하는 HTML이 버전별로 나올 때 그렇게 불렀던 거고, 지금은 WHATWG사에서 주관하여 HTML Living Standard (살아있는 HTML, 버전별이 아니라 쭉 업데이트된다.)가 만들어지기 때문이다. W3C와 WHATWG의 오랜 싸움 이야기는 재밌는 역사이니 한번 찾아보기를.. 사람들은 이 전에 두 회사의 HTML 선택지가 있었을 때에도 항상 WHATWG사의 HTML을 추천했는데, 아래 WHATWG사의 majot contributer중 한 명인 개발자의 블로그 포스팅을 붙이니 참고. https://annevankesteren.nl/2016/01/film-at-11전쟁이 끝나고 지금은 통합되어서 WHATWG..