CSS(10)
-
[Flask] html,js,css 등 정적 파일 연결 하는법
1.html 파일 -> 무조건 templates라는 폴더를 만들고 거기다 html 파일들을 넣는다. render_template('파일 이름') 2. js, css 파일 및 사진, 폰트 -> static라는 폴더를 생성 후 넣는다 -> html에 밑에 형식으로 넣어야 적용이 가능
2023.11.07 -
Day2_VSCODE_JavaScript_제어문(반복문_if문과 switch문)
🟢제어문 1. 조건문 [1-1] if문 🔴조건의 범위가 있을 때 사용 if(조건식){ 조건식의 결과가 true일 때 실행할 문장; .... } [1-2] if ~ else문 if(조건식){ true일 경우 실행할 문장; .... }else{ false일 경우 실행할 문장; } 🔴[1-3] if~else if~else문 if(조건식1){ 조건식1이 true일 경우 실행할 문장; }else if(조건식2){ 조건식2이 true일 경우 실행할 문장; }else if(조건식3){ 조건식3이 true일 경우 실행할 문장; }else{ 모든 조건식의 결과가 false일 때 실행할 문장; } 🔴[2]switch 문 🔴조건의 값이 일치할 때 switch(변수){ case 값1: 변수와 값1이 같을 경우 실행할 문..
2023.04.05 -
Day5_VSCODE_CSS CSS 2D+Transform
🟢CSS 2D 도형에 관한 처리 🟢 css animation - 요소의 현재 스타일을 다른 스타일로 변환 🟡@ketframe 시작:0% or from 과정:1% or 5% or 10% 끝: 100% or to [원리] 0% 5% 50%..... 100% 장면1 장면2 장면3 마지막 장면 🟡animation-name: 애니메이션의 이름을 설정 ✔ 🟡animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정 forwards: 애니메이션 완료시, 마지막 프레임을 유지 🟡animation-direction: 애니메이션의 지정 방향 설정 reverse: 반대 순서로 진행 alternate: 정해진 순서로 진행 했다가, 다시 반대순서로 돌아감 reverse-alternate: 반대 순서로 진행..
2023.04.04 -
Day4 VSCODE_CSS Flex
🟡Flex 레이아웃 - 수평정렬을 하기 위한 속성 - 사용법: display: Flex 🟡Flex-wrap -플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 -no-wrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치 -wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김 -wrap-reverce: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단 -위쪽으로 넘김) 플렉스 레이아웃1 플렉스 레이아웃1 1 2 3 예시) nowr 🟡Flex-direction -플렉스 요소들이 배치되는 축의 방향을 결정하는 속성 -row: 기본값 (가로배치) -row-reverce: 가로배치(반대로) -column: 세로배치 -column-reverse: 세..
2023.03.30 -
Day4_VSCODE_CSS 다단 레이아웃 + Flex 레이아웃
🟢다단 레이아웃 - 텍스트를 column 속성으로 다단을 설정 - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 속성 column-count: 단의 개수 column-rule: 단과 단사이의 구분선, 구분의 모양, 두께, 색상 설정 column-gqp: 단과 단 사이의 여백을 설정 column-span: 단과 안의 포함된 요소를 다단편집에서 해제 (all) 코드블록 #container{ width: 1000px; margin:0 auto; } header{ padding: 20px; border: 1px solid gray; margin-bottom: 20px; } #contents{ border:1px solid gray; padding: 20px; width: 700px; float: l..
2023.03.30 -
Day3 VSCODE_CSS Z-Index + Float + Clear
Z-index - HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠수 있음 - 겹치는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용 - 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치 하게 됨 z-index 1번째 div 2번째 div 3번째 div Float - html 요소가 주변(수평으로 나열된)의 다른요소들과 자연스럽게 어울리도록 만들기 위해 사용 - float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐 - float를 적용받은 요소들의 방향을 결졍(left,right) - 컨텐츠 크기 만큼만 영역을 설정(블록태그) - float를 적용받은 요소는 다른 요소보다 위쪽에 위치한다(배경보다 위) float2 박스-1 박스-2 박스-3 박..
2023.03.29