CSS 10 : transform, transition

CSS 10 : transform, transition transfrom html요소의 회전, 크기 조절, 기울이기, 이동 효과 ! 해당 요소의 display 속성이 block이나 inline-block일 경우 가능함. translate(tx, ty) - 지정한 크기만큼 x축, y축으로 이동함. translate(tx, ty) - tx, ty만큼 이동. translateX(tx) - tx만큼 x축 이동 translateY(ty) - ty만큼 y축 이동 scale(sx, sy) - x축 y축으로 확대, 축소 scaleX(sx) - x축으로 확대 축소 scaleY(sy) - y축으로 확대 축소 rotate(각도) - 지정한 각도만큼 회전. +시계, -반시계 rotateX(각도) - x축 기준으로 회전. 입체..

• format_list_bulleted CSS
• · 2022. 11. 7.
• textsms

CSS 09 : 고급 선택자

CSS 09 : 고급 선택자 가상 클래스 선택하고자 하는 html 요소의 특별한 상태를 명시할 때 사용함. 선택자:가상클래스이름 {속성: 속성값;} :link - 아직 방문하지 않은 요소를 나타냄. href 속성을 가진 중 방문하지 않은 모든 요소를 선택함. :visited - 사용자가 방문한 적 있는 링크를 나타냄. :active - 사용자가 활성화한 요소(버튼 등)를 나타냄. :hover - 사용자의 마우스 포인터가 요소 위에 올라가 있으면 선택. :focus - 양식의 입력 칸 등 포커스를 받은 요소를 나타냄. 사용자가 클릭, 탭하거나 tab키로 선택됐을 경우 발동. :nth-child(n) - 형제 요소 사이에서 n번째 순서에 있는 요소들을 선택함. even(짝수), odd(홀수) :not(sel..

• format_list_bulleted CSS
• · 2022. 11. 6.
• textsms

CSS 08 : background 속성

CSS 08 : background 속성 background-color 해당 HTML요소의 배경색 설정. background-image 해당 HTML 요소의 배경으로 나타날 배경 이미지를 설정. 설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타남. background-repeat 배경 이미지를 수평이나 수직 방향으로 반복되도록 설정 가능. background-repeat: repeat-x; (수평 반복) background-repeat: repeat-y; (수직 반복) background-repeat: no-repeat; (한 번만 나타나게) background-position background-repeat: no-repeat; 일 때 (반복되는 이미지가 아닐 때) 배경 이미..

• format_list_bulleted CSS
• · 2022. 11. 3.
• textsms

CSS 07 : float, clear 속성

CSS 07 : float, clear 속성 float 속성 html요소에 적용시키면 기본적인 흐름에서 벗어나 둥둥 떠다니듯 배치가 됨. 인접한 텍스트나 인라인 요소가 그 주위를 자연스럽게 감싸도록 배치가 되는 것을 말함. none : 기본값. 요소를 띄우지 않음. left : 왼쪽에 띄움 right : 오른쪽에 띄움 inherit : 부모 요소로부터 상속함 initial : 기본값으로 설정 clear 속성 float의 left나 right값을 취소함. clear: none; - 기본값 clear: left; - 왼쪽을 취소 clear: right; 오른쪽을 취소 clear: both; 둘다 취소 예시 팥빙수 조아팥빙수 조아팥빙수 조아팥빙수 조아팥빙수 조아 팥빙수 조아팥빙수 조아팥빙수 조아팥빙수 조아팥빙..

• format_list_bulleted CSS
• · 2022. 11. 1.
• textsms

CSS 06 : 네비게이션 바(상단바) 만들기

CSS 06 : 내비게이션 바(상단바) 만들기 inline-border를 활용해 웹페이지의 상단바를 만들어 보자. home about service contact feedback 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 내비게이션 링크(navigation links)들의 집합을 정의할 때 사용한다. 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있다. 왼쪽에 동그란 점을 없애고 각 글자들의 링크를 없앤다. home about service contact feedback 글꼴 속성과 list 속성 값을 none으로 초기화하였다. style코드를 다음과 같이 수정한다. 글자를 흰색으로 바꾸고 nav태그의 배경색을 blueviolet으로, 전체 패딩과 마진 값을 0으로 초기화한..

• format_list_bulleted CSS
• · 2022. 11. 1.
• textsms

CSS 05 : display 속성(none, block, inline, inline-block

CSS 05 : display 속성(none, block, inline, inline-block display 속성 HTML요소를 어떻게 표시할지를 결정. display: block이면 Block Level Element이며, display: inline일 경우 inline Level Element. -> 기본 4가지 값 none : 요소를 보이지 않게 설정. block : 가로 영역을 모두 채움 inline : 콘텐츠만큼 영역을 차지. 줄 바꿈 X. width, height지정 X inline-block : inline처럼 콘텐츠만큼 영역을 차지해 가로 배치 가능, block처럼 내부 속성인 width, height등과 같은 값은 변경 가능. block Display Block content conte..

• format_list_bulleted CSS
• · 2022. 11. 1.
• textsms