HTML, CSS, JS

HTML, CSS, JS 이론 기초 HTML은 뼈대, CSS는 장식, 꾸밈이고, JS는 구동과 동작이다. HTML Hyper Text Markup Language(하이퍼 텍스트 마크업 언어) 프로그래밍 언어가 아니다. HTML은 태그들로 구성되어 있고, CS나 자바스

헤더영역에 관해 다룬다

1. Reset CSS? 웹 브라우저마다 각각 다른 default 스타일이 지정되어 있다. 이는 단락에 대한 텍스트 크기, 제목의 글꼴 무게, 목록의 여백, 테두리 스타일 등을 포함한다. 이러한 기본적인 스타일은 웹 브라우저에 따라 상이할 수 있어, 디자이너나 개발자

한 줄을 차지한다. 즉, 자신의 위아래로 줄바꿈이 일어난다.주로 섹션을 나누는데 사용되며, 화면 전체의 가로폭을 차지한다.width, height, margin, padding 지정 가능대표적인 블록 요소로는 ＜div＞, ＜h1~h6＞, ＜header＞, ＜header

카테고리바를 만들기 위해, 버튼을 추가해 본다.버튼이 너무 크므로, CSS를 사용하여 버튼의 크기를 조절하고 글자의 사이즈와 굵기를 조절해보고, 여러개의 버튼을 만들어 본다.하지만, 위처럼 우리가 원하지 않는 스크롤이 생겨버렸다. 이럴때는 CSS - Overflow를

세로 열과 가로 행을 기준으로 정렬하는 레이아웃2차원(열과 행)레이아웃 시스템을 제공하며, 복잡한 웹 디자인 레이아웃을 구현하는데 매우 유용하다.레이아웃의 정의grid-template-rows: 그리드의 행의 크기와 개수를 정의한다. 각 행의 크기는 공백으로 구분된 값

CSS에서는 margin, border, padding, 그리고 gap 속성을 이용해 페이지의 요소들이 어떻게 배치되고 표시되는지를 정의한다. 이들은 페이지 내 요소들 간의 공간과 관련된 속성이다.Margin: Margin은 요소의 바깥쪽 공간을 조절한다. 이는 요소와

CSS의 'position' 속성은 요소가 문서 또는 부모 요소에 대해 어떻게 위치를 잡을지 정의한다. position 속성은 static, relative, absolute, fixed, sticky와 같은 여러 값들을 가질 수 있다.static (기본값):기본적으로

SVG(Scalable Vector Graphics)는 웹 친화적인 벡터 파일 포맷.JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장한다. (수학 공식으로 저장하므로, 픽셀 기반보다 더

CSS 애니메이션은 CSS 스타일 변경을 부드럽게 만들어 준다. 예를 들어, 버튼의 배경색을 빠르게 변경하는 대신, CSS 애니메이션을 사용하여 그 변경을 부드럽게 전환할 수 있다.CSS 애니메이션은 순수 CSS로 구현되므로 JavaScript 없이도 애니메이션을 만들

body부분에 svg파일의 내용을 복사붙여넣기 한다.width: 100vw; : 이 부분은 body 요소의 너비를 100% viewport width로 설정한다. 여기서 viewport는 브라우저의 보이는 영역을 의미한다. 즉, 사용자의 전체 화면 너비를 body의 너

컴퓨터 그래픽 등에서 사용되는 매개변수 곡선베지어 곡선(Bezier Curve)은 컴퓨터 그래픽스에서 사용되는 특별한 형태의 곡선으로, CSS 애니메이션 등에서 도형을 그릴 때 사용한다.베지어 곡선(Bezier curve)은 수학적으로 정의된 곡선으로, 그래픽 디자인,

Parallax Scrolling은 웹 페이지나 애플리케이션에서 스크롤링을 할 때, 배경 이미지와 전경 이미지가 서로 다른 속도로 움직이는 시각적인 효과를 의미한다. 이 효과는 사용자에게 깊이와 입체감을 제공하여 더욱 풍부하고 동적인 사용자 경험을 만들어준다.패럴랙스

Event "시스템에서 일어나는 사건 또는 발생"으로 다음과 같은 요소들이 있다. 클릭 마우스 누르기 마우스 떼기 키보드 누르기 키보드 키 떼기 창의 크기를 조정 form이 제출되거나 비디오가 재생됨 멈추기 스크롤을 하기 이벤트가 발생하면, EventListene