none = block과 inline의 중간 형태인데 이는 block과 달리 줄 바꿈이 되지 않고 넓이나 높이를 지정이 불가능하다. word같은 문서 에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문자엥 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈이 되지 않듯이 inline요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.
float
left = 왼쪽으로 정렬
right = 오른쪽으로 정렬
inherit = 부모 요쇼에서 상속이 된다.
none = 띄우지 않음 (기본값)
background
background
태그의 배경을 지저하는 속성으로, font 속성과 비슷하게 세부적인 속성들을 한번에 쓸수 있는 속성입니다.
color = 배경 색을 지정합니다. #000000 & rgb(000,000,000)
image = 배경 이미지를 지정합니다.
position = 배경 이미지의 위치를 지정합니다.
attachment = 배경 이미지의 스크롤 여부를 정합니다. scroll 스크롤 속성의 부여 fixed 스크롤속성 부여하지 않음.
repeat = 배경의 반복을 정합니다. repeat-x는 가로 방향반복 repeat-y는 세로방향 반복 no-repeat는 반복을 하지 않게 합니다.
size = 가로 세로 축의 크기를 정합니다. 가로축 & 세로축 크기 = px ,와 % 가로/세로 맞춤 = cover / contain cover = 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소 합니다. 비율이 유지 됩니다. contain = 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소 합니다. 가로 세로 비율을 유지합니다.
image = 이미지를 부여합니다. url() = 이미지 파일이 있는 경로를 지정합니다 이값은 절대값과 상대값을 모두 이용가능합니다. GRADIENT = 이미지의 기울어짐 정도를 정할수있습니다. linear = 선형 그레디언트 를 의미하며 시작색상과 끝색상 2가지를 지정해야 합니다. 단 중간에 선택적으로 색상을 더 넣을 수 있습니다. 여러 가지 색상을 넣을 때 쉼표로 분리해서 작성합니다. ex) linear-gradient(orange,yellow,green) radial = 반지름형 그레디언트 를 의미하며 중앙을 축으로 반지름을 그려줍니다. 이는 최소한 두가지의 색상을 지정해야하며 색상에 대한 작성은 linear와 동일합니다. 다만 linear와 다르게 색상점 위치도 같이 설정할수가 있습니다 0일수록 중앙 100일수록 끝으로 다가갑니다. moz 유형의 gradient = 파이어 폭스에서 적용이 가능합니다. 사용법은 크게 다르지 않으니 시작과 종료에 etc를 첨부해야 합니다. 또한 각각의 속성의 시작 위치에서 각도 를 따로 지정해 줄수있습니다.
요소의 변환
TRANSFORM
각각의 지정된 요소를 변환시킬수 있는 기능입니다.
-moz- = 파이어폭스에서 사용하는 함수입니다 rotate(00deg) = 이는 특정한 요소를 00만큼 회전시킨다는 의미입니다.
-webkit- = 구글, 사파리 브라우저에 적용됩니다. scale(1,2 1,2) = 이는 특정한 요소를 가로세로 각각 1,2 1,2를 늘린다는 의미 입니다. 하나만 기입시 동일하게 확대 시킵니다.
-ms- = 익스폴로러에 적용 보통 생략합니다. skew(0deg, 0deg) =이는 특정한 요소를 가로 세로 각각 축을 잡고 비튼다는 의미입니다.
-o- = 오페라 브라우저에 사용되는 함수입니다. transla (px,px) = 이는 특정한 요소를 가로 세로 각각 00px 00px만큼 이동시킨다는 의미 입니다.
TRANSITION
움직임과 관련있는 가상클래스들과 연동해서 작용합니다.
all = 모든 속성이 transition효과를 얻습니다
none = 지정하지 않습니다
porperty = transition효과를 얻게될 속성을 지정합니다.
시간지정 = 0.2s처럼 지정할수있으며 수행되는 시간을 의미합니다.
linear = 전환 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
ease = 기본값으로 전환 효과가 첨첨히 시작되어, 그다음에 빨라지고 마지막에 느려집니다.
CSS 명칭 정리
block과 달리 줄 바꿈이 되지 않고 넓이나 높이를 지정이 불가능하다.
word같은 문서 에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문자엥 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고
다음에 나오는 글이 줄바꿈이 되지 않듯이 inline요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.
세부적인 속성들을 한번에 쓸수 있는 속성입니다.
scroll 스크롤 속성의 부여 fixed 스크롤속성 부여하지 않음.
no-repeat는 반복을 하지 않게 합니다.
가로축 & 세로축 크기 = px ,와 %
가로/세로 맞춤 = cover / contain
cover = 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소 합니다. 비율이 유지 됩니다.
contain = 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소 합니다. 가로 세로 비율을 유지합니다.
url() = 이미지 파일이 있는 경로를 지정합니다 이값은 절대값과 상대값을 모두 이용가능합니다.
GRADIENT = 이미지의 기울어짐 정도를 정할수있습니다.
linear = 선형 그레디언트 를 의미하며 시작색상과 끝색상 2가지를 지정해야 합니다.
단 중간에 선택적으로 색상을 더 넣을 수 있습니다.
여러 가지 색상을 넣을 때 쉼표로 분리해서 작성합니다. ex) linear-gradient(orange,yellow,green)
radial = 반지름형 그레디언트 를 의미하며 중앙을 축으로 반지름을 그려줍니다.
이는 최소한 두가지의 색상을 지정해야하며 색상에 대한 작성은 linear와 동일합니다.
다만 linear와 다르게 색상점 위치도 같이 설정할수가 있습니다 0일수록 중앙 100일수록 끝으로 다가갑니다.
moz 유형의 gradient = 파이어 폭스에서 적용이 가능합니다. 사용법은 크게 다르지 않으니 시작과 종료에 etc를 첨부해야 합니다.
또한 각각의 속성의 시작 위치에서 각도 를 따로 지정해 줄수있습니다.
rotate(00deg) = 이는 특정한 요소를 00만큼 회전시킨다는 의미입니다.
scale(1,2 1,2) = 이는 특정한 요소를 가로세로 각각 1,2 1,2를 늘린다는 의미 입니다. 하나만 기입시 동일하게 확대 시킵니다.
skew(0deg, 0deg) =이는 특정한 요소를 가로 세로 각각 축을 잡고 비튼다는 의미입니다.
transla (px,px) = 이는 특정한 요소를 가로 세로 각각 00px 00px만큼 이동시킨다는 의미 입니다.