아래의 아이콘 세 개는 내가 css를 처음 배울 무렵에 연습 삼아 만들어봤었던 것들이다. 어디선가 css만으로도 아이콘을 만들 수 있다는 말을 듣고 무작정 해봤는데 걱정과는 달리 정말 뚝딱뚝딱 만들어졌다. 아마도 나는 이때 처음으로 css가 생각보다 똑똑하다는 생각을

float은 요소가 일반적인 흐름으로부터 제외되게 만들어준다. 요소를 가로로 정렬하기 위해 사용하기도 하고, 텍스트나 인라인 요소가 특정 요소를 감싸게 만들기 위해 사용하기도 한다. 일반적으로 자주 사용되는 float의 값으로는 세 가지가 있다.none은 float의

display 속성을 이용하면 요소들이 어떻게 보여지고 다른 요소와 어떻게 상호 배치되는지에 영향을 주는 display 유형을 설정할 수 있다. display의 값에는 여러 종류가 있지만 우선 가장 기본적인 세 개의 값에 대해 알아보겠다.inline 요소는 줄바꿈 없이

css에서 position 속성은 특정 요소를 원하는 위치에 위치시키기에 아주 편리하다. position의 다섯가지 종류가 있다.static은 position의 기본값이기 때문에 position을 별도로 지정해주지 않는 경우 모두 static이다. top, left,

프로그래밍을 공부하다 보면 semantic한 코드를 작성해야 한다는 내용의 글을 꽤나 자주 볼 수 있다. 그런데 'semantic한 코드'라는 게 대체 무엇일까? semantic의 사전적인 뜻은 '의미의, 의미론적인'이다. 프로그래밍에서 사용하는 semantic의 뜻도