Git은 버전관리와 동시 협업과 다른 컴퓨터에 작업물을 보내는 등(백업본,협업) 개발자에게 필연적인 툴이다. 대표적으로 github의 사이트가 있으며 우선 git의 사용법을 익힌 후 github를 사용하는 순서로 공부한다.▷ Git - 버전관리 프로그램▷ Github - git으로 관리하는 프로젝트나 파일 등을 저장 할 수 있는 사이트 (원격 저장소 제공 서비스) Git 설치 방법

transform, transition, animation을 복합적으로 활용한 예제폼 요소의 기능적인 측면 이해폼 요소의 기본 스타일 특성 이해하기폼 요소를 적절히 초기화하고 최초 스타일 재구축폼 요소, 최소한의 접근성 확보하기체크박스와 라디오버튼 커스텀버튼 커스텀◆ (day17/music)■ transform, transition, animation 예제    ▼ 아이콘 추가하여 하나로 합친 후 가운데 정렬또는 left 50% right 50% ▼ transform을 사용하여 중앙 정렬 할 수 있다. ▼ 네거티브 마진을 사용하여 중앙 정렬 할 수 있다 ▼ nth-child와 transform translate rotate를 적절히 사용하여 각 아이콘들의 위치를 조정해준다 ▼ rotate로 인해 이미지가..

Animation, Transition 주요 속성과 활용 Transform 주요 속성과 활용 :hover 가상 클래스의 활용 (노트북 이슈로인한 직접 작성한 코드 및 티스토리 내용이 몽땅 날아가버려서 교수님의 자료 + pdf로 대체하겠슴 ㅜㅠ) Transform transform속성은 요소의 크기(scale), 위치(translate), 회전(rotate), 기울기(skew)를 적용할 수 있다.또한 시각적 부분의 변화만을 제공하며 레이아웃에 직접적인 영향을 주지 않는다 (기존 공간 유지) .circle { transform: rotate(45deg) translateX(100px);} 변환 함수변환 함수는 띄어쓰기를 통해 조합하여 사용될 수 있으며, 이때 각각의 변환은 독립적으로 적용되지만,변환의 순서..

Grid로 만드는 범용 Wrapper Layout Class (Flexbox 버전 포함)flex, grid 실무적인 적용 방법■ Grid로 만드는 범용 Wrapper Layout Class (Flexbox 버전 포함)▼ 우리가 flex에서 했던 것처럼 레이아웃을 좀 더 유연하게 작업하기위해     주어진 코드를 추가해주었다..l_row {  display: flex;  flex-wrap: wrap;    margin: 0 -20px;    row-gap: 40px;}.l_col {    box-sizing: border-box;    padding: 0 20px;}.l_col_12_12 { width: 100%; }.l_col_11_12 { width: 91.66666667%; }.l_col_10_12 ..

minmax()의 활용 미디어쿼리에 독립적인 반응형 그리드 (auto-fill, auto-fit) 그리드 아이템의 수동 배치 + 셀 병합 이해하기 자동 배치 규칙 이해하기 ◆ (day15/grid)■  그리드 레이아웃그리드 레이아웃 시스템은 그리드 컨테이너(부모 요소)에서 대부분의 레이아웃 작업이 이루어지며, 자식 요소들에 추가적인 레이아웃 관련 작업이 최소화될 수 있게 설계 되었다.그리드 컨테이너 (부모 요소) 집중식 레이아웃 관리: 그리드 컨테이너가 레이아웃의 중심이 된다. 대부분의 레이아웃 정의와 조정이 그리드 컨테이너 (부모 요소) 수준에서 이루어진다.자식 요소의 단순화: 개별 그리드 아이템(자식 요소)에 대한 직접적인 레이아웃 조작이 크게 줄어든다.마크업 간소화: 레이아웃을 위한 추가적인 마크업..

그리드 레이아웃 시스템 이해하기 minmax()의 활용auto-fit, auto-fill 그리드 기법의 변화 예시◆ (day14/grid)DOCTYPE html>html>  head>    title>Gridtitle>    style>      body {        background-color: brown;      }      .playground {        border: 10px solid maroon;        width: 980px;        margin: 0 auto;        border-radius: 20px;        background-color: skyblue;        padding: 10px;      }      .frog {        backgr..

INCREDIBLE 인크레더블 예제CSS Typography 섹션 관리font-size, font-family, line-height font-family설정과 구글 웹폰트 적용 em과 rem line-height 일괄 적용◆ (day13/incredible) ▼ 레이아웃 구성클래스명을 구성할때 l_wrapper와 그냥 wrapper의 차이는 공공재이냐 아니냐 그 차이다.그 점을 인지하고 작명하자 ▼ width auto와 max-width는 완전 별개이다.  ▼ article ? section?section 태그는 섹션(부분, 구역, 영역) 들을 그룹화 해서 분리하는 역할을 한다.article 태그는 문서내에서 그룹화해서 분리하는 역할을 한다. ▷ article - 내용이 독립적이다.article 태그는..

Position: 컨테이닝 블록, 스태킹 컨텍스트의 이해, inset Position 속성 입문스태킹 컨텍스트의 이해 inset의 이해 반응형 단위 - 뷰포트 기준에서의 vw, vh ◆ (day11/position/basic) 네거티브 마진은 위치이동은 하는건 맞지만 차지하는 공간이 다르다. ▼ transform (애니메이션 속성 때 주로 사용)▼position   - static : 초기값    - relative(상대적인)      내위치 기준에서 상대적으로 움직인다. 절대적이아니며 환경에따라 위치가 달라진다    - absolute (절대적인)     속성을 적용하면 ypg텍스트가 사라진걸 볼수있다. 차지하고있는 공간을 버리는것이 핵심 ▼다시 left값과 top값을 0으로 적용해보면 요소가 왼쪽 상..

flex-direction의 다양한 활용 디바이스 툴바의 사용 메타 요소 viewport 커스텀 프로퍼티의 활용말줄임표텍스트 줄바꿈 제어line-heightflex 공부 하는 사이트 - https://flexboxfroggy.com/#ko  ◆ (day10/flex-direction/frog)  forg 요소가 3개일때 display flex 하면 왼쪽부터 flex 정렬된다. flex-basis auto를 사용하여 아이템의 기본크기를 설정하고 auto 해줌으로써  아이템 자신의 width 또는 height 속성의 값을 사용한다.  또한 가용 공간을 활용 하는 기법이 2가지가 있었다.여백으로 쓰거나 너비로 쓰거나..  여백화는 클래스 frog 옆에 클래스 추가해서 가용 공간을 활요한다.  다른 방법으로 f..

Flexbox에서의 width속성 알아보기 Flexbox로 만드는 사이드바 레이아웃 안정성 높이기 Flexbox로 만드는 그리드의 한계 -> 클래스 기반, 12단 그리드 시스템 구축 미디어쿼리를 이용한 반응형웹▲ flex items 부가설명flex items의 width의 개념은width:300px 일때 / flex-basis: auto -> 300px / min-width: auto -> 300px 의 특징을 가지고 있다.  만약 width:300px 일 때와 basis값이 200px 일 경우에는basis 값이 auto 였으면 300px을 받아오지만 basis값이 우선적 200px이 적용된다.  만약 width 값을 적용하지 않고 basis값 만 적용 할 경우 내부 컨텐츠 크기 만큼 잡힌다. ◆ (da..