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

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

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

폼태그란 웹 페이지에서의 입력 양식을 말합니다. 우리가 평소 로그인할 때 아이디와 패스워드를 기입하는 용도로 쓰이죠. 사용자가 기입한 정보를 백엔드서버로 전송해주는 역할을 합니다. 다양한 폼태그들을 사진과 함께 어떻게 사용되는지 확인해봅시다! 폼태그 01. 폼태그 속성 폼태그에는 name, action, method, target 등이 있습니다. 폼 속성을 이용해 입력한 값을 어디로 보낼 것인지 어떻게 보낼 것인지 정할 수 있습니다. name: 폼의 이름을 지정합니다. action: 폼 데이터가 전송되는 백엔드 url을 지정합니다. method: 폼을 서버에 전송할 http 메소드를 정합니다. (GET / POST) target: action에서 지정한 스크립트 파일을 다른 위치에 열도록 지정합니다. a..