본문 바로가기
728x90
반응형
SMALL

Programming158

[Website] 트랜지션 (Transition) 트랜지션 (Transition) CSS 트랜지션과 애니메이션은 웹 페이지에서 요소의 스타일 변경에 부드러운 효과를 적용하는 데 사용된다. 트랜지션은 요 소의 두 가지 상태 간의 스타일 변경을 부드럽게 처리하는 반면, 애니메이션은 여러 키 프레임에 따라 요소의 스타일을 변경할 수 있게 해준다. 이 두 기능은 웹 페이지에 독특한 효과와 동적인 요소를 추가하는 데 도움이 된다. html 2023. 5. 26.
[Website] 그림자 (Shadows) 그림자 (Shadows) 그림자는 웹 페이지에서 요소에 깊이와 입체감을 추가하는 데 사용되는 CSS 효과이다. 그림자는 주로 text-shadow와 box-shadow 두 가지 유형으로 사용된다. text-shadow는 텍스트에 그림자를 적용하고, box-shadow는 요소의 경 계 상자에 그림자를 적용한다. html Hello World Hello World Hello World 1 This is a card 2023. 5. 26.
[Website] 그레디언트 (Gradients) 그레디언트 (Gradients) 그레디언트는 둘 이상의 색상 사이의 점진적 전환으로 구성된 특수 유형인 데이터 유형으로 표현된다. 선형, 방사형 및 원추형의 세 가지 그레디언트 유형을 선택할 수 있다. 또한, 함수를 사용하여 반복 그레디언트을 만들 수도 있다. html Rounded Corners Rounded Corners Rounded Corners This div uses an image border Welcome Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi metus, imperdiet eu vehicula ut, pulvinar vitae mauris. Nunc fringilla accumsan enim, id vestib.. 2023. 5. 26.
[Website] 가상 클래스 (Pseudo Classes) 가상 클래스 (Pseudo Classes) 가상 클래스 (Pseudo Classes)는 웹 페이지 요소의 특정 상태에 따라 스타일을 적용하는 CSS 기능이다. 가상 클래스는 요 소 이름 뒤에 콜론(:)을 사용하여 표시하며, 가상 클래스에 따라 다양한 상태에 스타일을 적용할 수 있다. 예를 들어, :hover, :active, :focus, :first-child, :last-child, :nth-child() 등의 가상 클래스를 사용할 수 있다. html Pseudo click List Item List Item List Item List Item List Item List Item List Item List Item css a:hover { color: red; font-weight: bold; } ... 2023. 5. 26.
[Website] CSS 위치 지정 및 배경 위치 (Position) CSS에서 위치 지정은 웹 페이지의 요소들을 원하는 위치에 배치하는 데 사용되는 기능이다. position 속성을 사용하여 위치를 지정할 수 있으며, static, relative, absolute, fixed, sticky와 같은 값을 가질 수 있다. 또한 top, bottom, left, right 속성을 사용하여 위치를 더 정확하게 조절할 수 있다. 배경 (Background) 배경 스타일은 웹 페이지의 요소에 배경 색상, 이미지, 반복, 위치 등을 적용하는 데 사용되는 CSS 기능이다. background-color, background-image, background-repeat, background-position 등의 속성을 사 용하여 배경 스타일을 정의할 수 있다... 2023. 5. 26.
[Website] CSS (Cascading Style Sheets) (2) 셀렉터 (Selectors) 선택자란 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다. 전체 셀렉터 (Universal Selector) HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다 (head 요소도 포함). Heading paragraph 1 paragraph 2 paragraph 3 태그 셀렉터 (Type Selector) 지정된 태그명을 가지는 요소를 선택한다. Heading paragraph 1 paragraph 2 paragraph 3 ID 셀렉터 (ID Selector) ID 속성 값을 지정하여 일치하는 요소를 선택한다. ID 속성 값은 중복될 수 없는 유일한 값이다. Heading paragraph.. 2023. 5. 26.
[Website] CSS (Cascading Style Sheets) (1) CSS (Cascading Style Sheets) 종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로, HTML과 XHTML 문서의 외관을 통합적으로 관리하는 데 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이고, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명은 style.css이다. 웹 페이지의 가독성과 유지 보수성이 향상된다. 인라인 스타일 (Inline style) 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다. 이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다. 인라인 스타일 내부 스타일 (Internal style) 내부 스타일을 이용하는 방법은 HTM.. 2023. 5. 25.
[Website] HTML 태그 (3) 동영상 및 오디오 src 속성으로 동영상 파일 경로 지정 src 속성으로 오디오 파일 경로 지정 controls 재생, 일시정지 등의 컨트롤러 표시 폼 사용자의 입력을 받는 폼 생성 사용자의 입력을 받는 다양한 유형의 입력 요소 생성 (ex: 텍스트, 체크박스, 라디오 버튼 등) 입력 요소에 대한 설명 텍스트 제공 버튼 생성 (ex: 제출 버튼) Form Account Name Email Password User Info Location Seoul Busan Gender Male Female Interests Movies Art Sports Game 2023. 5. 25.
[Website] HTML 태그 (2) 하이퍼링크 하이퍼링크는 다른 문서로 이동하기 위해서 클릭할 수 있는 요소, 텍스트 또는 이미지이다. : 다른 페이지나 웹 사이트로 이동할 수 있는 링크 (anchor) 생성 href 속성을 사용하여 이동할 URL 지정 Links Link to Google 이미지 이미지를 삽입하는 태그 src 이미지 파일의 경로 지정 alt 이미지가 로드되지 않을 경우 대체 텍스트 제공 이미지 2023. 5. 25.
[Website] HTML 태그 (1) HTML 태그 HTML의 요소를 나타내는 꺽쇠 괄호 ()로 둘러싸인 명령어이다. 대부분의 태그는 시작 태그와 종료 태그로 구성되어 있다 (ex: 내용). 일부 태그는 단독으로 사용 가능하다 (ex: ). 자체 닫기 줄 바꿈 태그는 이다. 텍스트 관련 태그 , , ..., 제목 (heading) 태그, 중요도에 따라 h1부터 부여 문단 (paragraph) 태그 굵은 글씨 (bold)로 표시 기울임꼴 (italic)로 표시 줄바꿈 미리 서식이 지정된 텍스트를 표시, 공백과 줄바꿈을 그대로 유지 리스트와 표 순서 없는 리스트 (unordered list) 생성 순서 있는 리스트 (ordered list) 생성 리스트의 항목 (list item) 지정 표 (table) 생성 표의 행 (row) 생성 표의 열 .. 2023. 5. 25.
728x90
반응형
LIST

티스토리툴바