JAN's History

CSS는 웹 페이지의 스타일을 정의하는 언어로, 선택자(Selector)와 박스 모델(Box Model)은 CSS의 핵심 개념입니다. 이번 포스팅에서는 다양한 CSS 선택자와 박스 모델의 개념을 알아보겠습니다!🎯 1. CSS 선택자(Selector)CSS 선택자는 HTML 요소에 스타일을 적용할 때 사용하는 방법입니다. 선택자는 특정 요소를 선택하고, 그 요소에 대한 스타일을 정의할 수 있도록 도와줍니다. 선택자는 여러 가지 종류가 있고, 각각 다른 방식으로 요소를 선택해요 - 선택자 종류* : 전체 선택자페이지에 있는 모든 요소에 스타일을 적용할 때 사용합니다.* { margin: 0; padding: 0;}2. tag : 태그 선택자HTML 태그 이름을 기반으로 스타일을 적용합니다.p { fo..

HTML을 작성하다 보면 비슷해 보이지만 용도가 다른 태그들로 인해 다소 혼란스러울 수 있는데요. 이번 포스트에서는 자주 헷갈리는 태그들을 비교하고 그 차이점을 짚어보도록 하겠습니다!!1. 태그 vs 태그 vs 태그이 세 태그는 웹 페이지에서 자주 사용되며 각각 고유한 특성과 용도가 있어 헷갈리기 쉬운데요. 태그 태그는 블록 요소로, 하나의 문단을 나타냅니다. 텍스트를 그룹화하여 문단을 형성하고, 항상 새로운 줄에서 시작합니다This is a paragraph of text.디폴트 스타일: 각 태그는 위아래에 여백이 있어, 문단 간에 공간을 만듭니다. 이는 읽기 편한 구조를 제공하는 데 도움이 됩니다.사용 상황: 문장이나 텍스트 블록을 정의할 때 사용하며, 문서의 텍스트 구조를 논리적으로 구성할..

HTML에서 비슷하게 보이지만 사용 목적이 다른 태그들이 생각보다 많습니다.. 아무래도 주니어 개발자는 이런 부분이 헷가릴텐데 이 글에서는 그런 태그들을 비교하여, 각 태그의 특징과 사용해야 할 상황을 명확히 정리해보겠습니다! 그리고 먼저 시맨틱 태그와 비시맨틱 태그를 구분하고, 각각의 태그를 언제, 왜 사용해야 하는지 다뤄보겠습니다.1. 시맨틱 태그란?시맨틱(Semantic) 태그는 HTML 문서에서 구조와 의미를 명확히 전달하는 태그를 말합니다. 모든 태그가 div로 작성된 html을 상상해보면 왜 시맨틱 태그가 필요한 지를 알 수 있을텐데요. 사진처럼 div로 감싸진 태그보다, html 태그의 의미와 쓰임새를 활용해 사용하는 것이 훨씬 좋은 코드입니다. Header Sidebar Main C..

1. 태그와 폼 요소들 태그는 사용자 입력을 받기 위한 양식을 정의하는 요소입니다. 입력된 데이터는 서버로 전송할 수 있으며, 다양한 폼 요소들을 포함할 수 있습니다.주요 폼 요소들:: 다양한 타입의 입력을 받는 요소입니다. type 속성을 사용하여 텍스트, 비밀번호, 체크박스, 라디오 버튼 등을 정의할 수 있습니다.: 여러 줄의 텍스트를 입력받기 위한 요소입니다.Enter your message here...와 : 드롭다운 리스트를 생성합니다. Volvo Saab: 버튼을 생성하며, 사용자 상호작용을 처리합니다.Submit⭐ 중요: 폼 태그와 요소들을 올바르게 활용하면 사용자와의 상호작용을 효과적으로 처리할 수 있습니다. method와 action 속성을 적절히 설정하여 데이터가 안전하게 ..

1. CSS 작성 방법CSS는 주로 세 가지 방법으로 작성할 수 있습니다.1.1 인라인 스타일(In-line Style)HTML 요소 내에서 style 속성을 사용하여 직접 스타일을 지정하는 방법입니다. 주로 간단한 스타일 적용에 사용됩니다.This is a red paragraph.⭐중요: 인라인 스타일은 유지보수가 어렵고, 스타일의 재사용이 불가능하므로 큰 프로젝트에서는 권장되지 않습니다.1.2 내부 스타일 시트(Internal Style Sheet)HTML 문서의 1.3 외부 스타일 시트(External Style Sheet)가장 선호되는 방법으로, 별도의 .css 파일을 만들어 HTML 문서와 연결하는 방식입니다. HTML 문서 내 태그를 통해 연결합니다./* styles.css */p { ..

최근 프론트엔드쪽으로 인턴을 하고 있어서 HTML,CSS,JavaScript 부분을 차근차근 공부해볼 생각이다..!!1. HTML 태그 이해하기: Start Tag와 End Tag1.1 Void 요소Void 요소는 종료 태그(End Tag)가 필요 없는 요소입니다. 이들은 보통 단일 태그로 사용되며, 자체적으로 내용을 포함하지 않습니다. 예를 들어 (줄바꿈) 또는 (이미지 삽입) 태그가 있습니다.⭐ 중요: Void 요소는 자체 종료 태그가 없기 때문에 닫는 슬래시( / )를 사용하지 않는 것이 일반적입니다. 예를 들어 와 같은 형태는 XHTML에서는 사용되었으나, 최신 HTML에서는 사용하지 않습니다.1.2 Content와 ElementContent는 태그 사이에 있는 실제 콘텐츠(텍스트, 이미지 등)입..