[HTML/CSS] 기초다지기 CSS(2) 속성 | 가상클래스 | 가상요소

💡CSS transition스타일 변경 시 부드럽게 전환호버링이랑 같이 사용선택자가 변화되는 것을 시간의 흐름을 줘 변화시키는 속성 ➡️속성 시간 속도 지연시간ease기본값느리게 시작한 다음 빠르게 전환한 다음 천천히 종료linear처음부터 끝까지 같은 속도로 전환ease-in가속느린 시작으로 빠른 끝(느린 느낌을 받을 수 있다)ease-out감속빠른 시작과 느린 끝(빠른 느낌을 받을 수 있다)ease-in-out느린시작과 느린 끝으로 전환 효과 지정cubic-bezier(n,n,n,n)3차 베지어 함수에서 자신의 값을 임의적으로 정함n에 숫자를 직접 넣어 커스 가상클래스(의사클래스 pseudo class)별도의 class를 지정하지 않아도 지정한 것처럼 요소를 선택 가능:hover마우스를 롤오버 했을..

• format_list_bulleted 구름 x 딥다이브 풀스택/FE
• · 2025. 9. 23.

[HTML/CSS] 기초다지기 CSS (1) 기본구조 | 속성

💡CSSCSS란?사용자에게 문서를 표시하는 방법을 지정하는 언어(스타일, 레이아웃 등)웹 사이트에서 화면에 표시되는 정보들을 꾸며주는 역할HTML은 문장의 구조를 만들고 CSS는 문장을 브라우저에 어떻게 보여줄지를 지정하는 언어➡️구조 = HTML, 디자인 = CSS 사용하는 방법1️⃣인라인 스타일 : HTML 태그 안에서 style 속성을 이용2️⃣내부 스타일시트 : 태그를 통해 HTML문서 내부에서 이용( 안에 작성)3️⃣외부 스타일시트 : 별도의 CSS파일을 분리하여 HTML문서에 연결.css파일 작성 후 태그를 이용해 연결css파일에는 .a-button{스타일링 작성}클래스는 . ID일 경우 # 스타일적용 우선순위인라인 스타일 > 내부/외부 스타일시트 > 웹브라우저 기본스타일*혼합되어 사용할 ..

• format_list_bulleted 구름 x 딥다이브 풀스택/FE
• · 2025. 9. 19.

[HTML/CSS] 기초 다지기 HTML(2)

HTML 문서 기본 구조Doctype은 html 문서 맨 처음에 명시해 버전을 나타내며 반드시 작성해야함 문서가 html로 작성됐음을 브라우저에 알림문서의 시작과 끝을 알리는 태그이며 lang속성으로 문서의 언어 설정이 가능하다 메타 데이터와 타이틀 작성메타 데이터는 웹 페이지에서 직접적으로는 보이지 않지만 페이지 인코딩 방식이나 검색엔진에 관한 정보 등 많은 설정 가능* 브라우저 창 제목➡️헤드에서는 보이는 부분이 아닌 실제로 보이지 않는 부분을 나타냄 주로 브라우저 화면에 보이는 것이 들어감 HTML 문서의 이미지, 리스트, 비디오 등과 같은 모든 콘텐츠를 나타내는데 사용HTML 문서에 단 하나의 만 존재 HTML 기본 태그와 역할1. Heading~까지 존재하며 주로 페이지에 표시하려는 제목으로 ..

• format_list_bulleted 구름 x 딥다이브 풀스택/FE
• · 2025. 9. 18.

[HTML/CSS] 기초 다지기 HTML(1)

💡HTML HTML이란?웹페이지 표시를 위해 개발된 지배적인 마크업 언어콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 간단한 언어웹을 이루는 가장 기초적인 구성요소웹페이지를 만들기위한 표준 마크업 언어구성요소 ➡️여러개를 만들어 화면을 구성 1. 태그(Tag)꺽새 안에 들어있는 정보를 정의하는 형식요소의 일부로 시작태그와 종료태그 두 종류태그 안에 속성을 이용해 명령 보조 가능*종료태그가 없는 도 존재* 속성(Attribute)태그를 보조하는 명령어로 태그 안쪽에 존재속성은 태그의 문법 명령어가 다루지 못하는 명령을 보조width, height, alt, style, href ... 속성 값(Attribute Value)속성 뒤에 작성되는 따옴표 사이에 나오는 내용들width = "80p..

• format_list_bulleted 구름 x 딥다이브 풀스택/FE
• · 2025. 9. 18.