display : flex 요소를 통해 레이아웃 구성시 별다른 사이즈, 크기, 정렬을 지정하지 않아도 유연하게 처리하는 속성 item (내부요소)을 감싸는 요소의 형식을 flex로 변경함 item에 자동으로 지정된 margin 요소가 모두 사라지고 content 영역 만큼의 크기만 가지게 됨 item에 별도에 높이, 너비가 지정되어 있지 않다면 item의 높이는 flex-container의 높이/너비와 같아지게 됨 (flex-container 정렬 방향에 따라 다름) flexbox 요소의 정렬되는 방향, 순서, 요소간의 간격을 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식 flexbox 이용할 때 알아야 하는 것 flexbox의 구성 flex-container : 정렬이 필요한 요소들을 감싸..
Front-End/CSS
애니메이션 속성을 점차적으로 변화시켜 움직이는 효과를 내는 기법 트랜지션과 비교했을 때 시작스타일과 종료스타일을 부드럽게 이어주는 기능을 하는것은 같음 단 애니메이션은 중간에 원하는 위치에 @keyframes를 이용하여 중간스타일도 지정 가능 @keyframes 애니메이션 시작지점과 종료지점의 스타일을 정하고 keyframes의 이름 지정 시작지점과 종료지점 두개만 설정할 경우 from{ }to{ }로 설정하면 되고 중간에 하고싶은 작업이 있다면 %로 구분하여 지정 @keyframes 키프레임명{ 선택자 {스타일;} } 시작지점과 종료지점 두개만 설정할 경우 .anitest1:checked+div{ width:200px; animation-name:ani; /* 애니메이션명 지정 */ animation-..
트랜지션 태그가 특정 동작 (마우스 클릭, 마우스 호버)에 의해 변형 (이동, 확대, 찌그러짐) 되는 것 태그 이동 (translate) translate 함수를 이용하면 설정된 태그가 특정위치로 이동하게됨 슬라이드바 등에 활용됨 transform : translate(x축,y축) : 태그를 이동시킬 수 있음 tramslateX(x축) : 가로로 이동 tramslateY(y축) : 세로로 이동 perspective(원근감px) tramslateZ(px); : 3D 변형 perspective : 원근 효과, 깊이와 거리감 부여 (클 수록 더 멀리 있는 것처럼 보임) tramslateZ : 3D 공간에서 Z 축을 기준으로 원소를 이동 (양수는 가까이, 음수는 멀리) .translate:hover{ trans..
content 영역의 크기를 조절하는 속성 (width, height) width : 가로 길이 조정 height : 세로 길이 조정 px (고정크기) : 요소 크기가 변하지 않음 % (가변크기) : 부모 요소 크기와 화면 크기에 따라 요소 크기가 달라짐 vh : 현재 화면 높이 (현재 화면의 vh%만큼의 비율) 화면 배치 방법 변경 (display) 블럭요소와 인라인요소의 속성을 변경해서 배치 방식을 변경할 수 있음 inline : 블럭 요소를 인라인 요소로 변경 inline-block - 인라인 요소로 배치를 하나 width, weight 의 크기는 유지됨 block - 기존 인라인 요소를 블럭 요소로 변경 none - 화면에 안보임, 공간 차지X 선택자{ display:inline/inline-bo..
배경색 지정 (background-color) background-color: 색상; 배경색 적용 범위 지정 (background-clip) border-box (기본값) : content, padding, border까지 배경 적용 padding-box : content, padding까지 배경 적용 content-box : contents 영역만 배경 적용 background-clip : border-box; 배경으로 이미지 적용 방법 background-image:url : 적용할 이미지 경로 지정 background-repeat : 배경 이미지 반복 여부 지정 repeat : 가로 세로로 반복, 기본값 repeat-x : 가로로만 반복 repeat-y : 세로로만 반복 no-repeat : 반복x..
테두리 스타일 지정 (border-style) border-위치-style: none/dotted/dashed/solid/double/groove/ridge/inset/outset; none dotted : 점선 dashed : 긴 점, 각진 테두리 solid : 실선 double : 두 줄 실선 groove : 파인 선 ridge : 불룩한 선 inset : 위쪽이 튀어나옴 outset : 아래쪽이 튀어나옴 테두리 두께 지정 (border-width) border-위치-width : 테두리두께; 테두리 색상 지정 (border-color) border-위치-color : 테두리색상; 박스에 그림자 효과 (box-shadow) box-shadow : 가로(x) 세로(y) 흐림정도 번짐정도 색상; 둥근 모..
여백 및 간격 관련 스타일 요소 영역 : content(문장) + padding(여백) + border(테두리) width와 heights는 content 영역의 크기를 의미, padding, border 영역 미포함 div 요소는 border 영역 까지를 포함 padding, border 영역 까지 포함하려면 box-sizing 사용 속성 하나로 상하좌우 스타일 지정 css에서 상하좌우 지정할 스타일이 있으면 시계방향 (top-left-bottom-right)으로 한 번에 지정 가능 2개만 정하면 상하, 좌우로 적용됨 1개만 정하면 모든 방향에 적용됨 #test3{ padding : 50px 20px 10px 0px; /*시계 방향(위, 오른쪽, 아래, 왼쪽) */ } padding 내용물영역(cont..
list-style-type 불릿기호를 변경해줄때 사용 ul (순서 없는 목록) 선택자 { list-style-type : none(자주사용됨) / disc(원) / circle(속이 빈 원) / square; } ol (순서 있는 목록) decimal : 목록 항목을 1부터 시작하는 숫자로 표시 decimal-leading-zero : 10 미만 숫자에 01부터 시작하는 두 자리 숫자로 표시 lower-alpha : 알파벳 소문자로 표시 upper-alpha : 알파벳 대문자로 표시 lower-roman : 로마 숫자 소문자 (i)로 표시 upper-roman : 로마 숫자 대문자 (I)로 표시; 선택자{ list-style-type : decimal/decimal-leading-zero; list-s..
글꼴 관련 스타일 속성 (font~) font-familly 글꼴을 지정할 때 사용 쉼표를 사용하여 여러 글꼴을 나열할 때 앞의 글꼴이 없다면 뒤의 대체 글꼴 반영할 수 있음 선택자 { font-family : 글꼴명, 글꼴명; } font-size 글꼴 크기를 변경할 때 사용 px : 픽셀 (고정크기) em : 배수 (가변크기) % : 비율 (가변크기) font-weight 글꼴의 굵기를 표현할 때 사용 선택자 { font-weight:normal/bold/bolder/lighter/100/400/900; } font-varient 텍스트 문구를 작은 대문자로 변경할 때 사용 선택자 {font-variant:small-caps;} font-style 텍스트 문구를 기울이고자 할 때 사용 italic :..
인라인 스타일 방식 스타일을 부여하고자 하는 요소 내에 style 속성을 이용하여 직접적으로 기입하는 방식 재사용성x 인라인이 스타일 방식이 내부스타일 방식보다 우선순위가 높음 인라인 속성은 width, height 적용되지 않음 (display block으로 변경해주면 됨 ) css 기본 선택자 내부 스타일 방식 현재 이 문서에 적용시키고자 하는 스타일 정보를 style 태그 내에 기입하는 방식 단점 : 다른 html 페이지에서 해당 스타일을 쓰지 못함 외부 스타일 방식 스타일 정보만을 따로 관리하는 .css외부문서 만들고 link 통해 연결 (권장) 여러 개의 html 시트에 속성을 불러올 수 있어 재사용성이 좋음 경로가 잘못되면 콘솔에 404에러 뜸 /* rel : 문서의 형식 */
