[포스코x코딩온] 웹 풀스택 1주차 회고 -2

sima·2023년 7월 9일

KDT Web-8

KDT web-8

목록 보기

1/17

in-line, block 요소

in-line 요소 종류

span, a, br, em, storng, input, label, img

block 요소 종류

div, table, h1~6, p, form, ul, ol, li 등

(in-line 요소 안에 block 요소 포함할 수 없음.)

inline-block 요소 종류

button, input, select (style의 display : inline-block으로 지정 가능)

CSS 속성

Font
font-weight - 글자 두께
font-size - 글자 크기
line-weight - 한 줄의 높이
font-family - 글꼴 지정
color - 글자 색상
text-align - 문자 정렬(left, right, center, justify)
text-decoration - 문자 선 장식(underline, line-through...)
여백
margin - 태그의 바깥쪽 여백 설정
padding - 태그 안쪽과 content 사이의 여백
(top, right, bottom, left), (top, bottom, left, right), (top, left, right, bottom)
(top, right, bottom, left) 로 단축속성 지정하거나, -방향 속성 이용하여 개별 지정가능
크기
width, height - 요소의 가로, 세로 너비
max-width, max-height, min-width, max-height - 요소의 최대/최소 가로, 세로 너비
Calc() - 원하는 크기 값을 계산해 적용
line-height - 요소 내부 content의 줄 높이
선
border : width, style, color - 요소의 테두리 선(두께, 스타일, 색상) 지정
border-width - 테두리 선 두께, 여백과 마찬가지로 개별지정 가능
border-style - 테두리 선 종류(solid, dotted, dashed...), 개별지정 가능
border-color - 테두리 선 색깔(색상, transparent - 투명), 개별지정 가능
border-radius - 모서리 둥글게 만듬

-box-sizing
content-box - 요소의 내용으로 크기 계산

border-box - 요소의 내용 + padding + border로 크기로 계산

-opacity
0부터 1사이 소수점 숫자, 0에 가까워질수록 투명

-visibility
hidden(모습과 속성 숨김, 자리차지), none(아예 없애버림, 자리차지x)

-overflow
visible - 넘친 내용 보여줌, hidden - 넘친 내용 잘라냄
scroll - 넘친 내용 잘라내고 스크롤바 생성, auto - 넘쳤을 경우에만 잘라내고 스크롤바 생성

-position
relative - 자신의 정적 위치 기준, absolute - 부모 요소위치 기준(부모는 반드시 relative여야 함), fixed - 브라우저 기준

position이 absolute, fixed면 display 속성이 block으로 바뀜

-z-index
요소가 쌓이는 정도 지정, position이 static이 아닐때만 적용

background
background-color - 배경 색상 지정, transparent로 투명하게도 가능
background-image : url(); 배경에 이미지 적용
background-repeat - 배경 이미지 반복, x/y축 지정하여 반복 가능
background-position - 배경 이미지 위치 지정
background-size - 배경 이미지 크기지정, cover - 더 넓은 너비에 맞춤, contain - 더 짧은 너비에 맞춤
background-attachment - 배경 이미지 스크롤 특성, scroll - 요소를 따라서 같이 스크롤, fixed - 이미지가 뷰포트에 고정(스크롤 x)

-display에 flex 속성
부모의 자식들을 수평정렬

flex-direction - 정렬 주 축을 설정(row, column, -reverse)
flex-wrap - 줄바꿈 여부

justify-content - 주 축 정렬방법
(flex-start, flex-end, center, space-between, space-around, space-evenly)

align-items - 교차 축의 한 줄 정렬 방법
(stretch, flex-start, flex-end, center)

align-content - 교차 축의 여러 줄 정렬 방법

전환(transform)
translate() - 축 기준 이동

rotate(degree) - 회전(각도)

scale() - 축 기준 크기

skew() - 축 기준 기울임

backface-visibility - 회전된 요소의 뒷면 숨김 여부(visible, hidden)

전환(transition)
transition : 속성명 지속시간 타이밍함수 대기시간;
transition-property - 전환 효과를 사용할 속성 이름 지정
transition-duration - 전환 효과 지속시간 지정(단위 : s)
transition-timing-function - 전환 효과 타이밍 함수 지정(ease : 느리게-빠르게-느리게, linear : 일정하게)
transition-delay - 전환 효과 몇초 뒤에 시작할 지 대기시간 지정
Animation
@keyframes - CSS의 애니메이션 효과를 직접 지정할 수 있는 기능, 설정되는 값은 to/from, 0% ~ 100% 단위로 지정 가능

예시 코드

	@keyframes cloud1 {
        0% {
          opacity: 0;
          top: 150px;
          left: 230px;
        }
        50% {
          opacity: 1;
          top: 150px;
          left: 430px;
        }
        100% {
          opacity: 0;
          top: 150px;
          left: 230px;
        }
      }
      
     .cloud1 {
       position: absolute;
       top: 150px;
       left: 230px;
       width: 100px;
       height: 50px;
       opacity: 0;
       animation: cloud1 10s linear infinite;
     }