🔻Media Query🔻 해상도에 따라 다른 화면을 구현하는 css 기술 @media 미디어유형 미디어쿼리연산자 (조건) { 구현부; } 미디어 유형 1. all : 모든 유형 2. screen(기본값) : 컴퓨터(스마트폰) 3. print : 인쇄장치 4. tv 5. projection 미디어 쿼리 연산자 1. and 2. only 3. not 미디어 쿼리 조건 주로 화면 크기를 조건으로 지정한다. 아래 크기는 유동적이다. 1. 모바일 화면 크기 : 480px 2. 태블릿 화면 크기 : 768px 3. 태블릿(가로) 화면 크기 : 1024px 4. 노트북 화면 크기 : 1600px 5. 데스크탑 화면 크기 : 1600px 이상 컴퓨터 화면이 최대 1000px 너비를 가질 때 스타일을 적용한다. 복잡한 ..
viewport-height 화면의 높이를 100 단위로 나타낸다. 화면의 높이가 100%일 때, 1vh는 화면의 높이 중 1%를 의미한다. minmax list-style-type
🔻grid🔻 2차원(행과 열) 레이아웃을 만들기 위한 강력한 레이아웃 시스템이다. [공통 코드] A B C D E F 🔶2행 3열 grid 적용🔶 🔶repeat 함수🔶 특정한 패턴을 반복하여 정의할 때 사용한다. 🔶fraction 단위🔶 백분율 단위로 균등분할 가능하다. 🔶grid-column 속성🔶 그리드 아이템의 열 위치를 지정한다. span 키워드를 사용하여 그리드 아이템이 여러 열에 걸쳐 있는 경우 간단하게 표현할 수 있다. 1. 시작 열 번호: 그리드 아이템이 시작하는 열의 번호를 나타냅니다. 2. 끝 열 번호: 그리드 아이템이 끝나는 열의 바로 다음 번호를 나타냅니다. #box .item:nth-child(1) { grid-column-start:1 ; grid-column-end: 5; } ..
🔻flex box🔻 display: flex flexiable box 레이아웃 작성할 때 사용한다. 내부의 요소를 배치한다. float + position + margin + padding 🔶기본 상태(display: flex) 메인축(아이템을 나열하는 방향) : 가로 수직축(메인축의 직각 방향) : 세로 아이템 너비 : 요소만큼 아이템 높이 : 부모만큼 🔶속성 1. flex-direction 아이템의 배치 방향을 설정한다. 초반에 설정한다. row (기본값) : 행을 메인축으로 column : 열을 수직축으로 flex-direction : row 2. flex-wrap 자동 줄바꿈 잘 사용하지 않는다. flex-wrap: wrap (기본값) flex 관련 속성명 1. justify- 메인축 방향 2. ..
🔻animation🔻 웹 페이지에서 요소들에게 애니메이션 효과를 부여할 때 사용한다. css 객체 움직임을 조작할 때는 아래 두가지 방법이 있다. 1. transition : 단순한 움직임 2. animation + transtion : 세밀하게 통제 가능하다. 🔶속성 animation-name: @keyframes 규칙에서 정의한 애니메이션을 연결한다. animation-duration 애니메이션의 한 주기를 완료하는 데 걸리는 시간을 지정한다. 초(s) 또는 밀리초(ms) 단위로 값을 설정할 수 있다. animation-timing-function 애니메이션의 진행 속도를 조절하는 함수를 지정한다. 예를 들어, ease, linear, ease-in, ease-out, ease-in-out 등이 있다..
🔻Transition, 전환🔻 객체의 속성(상태)값이 변화되는 과정을 시간 순서대로 보여주는 속성 수치형 속성에만 적용 가능하다.(숫자 또는 색상) 주로 마우스 호버 등과 같은 이벤트에 반응하여 요소의 스타일을 부드럽게 전환할 때 사용된다. 1. 속성 (property) 어떤 CSS 속성에 대한 전환을 적용할 것인지를 지정한다. 예를 들어 color, background-color, width 등을 지정할 수 있다. 2. 지속 시간 (duration) 전환의 지속 시간을 지정한다. 초(s)나 밀리초(ms) 단위로 설정할 수 있다. 3. 타이밍 함수 (timing-function) 전환의 진행 과정을 조절하는 함수를 지정한다. ease, linear, ease-in, ease-out, ease-in-out..
시맨틱 태그 1. : 전체 컨테이너 2. : 머릿말 부분 3. : 본문(콘텐츠) 4. : 반복되는 콘텐츠(항목들) 5. : 보조 콘텐츠 6. : 바닥글 부분 메뉴 메뉴
🔻Transform🔻 위치, 배율, 회전, 왜곡한다. 주로 애니메이션 효과를 만들거나 요소의 상태를 동적으로 변경하기 위해 사용된다. 변환 함수를 사용하여 요소를 조작한다. 주로 1~3번을 많이 사용한다. 1. translate(x, y) : 위치 변형(이동) 2. scale(x, y) : 배율 변형(확대/축소) 3. rotate(angle) : 회전 변형 4. skew(x, y) : 왜곡(비틀기) 5. matrix(a, b, c, d, e, f) : 사용자 정의형(1~4번) / a, b, c, d, e, f는 행렬의 값을 나타내며, 각각의 값은 요소를 변환하는 데 사용된다. 1. translate 요소를 지정된 x와 y 좌표만큼 이동시킨다. x와 y는 픽셀(px)이나 백분율(%) 등의 단위로 지정할 수..
인라인 태그들은 화면 조절될 때 크기를 못맞추면 자동 개행이 된다. #main-menu { border: 1px solid black; font-size: 0; } 크기를 지정해주면 자동개행되지 않는다. #main-menu { border: 1px solid black; font-size: 0; width: 630px; }
p { /* 단 수 */ column-count: 3; /* 단과 단사이의 간격 */ column-gap: 100px; /* 단 내의 양쪽정렬 */ text-align: justify; /* 구분선 */ column-rule: 1px dashed grey; } header section
