7.1 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기1. 플렉스 박스 레이아웃 개요플렉스 박스(Flexbox)란1차원 레이아웃을 설계하기 위한 CSS 레이아웃 방식한 방향(가로 또는 세로)으로 요소를 정렬하고 배치하는 데 최적화됨플렉스 박스의 구성 요소주축 (main axis)플렉스 아이템이 배치되는 기본 진행 방향의 축교차축 (cross axis)주축과 수직인 방향의 축플렉스 컨테이너 (flex container)display: flex 또는 display: inline-flex가 적용된 부모 요소플렉스 아이템 (flex item)플렉스 컨테이너의 직계 자식 요소레이아웃 확인 방법브라우저 개발자 도구Elements 탭 → flex 아이콘 클릭 → 축 방향 및 정렬 상태 시각적으로 확인 가능2. 플렉..

6.6 전환 효과 속성 (Transition)1. 전환(Transition)이란CSS 속성 값이 한 값에서 다른 값으로 변경될 때 그 변화를 부드럽게 표현하는 효과주로 :hover, :focus 등 상태 변화와 함께 사용2. transition-property전환 효과를 적용할 속성 이름을 지정형식transition-property: ;속성값none : 전환 효과 적용 안 함all : 모든 속성에 전환 효과 적용특정 속성 : width, height, background-color 등3. transition-duration전환 효과가 진행되는 시간 지정형식transition-duration: ;단위: s, mstransition-property와 반드시 함께 사용해야 함4. transition-delay..

float 속성형식float: ;속성값 설명nonefloat 속성을 적용하지 않음. 기본 배치 흐름을 그대로 따름.left요소를 문서 흐름에서 분리하여 왼쪽에 띄워 배치하고, 뒤따르는 요소들은 그 주변을 자연스럽게 흐르듯 배치됨.right요소를 문서 흐름에서 분리하여 오른쪽에 띄워 배치하고, 뒤따르는 요소들은 그 주변을 자연스럽게 흘러가며 배치됨.float 속성 사용 시 주의점float가 적용된 요소는 원래 차지하던 위치나 부모 요소의 높이를 보장하지 않음.따라서 레이아웃이 의도치 않게 무너질 수 있으므로 후속 요소에 clear 속성을 적절히 사용해야 함.clear 속성float 속성의 영향을 받지 않고 요소를 정상적인 문서 흐름에 맞게 배치하기 위해 사용함.형식clear: ;속성값 설명left왼쪽 방향..

시험범위메뉴(Menu)옵션 메뉴(Options Menu)컨텍스트 메뉴(Context Menu)대화상자(Dialog)기본 대화상자(AlertDialog)사용자 정의 대화상자(Custom Dialog)이벤트(Event)(그래픽은 낼까말까 고민중)일반 뷰 이벤트(Button click 등)어댑터뷰 이벤트(AdapterView, ListView 클릭 이벤트)오늘 배운거 어댑트뷰, 리스트뷰 어댑트뷰더보기더보기package com.example.jsy_1211;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.wi..

ppt73~85background 관련 속성 정리1. background-color배경색 지정형식: background-color:;2. background-image배경 이미지 삽입형식: background-image:url("이미지 경로");3. background-repeat배경 이미지 반복 여부 지정형식: background-repeat:;속성값no-repeat : 반복하지 않음repeat-x : 가로 방향만 반복repeat-y : 세로 방향만 반복repeat : 가로·세로 모두 반복(기본값)round : 이미지가 잘리지 않도록 크기를 자동 조절하며 반복space : 이미지가 겹치지 않도록 반복이미지 사이즈가 맞지 않을 경우크면 잘림작으면 repeat 효과로 여러 개 출력됨4. background..

ppt 61~72박스 모델의 성격과 display 속성 • 박스 모델의 성격  블록 성격 : 요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한 줄을 다 차지하는 것  인라인 성격 : 요소의 너비를 콘텐츠 크기만큼만 차지하는 것  인라인 블록 성격 : 요소의 너비가 콘텐츠의 크기만큼만 차지하지만, 그 외의 성격은 블록 성격을 가지는 복합적인 것 • display 속성 : HTML 태그가 기본으로 가지고 있는 박스 모델의 성격을 변경display: block (블록 박스) block block block blockdisplay: inline (인라인 박스) inline inline blockdisplay: inline-block (인라인 블록 박스) inline-block inlin..