728x90 반응형 분류 전체보기55 CSS 기초(9) flex flex = 가로·세로 정렬, 간격 맞추기, 가운데 정렬을 “한 줄로” 해결하는 레이아웃 방식 flex는 부모(컨테이너)와 자식(아이템)으로 나뉨html 1 2 3css.container { display: flex; /* ✅ 여기서 flex 시작 */}display: flex는 무조건 “부모”에게 준다!flex 기본 방향: flex-direction.container { display: flex; flex-direction: row; /* 기본값: 가로 */}값방향row가로 (기본)column세로row-reverse가로 역순column-reverse세로 역순가로 정렬 핵심: justify-contentjustify-content: flex-start; /* 왼쪽 */justify-cont.. 2026. 2. 21. CSS 기초(8) float float란?요소를 왼쪽이나 오른쪽으로 띄워서,텍스트나 다른 요소가 그 옆을 감싸도록 만드는 속성원래 목적은 신문처럼 이미지 옆에 글자 흐르게 하려고 만든 속성float: left; /* 왼쪽으로 띄움 */float: right; /* 오른쪽으로 띄움 */float: none; /* 기본값 */float가 적용되면 일어나는 변화 3가지요소가 왼쪽 또는 오른쪽으로 이동함요소가 위쪽으로 최대한 붙음요소가 공중으로 뜨면서, 다음 요소들이 옆으로 흐름1️⃣ 가장 기본 예제 (float: left)ABC.box { width: 100px; height: 100px; float: left;}.red { background: red; }.blue { background: blue; }.green { bac.. 2026. 2. 21. CSS 기초(7) 인라인요소 가운데정렬 인라인 요소는 자기 자신에게 margin: auto가 안 먹는다.-> 부모 요소에 text-align: center.parent { text-align: center;}parent"> 인라인요소span, a, input 같은 인라인 요소는 전부 이 방식으로 가운데 정렬a 태그(링크) 가운데 정렬 가운데 링크.box { text-align: center;}img(이미지) 가운데 정렬 .img-box { text-align: center;}인라인 요소에 margin: auto 안 되는 이유 (시험에 잘 나옴)span { margin: 0 auto; /* ❌ 효과 없음 */}인라인 요소는 width 개념이 없기 때문margin auto는 블록 요소 + width가 있어야만 작동구분s.. 2026. 2. 21. CSS 기초(6) font CSS font 핵심 정리font-family → 글꼴 종류font-size → 글자 크기font-weight → 두께font-style → 기울임line-height → 줄 간격letter-spacing → 자간text-transform → 대소문자 변환1. font-family (글꼴 종류)p {font-family: Arial;}✅ 여러 개 쓰는 이유 = 앞 글꼴이 없을 경우 대비font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif;✅ 기본 글꼴 분류serif → 명조 계열 (끝에 장식 있음)sans-serif → 고딕 계열 (웹에서 가장 많이 씀)monospace → 고정폭 (코딩용)font-family: sans-serif;2. fo.. 2026. 2. 21. CSS 기초(5) background background-color (배경색)background-image (이미지 넣기)background-repeat (반복 설정)background-position (위치)background-size (크기 조절)background-attachment (고정 여부)1️⃣ background-color (배경색).box { background-color: #f5f5f5;}색상 이름 / HEX / RGB / RGBA 모두 가능✔ 투명한 배경 = transparent2️⃣ background-image (배경 이미지 넣기).box { background-image: url("image.jpg");}여러 장 가능background-image: url("img1.png"), url("img2.png");.. 2026. 2. 21. CSS 기초(4) position CSS에서 요소를 어디에 놓을지(위치) 결정하는 속성총 5가지:static (기본값)relativeabsolutefixedsticky1. static (기본값)position: static;모든 HTML 요소의 기본 상태그냥 흐름대로(위→아래) 배치됨top, left 같은 ‘위치 이동값’ 사용 불가능→ 딱히 스타일 지정 안 했을 때의 기본 레이아웃2. relative (상대 위치)position: relative;top: 10px;left: 20px;원래 있던 자리 기준으로 움직인다✔ 흘러가는 자리는 그대로 유지됨(공간 차지 O)예시)원래 위치에서 조금만 밀고 싶을 때 사용📌 relative의 중요한 역할:→ absolute를 위한 기준점이 되어준다!3. absolute (절대 위치)pos.. 2026. 2. 21. 이전 1 2 3 4 ··· 10 다음 728x90 반응형