카테고리: Web

[HTML] 시멘틱 마크업

HTML5가 등장한지 몇년이 흘렀음에도 불구하고, 아직까지도 <div> 태그로만 마크업된 웹사이트를 많이 접하곤 합니다.하지만 이렇게 오로지 <div> 태그로만 마크업된 웹페이지는 시각적으로는 아름다울지 몰라도 여러가지 측면에서 문제가 있을 수 있습니다. 시멘틱 마크업이란?<div> 태그는 보통 웹페이지에서 화면의 특정 영역

Font Awesome 5 사용법 (ver 4 포함)

Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다.Font Awesome 5가 출시된지 시간이 꽤 흘렀음에도 불구하고, 아직까지도 Font Awesome 4가 많이 사옹되고 있습니다.여러가지 이유가 있겠지만 저는 개인적으로 Font Awesome가 일부 아이콘들을 유료화하는 과정에서 다소 복잡해진 부분이 없지

CSS 상대 단위 - em과 rem

반응형 웹디자인이 대두되면서 점점 많은 웹사이트들이 em과 rem라고 불리는 CSS 단위를 이용해서 스타일링이 되고 있습니다.이번 포스트에서는 em과 rem 단위가 실제로 브라우저에서 어떻게 동작하는지 정확히 알고 좀 더 적재적소에 사용하는 방법에 대해서 알아보도록 하겠습니다. 상대 단위란?상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유

CSS 박스 모델

웹페이지 상의 모든 엘리먼트는 하나의 박스의 개념으로 모델링 할 수 있습니다.이 박스 모델이라고 불리는 컨셉은 CSS의 근간이 되기 때문에 반드시 이해하고 있어야 합니다. Box Model 이란?우리가 웹페이지에 배치하는 모든 HTML 엘리먼트는 3개의 층을 가진 사각형 구조의 형태를 띠고 있습니다. 가장 외곽의 층을 margin 영역이라고 부르는데, 보

[CSS] display 속성: inline, block, inline-block

CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정합니다.여러가지 display 속성값 중에서 가장 기본이지만 은근히 햇갈릴 수 있는 inline과 block, inline-block에 대해서 알아보도록 하겠습니다. inlinedisplay 속성이 inline으로 지정된 엘리먼트는 전후

[CSS] 메뉴바 상단에 고정 시키기

fixed position을 이용해서 스크롤에 해도 따라가지 않고 항상 화면 상단에 고정되어 있는 메뉴바를 만들어보겠습니다. fixed position의 특징CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다.어떤 엘리먼트의 position 속성을 fixed로 지정해줄 경우, 해당 엘리먼트는 부모 엘리먼트로 부터 완전히

[CSS] 이미지의 일부로 캡션 넣기

지난 포스트에서 absolute position의 기본적인 특징과 작동 매커니즘에 대해서 살펴보았습니다.이번 포스트에서는 absolute position를 응용해서 이미지의 일부로 캡션을 넣는 방법에 대해서 알아보겠습니다. 기본 이미지 캡션 배치웹페이지 상의 이미지에 캡션을 넣을 때는 보통 HTML5에서 도입된 <figure/>와 <figc

[CSS] Absolute Postion - 자유로운 엘리먼트 배치

부모 엘리먼트애 구애받지 않고 엘리먼트를 자유롭게 배치시킬 수 있는 absolute position에 대해서 알아보겠습니다. 엘리먼트 배치 관련 CSS 속성CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다.기본값은 static이며 relative나 absolute, fixed 등으로 변경이 가능합니다.이번 포스트에서

[CSS] 반응형 레이아웃

시장에 출시되는 디바이스들의 화면들이 점점 다양해지면서 다양한 크기의 화면에 똑똑하게 반응하는 웹디자인이 중요해지고 있습니다.이번 포스트에서는 CSS의 미디어 쿼리(Media Query)와 float 속성을 이용해서 반응형 레이아웃을 잡는 방법에 대해서 알아보겠습니다. 웹페이지 마크업CSS로 스타일할 예제 사이트의 전체 웹페이지를 HTML5에서 추가된 시멘