지 구 여 행

Grid item 속성 Grid item에서 사용 가능한 속성 정리 열/행 크기 설정 grid item의 위치를 지정해줄 수 있습니다. span 은 grid item이 차지할 칸(cell)의 수를 의미하며, grid item위치를 지정할 수 있습니다. grid-row-start grid-row-end grid-row : 행 시작위치 / 행 끝위치, 행 시작위치 / span # grid-column-start grid-column-end grid-column : 열 시작위치 / 열 끝위치, 행 시작위치 / span # grid-area : grid-row 와 grid-column 의 단축 속성, 또는 그리드 영역 이름 설정 그리드 선 그리드 선(grid lines)은 양수나 음수로 지정할 수 있고, 그리드..

Grid container 속성 Grid container에서 사용 가능한 속성 정리 그리드 트랙 그리드 트랙(Grid Track)은 그리드에 그려진 두 라인 사이의 공간을 나타냅니다. grid-template-rows 와 grid-template-columns 속성으로 그리드 트랙(행(rows)과 열(columns))을 정의할 수 있습니다. 값을 정의하지 않을 경우 grid item의 크기는 font-size에 비례합니다. px, em, %, fr(fraction, 공간비율)등의 단위를 사용합니다. repeat() , minmax() , fit-content() 함수도 사용할 수 있습니다. grid-template-rows grid-template-columns grid-template-areas : ..

Grid Layout 그리드 레이아웃이란 그리드 레이아웃(Grid Layout)이란 열과 행을 이용하여 인터페이스 요소들을 배치하는 2차원 레이아웃 모델입니다. (참고: Flexbox는 1차원 레이아웃 모델) Grid Layout은 기본적으로 그리드 컨테이너(grid container)와 컨테이너내에 배치되는 요소인 그리드 아이템(item)으로 이루어져있습니다. 외부 엘리먼트(부모 요소)에 display: grid; 또는 display: inline-grid;를 선언함으로써 grid container를 만들 수 있습니다. 내부 엘리먼트(자식 요소)는 자동적으로 grid item이 됩니다. display: grid; : Block 특성의 grid container를 정의 display: inline-gri..

Flex item 속성 Flex item에서 사용 가능한 속성 정리 flex-basis : 항상 main axis를 기준으로 flex item의 초기 너비값을 결정 일반적으로는 width와 같은 기능을 하지만 flex-direction: column; 인 상태에서는 main axis가 수직축으로 변경되면서 flex-basis 값은 높이(height)로 정의된다는 차이점이 있습니다. width와 flex-basis 두 속성 모두 값을 지정할 경우 flex-basis 속성값이 우선순위를 갖게 됩니다. 만약 content item의 실제 너비값이 flex-basis 로 설정한 너비값보다 클 경우, 설정한 값과는 상관없이 content item의 실제 너비값에 따라 렌더링됩니다. 하지만 content item의..

Flex container 속성 Flex container에서 사용 가능한 속성 정리 display: flex; : 부모 요소에 설정하여 새로운 플렉스 서식 환경을 구성 flex-direction : flex item들이 정렬되는 축 방향 변경 row (default value) row-reverse column column-reverse flex-wrap : flex item들의 총 넓이가 flex container의 넓이보다 클 때, flex item들을 다음 줄에 이어서 정렬 nowrap (default value) wrap wrap-reverse flex-flow : flex-direction , flex-wrap 를 한번에 정의 항상 위 순서가 지켜져야 정상적으로 표현됩니다. flex-flow:..

Flexbox Flexbox란 Flexbox, 또는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델입니다. (참고: CSS Grid Layout는 2차원 레이아웃 모델) Flexbox는 기본적으로 플렉스 컨테이너(flex container)와 컨테이너의 컨텐츠인 플렉스 아이템(flex item)으로 이루어져있습니다. 여러 개의 내부 엘리먼트(자식 요소)를 담고 있는 외부 엘리먼트(부모 요소)에 display: flex; 스타일을 적용하면, 외부 엘리먼트는 flex container가 되고, 내부 엘리먼트는 자동으로 flex item이 됩니다. 이때 외부 엘리먼트는 직접적으로 붙어있는 부모 요소(direct pare..

태그의 background에 image 삽입 1. 기본 형태 : background-image: url("이미지경로") 2-1. 이미지경로가 웹일 경우 예. background-image: url("https://images.pexels.com/photos/7008379/pexels-photo-7008379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1") 2-2. 이미지경로가 (내 컴퓨터 폴더 내) 파일일 경우 예. background-image: url("img/1.png"); IMPORTANT ※ 배경화면으로 지정할 이미지파일 또는 이미지파일이 저장된 폴더는 반드시 css 폴더내에 위치해야 한다. 하나의 image로 배경화면에 꽉차게 출력 body { he..

문제 이해 딕셔너리 포맷팅 예제 실습을 하던 중 아래와 같은 오류가 발생하였다. invalid syntax 라는 오류 메시지(=틀린 문법)를 확인했지만 특별한 오류점을 찾지 못했다. 문제 해결 같은 문자열 안에 따옴표를 중복 사용하게 될 경우 오류가 발생 → 큰 따옴표("")와 작은 따옴표('')를 함께 사용하여 문법적인 오류를 해결 가능 위 코드의 입력 의도는, 전체 문자열안에 → 큰 따옴표(" ")로 묶는다. ① flower 딕셔너리 안의 color 이라는 key의 value값과 → 작은 따옴표(' ')로 묶는다. ② flower 딕셔너리 안의 name 이라는 key의 value값과 → 작은 따옴표(' ')로 묶는다. ③ flower 딕셔너리 안의 price 라는 key의 value값을 넣어 → 작은..

정상 예제 (→) 표시한 if문과 break의 위치에 따라 결과값이 달라진다. [문제 1] 위 정상예제의 (→)표시한 if문을 elif를 이용하여 while문에 포함시키는 경우 → 남은 치킨의 수가 0이 되어도 while문이 반복된다. else문내에 order수에 따라 달라진 chicken(남은 치킨의 수)변수값 = 0 일 때, SoldOutError로 예외처리를 시키기 위해서는 else문 안에 if chicken==0: 문이 들어와야 정상 실행이 가능하다. [문제 2] 위 정상예제의 (→)표시한 break가 if문 안에 위치할 경우 → 남은 치킨의 수가 0이 되어도 while문이 반복된다. 아래 문제 예제에 (→)표시한 break는 if문을 종료하기 때문에 chicken=0이 되어도 while문이 재실..

finally 정의 가장 마지막에 오는 finally는 ①try문이 실행되든, ②예외 처리된 오류가 발생하든, ③일반적인 오류가 발생하든 무조건 실행된다. 예제 입력값 : 분류 결과값 ①try문이 실행된 경우 ②예외 처리된 오류가 발생한 경우 ③일반적인 오류가 발생한 경우 ※ 참고자료 : 나도코딩 / 파이썬 코딩 무료 강의(기본편) : https://youtu.be/kWiCuklohdY 점프 투 파이썬 05-4 예외처리 : https://wikidocs.net/30