CSS6 8. CSS_position 1. static 👉 아무 position을 주지 않으면, 모두 static 상태이고 HTML 작성 순서대로 위에서 아래로 쌓입니다.이게 각 박스의 **“자기 자리”** 2. relative 3. absolute ✅ 정리자기 자리 = static일 때 차지하는 원래 자리relative: 자기 자리 기준으로 이동 (자리 차지 유지)absolute: 자기 자리 버리고 부모 기준 이동 (자리 차지 없음) 2025. 9. 7. 6. CSS_테이블에 관련된 속성 알아보기 테이블 속성 예제1 ✅ 정리 포인트큰 테두리 vs 셀 테두리#table1 { border: … } → 테이블 자체 외곽선#table1 th, #table1 td { border: … } → 내부 칸마다 선border-radius셀의 모서리를 둥글게 만들 수 있음. (10px)의사 클래스 선택자td:first-child → 각 행에서 첫 번째 칸만 선택tr:last-child > td → 마지막 행의 모든 칸 선택테이블 속성 예제2 border-collapse: collapse; → 셀 테두리 겹침 제거margin:20px auto; → 위아래 여백 20px, 좌우 자동 → 가운데 정렬테이 제목(caption), 제목(th), 일반 셀(td)에 모두 검은색 1px 테두리 📌 caption 이란? .. 2025. 9. 7. 5. CSS_그림자 효과 만들기 h1{background : #ffcc33;width : 400px;/* 두개 적으면 위아래/ 4개 적으면 좌우위아래 */padding : 10px 20px 30px 40px; text-shadow : 10px 20px 5px #000;box-shadow : 20px -20px 15px blue;} padding값 1개: 전부 동일값 2개: 위·아래 / 좌·우값 3개: 위 / 좌·우 / 아래값 4개: 위 / 오른쪽 / 아래 / 왼쪽 (시계 방향)text-shadow가로 오프셋 세로 오프셋 번짐 정도 색상box-shadow가로 오프셋 세로 오프셋 번짐 정도 색상세로값이 음수면 위쪽으로 그림자 생김 2025. 9. 6. 4. CSS_배경 관련 CSS 속성 📌 body 스타일 body { background-color : silver; /* 배경색 */ background-image : url(images/shoes1.png); /* 배경 이미지 */ background-repeat: repeat-y; /* 세로(y축)로만 반복 */ background-position : top right; /* 이미지 위치: 위쪽 오른쪽 */ background-attachment : fixed; /* 스크롤해도 배경 고정 */} background-color : 기본 바탕색. (이미지 비는 부분 채움)background-image : 배경에 들어갈 이미지.background-repeat.. 2025. 9. 6. 3. CSS_글자와 관련된 속성 알아보기 p { font-family: "Times New Roman", Arial, sans-serif; font-size: 20px; font-style: italic; font-weight: bold; font-variant: small-caps; line-height: 1.5; font: italic small-caps bold 20px/1.5 "Times New Roman", serif;} 📌 font 속성 요약font-family : 글꼴 지정font-size : 글자 크기font-style : 글자 기울임 (normal / italic / oblique)font-weight : 굵기 (normal / bold / 100~900)font-variant : 작은 대문자(small-caps).. 2025. 9. 6. Jinja 템플릿 엔진 반가워요, {{ data.name }}님! 접속 경로: {{ request.url }}main.py (FastAPI 연동) from fastapi import FastAPI, Requestfrom fastapi.templating import Jinja2Templatesapp = FastAPI()templates = Jinja2Templates(directory="templates")@app.get("/")async def read_root(request: Request): data = {"name": "사용자", "title": "홈페이지"} return templates.TemplateResponse("index.html", {"request": request, "data": da.. 2023. 12. 18. 이전 1 다음