[CSS]_프론트엔드의 꽃 3

1. Image, Input  요소

• IMG

HTML
<img class="logo" src="hello_logo.jpg" alt="손인사 하는 로고">

-src: 이미지 소스의 URL 혹은 경로를 명시합니다.

-alt: 이미지를 보여줄 수 없을 때, 이미지를 대체할 텍스트를 명시합니다.

CSS
.logo {
    width: 50px;
    height: 50px;
    object-fit: cover;
    object-position: left;
}

-object-fit:

fill의 경우 기본값입니다. 이미지 크기 맞게 종횡비를 변경시킵니다.

cover의 경우 이미지가 종횡비를 유지하고 이미지크기에 맞게 잘립니다.

contain의 경우 이미지가 종횡비를 유지하고 이미지 크기 속에 들어가게 됩니다.

none는 조정되지 않습니다.

 

-object-position:

center, left, right으로 이미지의 보여질 프레임을 조절할 수 있습니다.

 

2. Input 요소

<input class="favorite styled" type="button" value="Add to favorites">
     <!-- 버튼  -->
<fieldset>
    <legend>Choose your monster's features:</legend>

    <div>
      <input type="checkbox" id="scales" name="scales" checked>
      <label for="scales">Scales</label>
    </div>

    <div>
      <input type="checkbox" id="horns" name="horns">
      <label for="horns">Horns</label>
    </div>
</fieldset>
    <!-- 체크박스 -->
<div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
</div>
    <!-- 텍스트 -->
<div>
    <label for="pass">Password (8 characters minimum):</label>
    <input type="password" id="pass" name="password"
           minlength="8" required>
</div>
    <!-- 암호 -->
<input type="submit" value="Sign in">
    <!-- 제출 -->
<fieldset>
    <legend>Select a maintenance drone:</legend>

    <div>
      <input type="radio" id="huey" name="drone" value="huey"
             checked>
      <label for="huey">Huey</label>
    </div>

    <div>
      <input type="radio" id="dewey" name="drone" value="dewey">
      <label for="dewey">Dewey</label>
    </div>

    <div>
      <input type="radio" id="louie" name="drone" value="louie">
      <label for="louie">Louie</label>
    </div>
</fieldset>
    <!-- 라디오박스 -->

3. Transform, Animation

• Transform

.img1 {
transform: matrix(1, 2, 3, 4, 5, 6);
}

.img2 {
transform: translate(120px, 50%);
}

.img3 {
transform: scale(2, 0.5);
}

.img4 {
transform: rotate(0.5turn);
}

.img5 {
transform: skew(30deg, 20deg);
}

.img6 {
transform: scale(0.5) translate(-100%, -100%);
}

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

이 사이트에서 직접 실험해볼 수 있습니다.

 

• Animation

@keyframes scale {
	0% {
    	transform:scale(1.0);
    }

	25% {
    	transform:scale(0.75);
    }
	
	50% {
    	transform:scale(0.5);
    }

	75% {
		transform:scale(0.75);
    }

	100% {
    	transform:scale(1.0);
    }    	
}

이렇게 각 프레임 단계에 따라서 원하는 효과를 적용할 수 있습니다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_animations/Using_CSS_animations

CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN

 

4. Flexbox 속성

• Flex container properies

• flex-direction : 메인 가로축과, 크로스 세로축을 기준으로 정렬하게 됩니다.

div {
	flex-direction: row;

	flex-direction: row-reverse;

	flex-direction: column;

	flex-direction: column-reverse;
}

• flex-wrap

div {
    flex-wrap: nowrap;
    
    flex-wrap: wrap;
    
    flex-wrap: wrap-reverse;
}

• flex-flow : flexdirection flexwrap 의 값을 넣습니다.
• justify-content

-flex-start: items를 왼쪽부터 정렬합니다.

-flex-end: itemls를 오른쪽부터 정렬합니다.

-center: 가운데에 정렬합니다.

-space-between: 양쪽 정렬합니다.

-space-around: 각 아이템 양쪽에 간격을 둡니다.

-space-evenly:  모두 같은 간격을 둡니다.

• align-items

-flex-start: 위에 items가 붙습니다.

-flex-end: 아래에 items가 붙습니다.

-center: 화면 중앙에 items가 정렬됩니다.

-stretch: 화면 위와 아래를 채워 늘어납니다.

-baseline: 텍스트의 줄을 기준으로 

 

• align-content

-flex-start: 위에 items가 붙습니다.

-flex-end: 아래에 items가 붙습니다.

-center: 화면 중앙에 items가 정렬됩니다.

-stretch: 화면 위와 아래를 채워 늘어납니다.

https://codingapple.com/unit/html-19-flex/

 

• Flex items properties

• order: 속성 값을 줍니다. 숫자가 작을 수록 먼저 앞으로 당겨와서 정렬시켜줍니다.
• flex-grow / flex-shrink : 각 정해진 크기를 가지고 나머지 공간을 비율로 나눠서 가져갑니다.

https://blogpack.tistory.com/863