le récit de ellie

장문의 글에서는 가독성을 위해서 글 사이의 간격을 띄우기도 한다. 이때 행간을 조정한다고 하는데, line-height 속성을 이용해 이 행간을 조정할 수 있다. 그러나 정확하게 line-height는 줄의 높이를 의미하는 것이고, 이를 이용해서 행간을 조정할 수 있는 것이다. line-height의 속성 행간을 제어할 때 사용하는 속성이라 해서 줄 간격으로 생각해 오해하기 쉬울 수가 있다. 줄 바꿈이 되었을 때, 윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 간격이라고 생각할 수도 있지만, line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미한다. line-height: normal | number | len..

font-family 글꼴을 지정하는 속성이다. font-family: family-name | generic-family ( | initial | inherit ); family-name 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있다. 먼저 선언된 순서대로 우선순위가 결정된다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언한다. 이때 한글 글꼴을 선언할 경우 영문과 한글 모두 적어주어야 한다. generic-family family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해주는 기능을 한다. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴..

타이포그래피(typography)의 구조 폰트를 이해하기 위해서는 타이포그래피의 구조를 먼저 이해해야 한다. 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있다. em : 폰트의 전체 높이를 의미합니다. ex ( = x-height ) : 해당 폰트의 영문 소문자 x의 높이를 의미합니다. Baseline : 소문자 x를 기준으로 하단의 라인을 의미합니다. Descender : 소문자에서 baseline 아래로 쳐지는 영역을 의미합니다. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y ) Ascender : 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l )

border 속성은 요소의 테두리에 관련된 속성을 지정할 때 사용한다. 테두리의 굵기, 모양, 색상을 지정할 수 있는 속성들이 있으며, 여러 속성을 축약하여 적용할 수도 있다. border-width 선의 굵기를 지정하는 속성이다. (기본 값 : medium) border-width: [top] [right] [bottom] [left]; border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 굵기를 다르게 표현할 수 있으며, 위처럼 축약하여 공백을 이용해 각 방향에 대한 선의 굵기를 다르게 지정할 수도 있다. 키워드 : thin, medium, thick 단위 : px, em, re..

HTML의 모든 요소는 사각형의 박스 형태로 만들어진다. 박스는 총 4가지의 세분된 영역으로 구성되어있으며 영역마다 다양한 스타일을 적용할 수 있다. 이 4가지 영역을 통틀어서 박스모델이라고 부른다. CSS를 이용해 이 상자의 크기, 위치 및 속성(색상, 배경, 테두리 크기 등)을 변경할 수 있다. boxmodel 구성 Content 영역 요소의 실제 내용을 포함하는 영역입니다. 따라서 크기는 내용의 너비 및 높이를 나타낸다. Border 영역 content 영역을 감싸는 테두리 선을 border라고 한다. Padding 영역 content 영역과 테두리 사이의 여백을 padding이라고 한다. content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 그 영향을 미친다. 이에 따라 paddi..

background-color 배경의 색상을 지정하는 속성이다. (기본 값 : transparent) background-color: yellow; background-image 배경으로 사용할 이미지의 경로를 지정하는 속성이다. url의 경로는 절대 경로, 상대 경로 모두 사용 가능하다. (기본 값 : none) background-image: url(https://www.w3schools.com/CSSref/img_tree.gif); 만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면, 그 부분에 background-color 색상이 노출된다. background- repeat 이미지의 반복 여부와 방향을 지정하는 속성이다..

Color 폰트의 색상 값을 적용할 때 사용하는 속성이다. h1 { color: 색상 값;} 색상 값 지정 방식 컬러 키워드 CSS 자체에서 사용 가능한 문자 식별자로 red, blue, black 등과 같이 미리 정의되어있는 키워드를 이용해 색상을 표현할 수 있다. (transparent는 투명을 나타내는 키워드이다.) color: red; 16 진법 ex. #RRGGBB 6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상을 나타낸다. 첫 번째 두 자리는 적색(RR), 가운데 두 자리는 녹색(GG), 마지막 두 자리는 청색(BB)을 의미하며, 각 자리의 알파벳은 대소문자를 구분하지 않는다. color: #ff0000; 16 진법 ex. #RGB 6자리의 16진수에서 각각의 두 자리가 같..

hegith 요소의 세로 크기를 정의하는 데 사용하는 속성이며, 정확히는 content 영역의 높이를 지정하는 것이다. 기본적으로는 width의 동작 방식과 같게 동작하지만, % 값을 가졌을 때의 동작 방식이 조금 다르다는 것에 유의하자. height의 속성 height: auto; /* 기본값 */ height: 100px; /* 길이 */ height: 50%; /* 퍼센트 */ auto : 브라우저에 의해 자동으로 계산하여 적용 (기본적으로 content 영역의 내용만큼 높이를 가진다.) length : 고정값으로 지정 (ex, px, em ...) percent: 부모 요소의 height에 상대적인 크기를 지정 (단, 부모 요소가 명시적으로 height 값을 가져야한다.) height는 conte..

width 요소의 가로 크기를 정의하는 데 사용하는 속성, 정확히는 content 영역의 너비를 지정하는 것을 의미한다. width 속성은 인라인 레벨 요소를 제외한 모든 요소에 적용된다. → 의 경우 인라인 레벨 요소이기 때문에 width를 지정하여도 적용되지 않음에 주의하자! width의 속성 width: auto; /* 기본값 */ width: 100px; /* 길이 */ width: 100%; /* 퍼센트 */ auto : 브라우저에 의해 자동으로 계산하여 적용 length : 고정값으로 지정 (ex, px, em ...) percent: 부모 요소의 width에 상대적인 크기를 지정 width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면..

if 문 if ~ elif ~ else 와 같이 사용하며, elif 혹은 else 부분은 경우에 따라서 사용하지 않아도 된다. score = 85 if score >= 90: print("A") elif score >= 80: print("B") print("분발하세요.") elif score >= 70: print("C") else: print("F") # B # 분발하세요. 조건문을 작성할 때는 코드의 블록(Block)을 들여쓰기로 설정한다. 들여쓰기가 같은 부분은 함께 실행된다. 조건문의 특성 pass 문 파이썬에서는 조건문의 값이 참(True)이라고 해도, 아무것도 처리하고 싶지 않을 때 pass 문을 이용할 수 있다. if score >= 80: pass # 나중에 작성할 코드 else: pri..