HTML & CSS

1️⃣ HTML & HTML태그 > HTML(하이퍼텍스트 마크업 언어)의 기본 구조로 HTML은 웹 페이지의 내용을 구조화하고 표현하기 위한 마크업 언어입니다. 또한 html은 태그로 구성되어 있으며 각 태그는 특정한 의미와 기능을 가지고 있습니다. HTML

> 📌Float 속성이란 웹 페이지에서 요소를 배치하는 데 사용되는데, 주로 텍스트나 이미지를 서로 옆에 나란히 또는 글 흐름을 둘러싸도록 배치할 때 쓰입니다. 이 속성은 주로 레이아웃 디자인에 활용되며, 요소를 좌우로 부유시키는 효과를 만듭니다. ex) 기사 float 속성 1️⃣ left: 요소를 왼쪽으로 부유시킵니다. 2️⃣ right: ...

📌svg 태그란? XML 마크업 언어로, 확장 가능한 벡터 그래픽을 나타내는 파일 형식이에요. 이는 그림이나 도형을 표현하는 데에 사용됩니다.(ex_이모티콘) 픽셀 단위로 이미지를 구성하는 비트맵 데이터(png, jpg) 와는 다르게 그래픽의 크기를 조절해도 이미지의 질이 손상되지 않습니다. 1️⃣SVG는 다양한 그래픽 요소와 속성을 사용하여 이미지설명...

미디어 쿼리는 CSS에서 제공하는 기능으로, 사용자의 디바이스 특성(화면 너비, 높이, 해상도 등)에 따라 다른 스타일을 적용할 수 있도록 도와준다.주로 반응형 웹 디자인(Responsive Web Design)에 사용되며, 다양한 디바이스(모바일, 태블릿, 데스크탑

1️⃣ Box model > 박스모델이란 css를 구성하는 기반이 되는 개념으로 4개의 레이아웃 으로 구성됩니다. 이 4개의 레이아웃을 하나의 사각형 상자로 간주하며, 각 콘텐츠, 패딩, 보더(테두리), 패딩으로 구성되어 있습니다. **1.콘텐츠영역 (내용) : * 크기 조절*: 콘텐츠 영역의 크기는 width와 height 속성을 사용하여 조절할 ...

📌리스트태그란? HTML에서 목록을 생성하는 데 사용되는 태그들을 의미합니다. 주로 ol (Ordered List), ul (Unordered List), li (List Item)가 있습니다 1️⃣HTML 리스트태그 📌 ol (Ordered List) 순서가

> 📌 Form(폼) 이란? 웹 페이지에서 사용자로부터 정보를 입력받아 서버로 제출하기 위한 요소입니다. 사용자가 웹 페이지에 정보를 입력하고, 이를 서버로 전송하여 처리할 수 있도록 하는 기능을 제공합니다. 1️⃣ 주요 속성 액션(Action): 폼 데이터를 전송할 서버 쪽 스크립트 파일의 URL을 지정합니다. 메소드(Method): HTTP 메...

hover, active, focus 는 모두 가상클래스선택자로 가상 클래스란 주로 객체 지향 프로그래밍에서 사용되는 용어로, 직접 객체(인스턴스)를 생성할 수 없는 추상적인 클래스를 나타냅니다.hover 가상 클래스는 사용자가 마우스를 요소 위로 올렸을 때 적용됩니다

📌시멘틱태그와 웹표준을 왜 사용하고 지켜야할까??!! 1️⃣ 시멘틱태그 (Semantic Tags) 의미 전달: 시멘틱 태그는 그 자체로 의미를 갖기 때문에 문서의 구조를 명확하게 전달할 수 있습니다. 검색 엔진 최적화(SEO): 시멘틱 태그를 사용하면 검색 엔진이 문서의 의도를 더 잘 이해하고 색인화할 수 있습니다. 접근성 향상: 시각 장애를 ...

💡 HTML 요소의 배치 방식을 지정하는 CSS 속성들 📌 static: 요소들이 문서 흐름에 따라 배치됩니다. 이 값은 위치 지정 속성(top, right, bottom, left)을 사용하여 위치를 조정할 수 없습니다. 📌 relative: 요소는 자기

📌 font 를 preload 하는 방법 > 웹 폰트를 preload하는 것은 페이지의 성능을 향상시키고 폰트가 더 빠르게 로드되도록 하는 데 도움이 된다 코드에서 link 요소의 rel 속성에 preload 값을 주고, as 속성을 "style"로 설정하여 해당 리소스가 스타일시트임을 알려준다. 이렇게 하면 페이지가 로드되는 동안 웹 폰트가 미리 ...

1️⃣ will-change 속성 사용: 애니메이션이 적용될 요소에 will-change 속성을 사용하여 브라우저에게 미리 알림으로써 최적화할 수 있습니다.예를 들어, will-change: transform;은 해당 요소가 변환될 것임을 브라우저에 알려 미리 최적화합

공식적으로는 Flexible Box Layout이라고 불리며, 주로 1차원 레이아웃을 위해 설계되었습니다. 즉, 행이나 열 한 방향으로의 요소 배치에 최적화되어 있습니다.유연성: 요소들이 컨테이너 공간에 맞게 유연하게 확장 또는 축소됩니다.간단한 중앙 정렬: 수평 및

📌 링크와 관련된 보안 속성 > 링크와 관련하여 웹 개발에서 고려해야 할 주요 보안 속성들은 웹 사이트의 보안을 강화하고, 사용자의 프라이버시를 보호하는 데 중요한 역할을 합니다. 📝 rel="noopener" 목적: 새 탭이나 창에서 링크를 열 때, 새로 열린 페이지가 원본 페이지에 접근하여 JavaScript를 실행하는 것을 방지합니다. 사용...

1️⃣ 클래스를 활용한 모듈화 > 클래스를 사용하여 코드를 모듈화하는 것은 객체지향 프로그래밍(OOP)의 핵심 개념 중 하나이다. 클래스를 활용하면 관련 있는 데이터와 함수를 하나의 단위로 묶어 관리할 수 있으며, 코드의 재사용성과 유지보수성을 높일 수 있다. 각 클래스는 특정한 기능과 속성을 가지며, 다른 클래스와 조합하여 복잡한 기능을 구현할 수 ...

HTTP와 HTTPS는 웹 서버와 클라이언트 간의 데이터 전송을 위해 사용되는 프로토콜입니다. 보안 HTTPS는 HTTP의 안전한 버전입니다. HTTPS는 SSL(Secure Socket Layer) 또는 TLS(Transport Layer Security) 프로토

💡 드래그 앤 드롭 기능은 사용자가 마우스나 터치 입력을 사용하여 화면 상의 객체를 한 위치에서 다른 위치로 이동시킬 수 있게 하는 사용자 인터페이스 기법입니다. 이 기능을 구현하려면 여러 이벤트와 상호작용을 관리하는 로직을 작성해야 합니다. 또한 드래그 앤 드롭 기능을 구현할 때는 사용자 경험을 고려하여 부드럽고 자연스러운 드래그 앤 드롭 동작을 제공...

표를 만들고자 할때 사용하는 스타일이다HTML에서 테이블은 태그를 사용해 생성된다헤더셀은 < th >행(row)은 < tr >열(column) 은 < td > 💡 헤더셀은 제목이기 때문에 글씨가 굵음체이다결과 : 아래의 그림같이 테이블요소를 사용하면

👩🏻‍💻 이해가 가면서도 막사 사용하려하면 헷갈리는 속성들이다.. 헷갈릴때마다 찾기 번거로우니까 정리해보자고\~~!!????!!!!이 값은 flex 아이템이 남은 공간을 얼마나 차지할지를 결정합니다.기본값은 0인데, 이 경우 남은 공간이 있어도 아이템이 커지지 않