'코딩일지' 카테고리의 글 목록 (10 Page)

728x90

<!DOCTYPE html>

<head>

<title>transition</title>

<style>

img {

width: 500px;

/* transition : 요소가 영향을 받는 선택자가 변경될 때 변경되는 CSS 속성에 대해 변화가 완료되기 까지 걸리는 시간과 방법에 대해 정의한다.*/

transition-duration: 5000ms;

/* transition-duration : transition이 완료되기 까지 걸리는 시간 지정. ms 혹은 s단위 사용.*/

transition-timing-function: ease;

/* transition-timing-function: 변화가 생긴 속성이 적용되는데 사용될 함수 지정.

ease-in : 시작은 느리게 끝은 빠르게

ease-out : 시작은 빠르게 끝은 느리게

ease-in-out : 시작과 끝은 느리게 중간이 빠르게

ease : ease-in-out이랑 비슷한데 시작이 좀 더 빠름

linear : 선형

cubic-bezier : 사용자 지정 입방체 베지어곡선에 따름 모든 함수는 시간대비(0~tran'-dur') 속성 변환 완료율(%)에 따른 2~3차 방정식을 풀이 될 수 있다.

*/

transition-property: ;

/* transition-property : 변화하는 속성을 제한한다. 속성을 콤마로 구분하여 여러개를 사용할 수 있음*/

/* transition 을 적용하는 모든 속성은 중간값이 있어야 한다.

가령, display나 position은 적용되지 않으며 width 나 height 같은 경우 또한 auto에서 리터럴로 적용할 수 없다.*/

}

img:hover {

filter: blur(10px) grayscale(100%);

}

</style>

</head>

<body>

</body>

</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

배열 (0)	2022.12.25
for(반복문) (0)	2022.12.25
transform(요소의 형태나 위치를 변환) (2)	2022.12.24
padding(외부 여백) (0)	2022.12.24
position (0)	2022.12.24

728x90

<!DOCTYPE html>

<head>

<title>transform</title>

<style>

/* transform : 요소의 형태나 위치를 변환시키기 위해 사용한다.*/

div {

top: 50%;

left: 50%;

width: 300px;

height: 300px;

background-color: rgb(1, 252, 252);

transform: translate(-50%, -50%) rotate(45deg) scale(50%);

/* transform 함수

- 띄우기로 구분하여 여러 함수 사용 가능

translate(x, y) : x 축으로 a만큼, y축으로 b만큼, a나 b에 %값이 들어가면 각 값은 가로길이, 세로길이의 비율이 됨.

translateX(a) : x축으로 a만큼. a에 %값이 들어가면 각 값은 가로길이, 세로길이의 비율이 됨.

translateY(b) : y축으로 b만큼. b에 %값이 들어가면 각 값은 가로길이, 세로길이의 비율이 됨.

rotate(x) : a도 만틈 회전함. 반드시 deg단위 사용

scale(a) : a비율 만틈 확대/축소한다. 기본 값 1(100%)

*/

position: absolute;

}

</style>

</head>

<body>

</body>

</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

for(반복문) (0)	2022.12.25
transition(CSS속성 변환 시간제어) (0)	2022.12.24
padding(외부 여백) (0)	2022.12.24
position (0)	2022.12.24
opacity(투명도 설정) (0)	2022.12.24

728x90

<!DOCTYPE html>

<head>

<title>padding</title>

<style>

span {

background-color: red;

padding: 15px;

/* padding : 외부 여백을 지정한다.*/

/* padding-top, matgin-right, padding-bottom 사용가능.*/

}

</style>

</head>

<body>

</body>

</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

transition(CSS속성 변환 시간제어) (0)	2022.12.24
transform(요소의 형태나 위치를 변환) (2)	2022.12.24
position (0)	2022.12.24
opacity(투명도 설정) (0)	2022.12.24
margin(외부여백) (0)	2022.12.24

728x90

<!DOCTYPE html>

<head>

<style>

body > div {

width: 200px;

height: 200px;

background-color: brown;

position: relative;

overflow: auto hidden;

/* overflow : x y */

/* overflow-x : a ; */

/* overflow-y : a ; */

/* auto : 안넘치면 아무것도 안함, 넘치면 스크롤*/

/* scroll : 안넘쳐도 스크롤바 보임*/

/* hidden : 넘치는 것은 안보이게 함*/

/* visible : 넘쳐도 그냥 보이게 함(기본 값)*/

}

body > div > div:nth-child(1) {

/* top: 25px; */

width: 100px;

height: 100px;

background-color: darkorange;

position: relative;

/*

position 속성 값

- static : 원래 있어야 하는 위치에 있게 된다.(기본값)

- relative : position 속성 값이 static 이었을때의 위치를 기준으로 움직인다.

- absolute : position 속성 값이 static 이 아닌 가장 가까운 부모/선조를 기준으로 움직인다. (없다면 문서 자체)

- fixed : 부모/선조 관계 없이 문서를 기준으로 하며 스크롤[ 영향을 받지 않고 그 자리에 떠있음.

이떄 absolute 및 fixed 는 다른요소의 흐름과 배치에 영향을 미치지 않는다.

*/

z-index: 1;

/* z-index : 화면에 표시될 순위. 기본값 0. 수치가 클수록 화면에 보이게 된다. 이 값이 같을 때에는 HTML상 보다 뒤에 명시된 요소가 우선 보이게 된다.*/

}

body > div > div:nth-child(2) {

top: 50px;

left: 200px;

width: 100px;

height: 100px;

background-color: green;

position: absolute;

z-index: 2;

}

body > div > div:nth-child(3) {

right: 25px;

bottom: 25px;

width: 100px;

height: 100px;

background-color: deeppink;

position: fixed;

}

span {

position: absolute;

}

</style>

</head>

<body>

<div>

</div>

aaaaaaaaaaaaaaaaaaaaaaaa<span>123123</span>aaaaaaaaaaaaaaaaaaaaaaaaaaa

</body>

</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

transform(요소의 형태나 위치를 변환) (2)	2022.12.24
padding(외부 여백) (0)	2022.12.24
opacity(투명도 설정) (0)	2022.12.24
margin(외부여백) (0)	2022.12.24
font(폰트 설정과 외부 폰트 적용) (0)	2022.12.24

728x90

<!DOCTYPE html>

<head>

<title>opacity</title>

<style>

div {

width: 200px;

height: 200px;

background-color: red;

color: black;

opacity: 50%;

/* opacity : 요소 자체의 투명도 설정 0~100% */

/* 단, 내용 전체도 같이 투명해짐으로 배경 투명 목적으로 상요하면 안됨.*/

}

</style>

</head>

<body>

<div>글씨글씨글씨글씨글씨글씨</div>

</body>

</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

padding(외부 여백) (0)	2022.12.24
position (0)	2022.12.24
margin(외부여백) (0)	2022.12.24
font(폰트 설정과 외부 폰트 적용) (0)	2022.12.24
flex (0)	2022.12.24

728x90

<!DOCTYPE html>

<head>

<title>margin</title>

<style>

span {

background-color: red;

margin: 15px;

/* margin : 외부 여백을 지정한다.*/

/* margin-top, matgin-right, margin-bottom 사요가능.*/

}

</style>

</head>

<body>

</body>

</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

position (0)	2022.12.24
opacity(투명도 설정) (0)	2022.12.24
font(폰트 설정과 외부 폰트 적용) (0)	2022.12.24
flex (0)	2022.12.24
filter(이미지나 요소에 효과주기) (0)	2022.12.24

728x90

<!DOCTYPE html>

<head>

<style>

div:nth-child(1) {

font-family: 'Black Han Sans', sans-serif;

/* font-family: 서체 지정, ...*/

font-weight: 400;

/* font-weight: 글씨 굵기 설정*/

/* font-size: 글씨 크기(pt, px 등)*/

font-size: 32px;

}

div:nth-child(2){

font-family: 'Nanum Brush Script', cursive;

}

div:nth-child(3){

font-family: 'Nanum Brush Script', cursive;

}

</style>

</head>

<body>

<div>대한민국은 민주공화국이다.</div>

<div>대한민국으 주권은 국민에게 있고, 모든 권력은 국민으로부터 나온다.</div>

<div>去る20日、韓国のコスピ(kospi)指数が下落した。</div>

</body>

</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

opacity(투명도 설정) (0)	2022.12.24
margin(외부여백) (0)	2022.12.24
flex (0)	2022.12.24
filter(이미지나 요소에 효과주기) (0)	2022.12.24
display(표시 설정) (0)	2022.12.24

728x90

<!DOCTYPE html>

<head>

<style>

body > .flex-container {

top: 0;

left: 0;

width: 100%;

height: 250px;

/* height: 100%; */

background-color: rgb(238, 199, 27);

position: absolute;

/* transform: translateY(-50%); */

display: flex;

/* display : flex; > 해당 선택자에 의해 선택되는 요소가 가지는 자식요소의 정렬을 쉽게 할 수있음.*/

flex-direction: row;

/*flex-direction: 내부 자식 FLEX 방향

row : 가로방향으로

row-reverse : 가로 역방향으로

column : 세로방향으로

column-reverse : 세로 역방향으로

*/

justify-content: center;

/* justify-content: flex-direction과 수평한 방향에 대한 정렬

flex-start : 시작점 정렬

center : 가운데

flex-end : 끝점 정렬

*/

align-items: stretch;

/* align-items: flex-firection 과 수직한 방향에 대한 정렬

flex-start : 시작점 정렬

center : 가운데

flex-end : 끝점 정렬

stretch : 늘임

*/

}

body > .flex-container > .s {

width: 100px;

/* height: 100px; */

background-color: rgb(0, 89, 255);

}

body > .flex-container > .r {

width: 50px;

/* height: 50px; */

/* background-color: rgb(0, 255, 149); */

border-radius: 50%;

flex-grow: 1;

flex-shrink: 1;

}

body > .flex-container > .d {

width: 150px;

/* height: 150px; */

background-color: rgb(140, 0, 255);

}

</style>

</head>

<body>

</div>

</body>

</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

margin(외부여백) (0)	2022.12.24
font(폰트 설정과 외부 폰트 적용) (0)	2022.12.24
filter(이미지나 요소에 효과주기) (0)	2022.12.24
display(표시 설정) (0)	2022.12.24
cursor(커서모양) (0)	2022.12.24

[ 여기블로그 ]

코딩일지

transition(CSS속성 변환 시간제어)

'코딩일지 > WEB' 카테고리의 다른 글

transform(요소의 형태나 위치를 변환)

'코딩일지 > WEB' 카테고리의 다른 글

padding(외부 여백)

'코딩일지 > WEB' 카테고리의 다른 글

position

'코딩일지 > WEB' 카테고리의 다른 글

opacity(투명도 설정)

'코딩일지 > WEB' 카테고리의 다른 글

margin(외부여백)

'코딩일지 > WEB' 카테고리의 다른 글

font(폰트 설정과 외부 폰트 적용)

'코딩일지 > WEB' 카테고리의 다른 글

flex

'코딩일지 > WEB' 카테고리의 다른 글

+ Recent posts

티스토리툴바