width 3

[44-3 HTML] div, 개발자 도구, border, height, width, margin, the box model

div divide(나누다, 분리하다)의 약자이다. 웹페이지 안에 들어 있는 여러 콘텐츠를 분할하여 관리한다. 웹페이지를 각각 별도로 다룰 수 있게 만들면 좀더 구조적으로 배치하거나, 개별적으로 스타일링하는데 좋다. 개발자 도구 들여다보기 개발자 도구로 가서, HTML 코드를 살펴보자. 여러 요소와 그 속성, 값을 알 수 있는데 CSS 스타일링을 할 때, 이런 것들을 파악하고 적용하는 것이 매우 중요하니. 주의깊게 공부해보자. the box model 박스 모델을 이해하기 위해, height, width, padding, border, margin의 속성들이 외관에 어떻게 영향을 미치는지 알아보자. HTML 태그 요소에서 속성을 아래와 같이 지정한다. 1) height, width height: 100%..

HTML & CSS 2022.10.14

[43-2 HTML] 내부 CSS, CSS 전체 적용하기, CSS default value, border-style, border-color, border-width, height, width, preticide

내부 CSS css를 한 페이지 '전체'에 적용할 수 있는 방법을 소개한다. 1. head 부분에 코드를 작성하기 코드는 head, body, foot으로 전체를 세 등분 할 수 있는데, 여기서 head에 스타일 속성을 넣으면, 전체에 일괄 적용된다. HTML 코드 을 적고, 그 안에 body { }를, 그 안에 적용할 속성을 입력한다. 아래의 예시는 배경색깔을 기본에서 lightcyan 색으로 바꾸었다. 2. 모든 웹사이트는 이미 style 되어 있다는 사실! 위에서 body의 배경색깔을 바꾼 방법과 동일하기 head 부분에 hr의 컬러를 바꾸면, 아무런 변화가 없다. 왜냐하면 모든 웹사이트에는 이미 기본 CSS가 적용되어 있기 때문이다. 구체적으로 속성을 바꾸고 싶다면 기본 CSS가 어떻게 적용되어 ..

HTML & CSS 2022.10.11

[39-2 파이썬] pprint() 함수, keyword argument: depth, width, indent, stream, sort_dict

pprint() from pprint import pprint pretty print의 약자로, 예쁘게 print해주는 함수이다. 예쁘다의 의미는, 많은 양의 데이터, 특히 크롤링을 한 json파일을 다룰 때 사용자가 보기 쉽도록 가독성을 높여 출력해준다는 것이다. ex) print() 를 사용할 때 {'prices': [{'city': 'Paris', 'iataCode': '', 'lowestPrice': 54, 'id': 2}, {'city': 'Berlin', 'iataCode': '', 'lowestPrice': 42, 'id': 3}, {'city': 'Tokyo', 'iataCode': '', 'lowestPrice': 485, 'id': 4}, {'city': 'Sydney', 'iataCo..