🎨 Color / Image 웹페이지 꾸미기
🌈 배경 꾸미기
배경에 그라데이션 넣기
- 그라데이션 : 두 가지 이상의 색을 점점 변화시켜가며 채색하는 방식
👉 예제 보기
background: linear-gradient(색1, 색2)linear-gradient(각도deg, 색1, 색2)linear-gradient(각도, 색1 퍼센트값, 색2)- 퍼센트값으로 색상 분배 구간을 지정
linear-gradient(색1, 색2, 색3)- 예:
linear-gradient(red 20%, blue 50%, green 80%)
- 예:
📍 포지셔닝
웹 페이지는 기기마다 다르게 보이므로 요소 위치를 제어하는 포지셔닝이 중요합니다.
기본은 <span>(inline)과 <div>(block)의 성격 차이, 그리고 display 속성.
👉 예제 보기
position 속성
- static : 기본값. 위치 조정(top/left 등) 불가
- relative : 자기 원래 위치 기준으로 이동. 원래 자리 공간은 유지
- absolute :
static이 아닌 첫 부모 기준으로 이동. 공간 유지 ❌ - fixed : 브라우저 뷰포트 기준으로 고정. 스크롤과 무관
- sticky : 스크롤 시 특정 위치까지 따라오다 멈춤
z-index 속성
👉 예제 보기
- 요소의 쌓임 순서를 결정
- 기본값:
auto(=0) - 큰 값일수록 위로 올라감 → 광고 배너에
z-index: 999;자주 사용됨
📐 Flex 레이아웃
부모에 적용하는 Flex 속성
display: flex | inline-flexflex-direction: 정렬 방향 (row, column 등)justify-content: 주 축 정렬 (start, center, end, space-between 등)align-items: 교차 축 정렬 (stretch, center, flex-start, flex-end)flex-wrap: 자식 줄바꿈 (nowrap, wrap)align-content: 여러 줄 정렬 방식gap: 요소 간 간격
자식에 적용하는 Flex 속성
flex-basis: 요소 기본 크기flex-shrink: 공간 부족 시 축소 비율flex-grow: 남는 공간 비율
👀 요소를 감추는 방법
👉 예제 보기
opacity: 0;→ 보이지 않지만 기능은 존재visibility: hidden;→ 보이지 않고 기능도 ❌, 공간은 유지display: none;→ 보이지 않고 기능도 ❌, 공간도 제거
⚡ CSS 고급 기능
📦 반복 및 공통 스타일
@import url("파일.css");→ 다른 CSS 파일 불러오기- 변수 사용:
:root {
--color-main: #FF4200;
--font-large: 24px;
}
h1 { color: var(--color-main); font-size: var(--font-large); }🌀 벤더 프리픽스
브라우저별 최신 기능 지원:
-webkit-: Chrome, Safari, Opera-moz-: Firefox-ms-: Edge, IE-o-: 구 Opera
→ 순서대로 작성 후 마지막에 표준 속성 작성
✍️ 서체 스타일링
Google Fonts 사용
- Google Fonts 접속
Noto Sans KR검색 → 링크 태그 복사 후<head>에 삽입- CSS에서
font-family: 'Noto Sans KR', sans-serif;사용
⚙️ JavaScript
📌 발생 배경
- 웹페이지를 동적으로 만들기 위해 등장
- 사용자 상호작용 → UX 강화
⭐ 주요 특징
- 인터프리터 언어
- 동적 타입 (타입 선언 필요 없음)
- 객체 기반
- 싱글 스레드 + 비동기 처리 지원
✅ 장점
- 모든 브라우저 기본 지원
- 유연한 문법
- 활용 범위 넓음 (웹, 서버, 앱)
- NPM 생태계 풍부
⚠️ 단점
- 보안 취약 가능성
- 예측 어려운 오류 발생
- (옛날) 속도와 호환성 문제 → ES6 이후 개선
console.log('Hello, JavaScript!');- HTML 속성값:
""사용 - JS 문자열:
''권장
