VScode/CSS
-
[CSS] transitionVScode/CSS 2022. 9. 8. 17:23
transition: 애니메이션을 적용할 때 사용하는 기능(변형 속성) 종류 -transition: 모든 transition 속성을 한 번에 적용 -transition-delay: 이벤트 발생 후 몇 초 후에 재생할지 지정 -transition-duration: 몇 초 동안 재생할 지 지정 -transition-property: 어떤 속성을 변형할 지 지정 -transition-timing-function: 수치 변형 함수를 지정 변형함수(2D) 1. translate(X,Y): 지정한 크기만큼 x축과 y축으로 이동 2. tranlateX(X): 지정한 크기만큼 x축으로 이동 3. tranlateY(X): 지정한 크기만큼 y축으로 이동 4. scale(X,Y): 지정한 크기만큼 x축과 y축으로 확대 축소..
-
[CSS] layoutVScode/CSS 2022. 9. 8. 16:51
layout Content Title 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. 빨간색 배경 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. Content02 Title 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. SegmentTitle 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. SegmentTitle 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. SegmentTitle 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. SegmentTitle 제3항의 승인을 얻지 못한 때에는 그 처분 또는..
-
[CSS] position, display, visibilty, shadowVScode/CSS 2022. 9. 8. 16:41
position 1. position: 웹 문서 안의 요소들을 자유자재로 배치해주는 속성(양/음수 모두 사용가능) -HTML 태그의 위치 설정 방법을 변경할 때 사용 -상대적 위치 좌표 사용시 키워드 1) static: 요소를 문서의 흐름에 맞추어 배치(top/right/bottom/left 이용 배치 변경 불가). float 속성을 이용해 좌우로 배치 가능 2) relative: 현재 위치를 기준으로 위치 지정. 자연스럽게 연결해 배치. (top/right/bottom/left)를 사용해 위치를 지정할 수 있음 -절대적 위치 좌표 사용시 키워드 1) absolute: body 또는 컨테이닝 박스를 기준으로 위치를 지정할 수 있음. 원하는 위치를 정해 배치. 요소를 감싸는 태그(컨테이닝 박스)를 만들고 ..
-
[CSS] background, font, button, gradiantVScode/CSS 2022. 9. 8. 16:29
배경 속성 -특정 태그의 배경 이미지 또는 색상을 지정하는 스타일 속성 -종류 1) background-image 속성 -배경에 넣을 그림을 지정하는 스타일 속성 -속성에는 URL 단위 또는 그레이디언트를 입력 2) background-size 속성 -그림 크기를 조절할 때 사용하는 스타일 속성이며 CSS3에 추가된 기능 -키워드: contain/cover -contain: 너비를 100%로 지정한 것과 같은 효과 -cover: 높이를 100%로 지정한 것과 같은 효과 3) background-repeat 속성 -repeat: 이미지가 패턴을 이룸 -키워드: no-repeat/repear/repeat-x/repeat-y/round/space -repeat-x: x축 방향으로 이미지가 반복 -repeat-..
-
[CSS] pseudoclassVScode/CSS 2022. 9. 8. 16:25
일반 구조 선택자 -CSS3부터 지원하는 선택자 -일반적으로 자손선택자와 병행해서 많이 사용 -같은 이름의 태그를 또는 클래스 이름들을 대상으로 하는 선택자 -종류 1) first-child: 첫번째 위치하는 자손을 선택 2) second-child: 마지막에 위치하는 자손을 선택 3) nth-chlid: n번째 위치하는 자손을 선택 회사소개사업조직도 게시판고객지원사이트맵 위의 코드와 결과는 같지만 좀 더 간결하게 표현할 경우 아래와 같다 회사소개사업조직도 게시판고객지원사이트맵 href PsuedoClasss PsuedoClasss PsuedoClasss PsuedoClasss PsuedoClasss PsuedoClasss PsuedoClasss PsuedoClasss PsuedoClasss Psuedo..
-
[CSS] border, checked, box model, listVScode/CSS 2022. 9. 8. 16:04
border(테두리)속성 1. border-width 속성 -테두리의 너비를 지정하는 스타일 속성 -크기 단위: border-left[top/right/bottom]-width -키워드: medium/thick/thin... 2. border-style 속성 -테두리의 형태를 지정하는 스타일 속성 -border-left[top/right/bottom]-style 3. border-color 속성 -border-left[top/right/bottom]-color 4. border-radius 속성 -CSS3에서 추가된 속성 -테두리가 둥근 사각형 또는 원을 만들 수 있음 -요소 하나만 쓰면 네개의 모서리에 동시 적용, 네개 나눠쓰면 각각 지정된 위치에 적용 -적용 순서: 왼쪽 위-오른쪽 위-오른쪽 아래-왼..
-
[CSS] selectorVScode/CSS 2022. 9. 8. 14:43
-특정한 HTML 태그 또는 ID 또는 CLASS를 선택할 때 사용하는 기능 -선택된 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있음 CSS Selector Basic 간세네 관련 포스팅: 한글 Lorem Ipsum 생성기 대통령은 국민의 보통·평등·직접·비밀선거에 의하여 선출한다. 대통령은 조약을 체결·비준하고, 외교사절을 신임·접수 또는 파견하며, 선전포고와 강화를 한다. *각 포털 사이트 로그 다음 네이버 1. Universal 한글 Lorem Ipsum 형사피해자는 법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 2. ID -태그에 지정된 아이디에 '#'을 붙여서 CSS를 지정함 -태그의 id는 다른 태그들과 구분하기 위해 사용될 목적으로 만들어진 거라서 각 태..