Skip to content

HTML

  • 사용자경험
    HTML 반응형 이미지 문법 가이드
    브라우저가 마법을 부리는 HTML 문법들에는 srcset, <picture>, w 설명자가 있습니다. srcset만으로도 같은 이미지를 다른 크기로 또 아예 다른 이미지로 제공할 수도 있지만, w 설명자와 sizes 특성을 함께 사용하면 브라우저가 더 적절한 선택을 할 수 있습니다. 반응형 이미지로 '성능 향상'과 '디자인 제어'라는 두 마리 토...
  • 코드
    디자이너는 어떻게 코드를 배우나?: Part Ⅱ
    지난 1부에서는 터미널의 기본을 알려주고, 코딩 시작을 위해 생산적인 팁과 코드 편집기 선택 요령에 대해 설명했습니다. 2부에서는 깃과 같은 버전 관리 시스템를 비롯해 HTML, CSS, 시맨틱 코드와 주요 엔지니어링에 대해 소개합니다.
  • 코드
    디자이너는 어떻게 코드를 배우나?: PartⅠ
    디자인이란 아름다운 목업을 만드는 과정이 아니다. 최종 사용자에게 직관적이고 잘 작동하는 경험을 전달해줄 수단을 만드는 작업이다. 사용자에게 최상의 경험을 제공할 최고의 디자인을 완성하기 위해서는 웹디자인의 원재료인 코드에 대해 알아야 한다. 코딩과 엔지니어링은 별개이다. 코딩은 작업에 필요한 프로그래밍 언어에 익숙해지는 것을 의미한다. 코딩을 통해 디자이...
  • 사용자경험
    접근성 좋은 SVG – 패턴을 넘어선 포용성
    SVG 접근성 측면에서 보면 우리는 큰 진전을 이뤘습니다. SVG의 접근성을 최적화하는 데 도움을 주는 견고한 패턴은 간단한 이미지 혹은 좀더 복잡한 이미지를 만들 때에도 적용할 수 있습니다. 대부분의 개발자나 디자이너는 실제 사용자가 필요로 하는 것보다 WCAG2.1을 준수하기 위한 코드에만 초점을 맞춥니다. SVG를 어떻게 만드느냐에 따라 사용자는 장치...
  • 코드
    <section> 버리고 HTML5 <article> 써야 하는 이유
    각 태그는 목적에 맞게 쓰여야 합니다. 제목을 표시할 때는 헤딩 태그를 〈h1〉, 〈h2〉··· 순차적으로 나열하는 구조여야 합니다. 같은 레벨의 〈h〉 태그에 〈section〉을 둘러싸서 제목 크기를 조절하는 방법은 겉모양만 달라질 뿐입니다. 〈section〉은 구획을 나눌 때 쓰세요. 〈main〉, 〈header〉, 〈footer〉, 〈nav〉 등은 스...
  • 웹디자인
    [2019년 8월 웹 개발 동향] 강한 팀과 윤리적 데이터 센스메이킹
    모든 사람은 저마다 각자의 자리와 능력이 있습니다. 팀은 스타만으로 구성되는 것이 아니므로 팀원과 팀의 가치를 응원하고 지지하는 사람과 함께하려는 마음이 필요합니다. 사람들은 빠른 소프트웨어를 선호하고 구매하기 때문에 속도는 비즈니스 성공에도 중요한 요소입니다. 웹사이트 성능을 높이기 위해 아이프레임(iframe)을 섀도DOM(ShadowDOM)으로 바꾸게...
  • 웹디자인
    웹사이트 성능을 개선해 지구를 구하는 방법
    인터넷은 전기를 많이 사용하지 않는다고 생각합니다. 전기는 어디선가 생산돼야 합니다. 이는 대부분의 국가에서 화석 연료를 태운다는 뜻입니다. 이는 결국 인터넷 탄소 발자국이 전 세계 항공 여행으로 발생하는 탄소 발자국을 넘어설 정도로 커졌고, 인터넷을 지구상 가장 큰 석탄 연소 기계로 만들고 있음을 의미합니다. 웹사이트를 만들며 지구를 구하는 방법을 확인해...
  • 웹디자인
    HTML5 입력 양식: 어디쯤 왔을까?
    HTML5는 새로운 입력 양식 13종을 선보이며 웹 디자이너와 개발자가 양식에 추가할 수 있는 필드의 수를 크게 늘렸습니다. 필드를 통해 얻는 데이터의 종류를 더 구체적으로 지정할 수 있는 type 속성에 새로운 값을 도입했죠. 이때 브라우저는 사용자가 필드를 정확하게 완료하는 데 필요한 인터페이스와 유효성 검증을 제공하기로 약속했습니다. HTML5는 여전...


맨위로