[03-5] CSS 기본기 익히기: 블록 요소와 인라인 요소 태그 개념 정리! HTML태그는 크게 블록 요소와 인라인 요소로 나뉘어져 있습니다. 요소의 특성에 따라 CSS가 적용안될 때가 있으니 꼭 알아야할 기본 코딩상식이라 할 수 있죠. 태그의 크기와 테두리 등을 지정할 때 블록 요소와 인라인 요소의 태그에 따라 다르게 적용됩니다. 이번 포스팅에서는 요소 태그는 어떤 것이 있고 어떤 특징이 있는지 알아봅니다. 블록 요소 vs 인라인 요소 분류 태그 특징 블록 요소 h1~h6, p, ol, ul, dl, div, header, footer, section, article, aside, nav 1. 줄을 자동으로 바꾼다. 2. 너비와 높이를 지정할 수 있다. 3. 너비를 지정하지 않으면 부모 요소 너빗값의..

PXD (physical ux design)는 무엇일까?: 적용 사례 PXD (Physical UX Design) ⠀PXD 는 Physical UX Design의 약어로, 해석하면 신체적, 물리적으로 접하는 경험을 디자인하는 것을 말합니다. 일반적으로 UX하면 디지털 화면의 경험을 디자인하는 것이 아닐까 싶지만 실은 UX에도 다양한 종류가 있습니다. UX 디자인 분야는 복잡하고 다양한 전공이 서로 이어져 있기 때문에 하나하나 분리해서 보기 어렵습니다. 밑의 표는 댄 섀퍼 Dan Schaffer가 분류한 UX 분야의 도표입니다. 이 표를 본 저는 UX분야를 국한해서 보는 것보다 자신의 관심과 역량에 맞는 분야를 찾는 것이 중요하다고 느꼈습니다. 아래 사이트에서도 UX가 무엇인지 잘 설명되어 있으니 참고하면..

[03-4] CSS 기본기 익히기: padding, margin 마진(margin)은 요소의 주변에 여백을 만들어줍니다. 그리고 패딩(padding)은 테두리와 그 안의 콘텐츠 사이의 여백을 만들어 줍니다. 이 두가지를 이용해 여백을 적절히 만들면 유저친화적인 UI를 제공할 수 있죠. 이번 시간에는 margin과 padding에 대해서 알아보도록 하겠습니다. margin & padding 01. margin과 padding 비교 margin과 padding은 서로 비교하면서 알아가는 것이 이해하기 쉬울거라 생각합니다. 먼저 아래와 같이 버튼을 화면에 띄우게 됐을 때 푸른색 테두리 안에 'Button'이라는 텍스트 요소가 있는 모습을 확인할 수 있습니다. 여기서 푸른색 테두리는 'border'에 해당되고 ..

[03-3] CSS 기본기 익히기: 단위 속성 한 방에 정리! (px, %, vh, vw, vmin, vmax) 건물에 있는 창문의 갯수와 그 사이의 간격, 창문의 크기는 조화롭게 이뤄져 멋있는 야경을 만들어냅니다. 웹페이지도 이와 비슷합니다. 화면의 레이아웃이 어떻게 구성되고 여백, 간격이 적절하게 지정되어 있는지에 따라 웹페이지의 첫인상이 달라보이죠. 눈에 보이는 화면에서 요소들을 적절히 배치하는 것이 가장 기본 중의 기본이라고 생각합니다. 이번 포스팅에서는 영역을 지정하는 속성값과 바깥쪽, 안쪽 여백을 지정하는 법을 알아보겠습니다. 단위 (속성값) 속성값 설명 px 픽셀 단위로 지정합니다. % 부모태그를 기준으로 %단위로 지정합니다. vw 웹 브라우저의 너비를 기준으로 값을 백분율로 지정합니다. v..

CSS기본기 익히기: 중요한 폰트 태그 정리 폰트가 무엇이냐에 따라 글의 성격이 달라질 수 있습니다. 폰트뿐 아니라 색과 자간, 정렬 등 다양한 요소로 화면의 분위기를 바꿀 수 있습니다. 그만큼 중요한 스타일링인 폰트 태그를 본 포스팅에서 정리해봤습니다. 폰트 스타일링 01. 폰트 태그 정리표 속성명 속성값 설명 font-weight normal 폰트를 보통 굵기로 표시합니다. bold 폰트를 굵게 표시합니다. font-size px 픽셀 단위로 폰트 크기를 설정합니다. rem 최상위 부모인 태그를 기준으로 폰트 크기를 설정합니다. em 부모 요소를 기준으로 폰트 크기를 설정합니다. font-family "폰트명" 폰트의 모양을 설정합니다. color 영문명 폰트 색상을 영어 색상명으로 표기합니다. #0..

CSS는 Cascading Style Sheet의 약어로 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소입니다. HTML은 앞서 본 것처럼 텍스트, 이미지, 표같이 정보위주를 다룬다면, CSS는 색상이나 이미지 크기나 위치, 배치 방법 등 디자인 요소를 다룹니다. 자바스크립트와 연계해 동적인 콘텐츠 표현이나 디자인 적용이 가능하죠. CSS가 등장한 이유는 HTML안에서 정보와 디자인을 보여주는 것보다 HTML은 정보위주로, CSS는 디자인 위주로 담당해서 변경내용이 있을 시 변경하기에 용이하기 때문입니다. 또한 다양한 기기에 맞게 바뀔 수 있는 반응형 디자인을 해낼 수 있죠. CSS 연결하기 먼저 CSS파일을 생성해주고 HTML파일의 head 태그 안에 를 기입합니다. link라는 단어만 적고 ent..