모스카토

inline-block은 박스들을 원하는 위치에 정렬하기 힘들고, 간격을 수동적으로 맞춰야 한다는 단점이 있다. 이를 보완하기 좋은 레이아웃이 flex이다. body 안에 div 4개를 만들었다. div는 block 이므로 위와 같이 세로로 정렬된다. div안에 쓴 숫자도 왼쪽 위에 정렬된다. 여기에 display : flex; 를 적용하면 block 인 div를 옆으로 정렬할 수 있다. flex를 사용하는 방법 1. 박스들의 부모요소에 display:flex; 적용 => 부모요소가 flex container가 됨. div 박스들을 flexbox로 만들기 위해서는 모든 div의 부모요소에 display:flex;를 줘야 한다. 현재 body 아래에 div가 있으므로 모든 div의 부모요소는 body이다...

css 의 프로퍼티 중 display에는 block이나 inline등의 값을 줄 수 있다. block 박스모양의 영역을 가지고, 같은 줄에는 아무것도 있을 수 없다. 웹페이지의 대부분은 박스로 이루어진다. 태그 하나는 박스를 이루고, 태그 안에 태그는 박스 안에 박스가 된다. 영역을 나누는 것과 비슷하게 박스를 사용한다. html > body> div > div.box2 순으로 빈 태그들이 있다. 여기에 각 태그마다 배경색이 다르게 색깔을 주면 위와 같이 각 박스 안에 박스가 들어있다. block 의 특징 width, height 가 존재 margin, padding 줄 하나에서 옆에 다른 요소가 올 수 없다. (가로 폭 전체를 차지한다.) block에 해당하는 태그 div, p, table, secti..

css (Cascading Style Sheets) = css 코드의 위에서 아래 순으로 html의 style을 정의한다. * css 문법 * 셀렉터 { 프로퍼티1 : 값1; 프로퍼티2 : 값2; } 셀렉터에는 html의 태그명, 태그의 id, 태그의 class, 태그의 어트리뷰트 등을 쓴다. 말그대로 어떤 요소에 style을 적용할지 지정하는 역할을 한다. 여러개의 셀렉터를 콤마로 구분해서 사용할 수 있다. 중괄호를 열고, 프로퍼티는 여러 개를 사용할 수 있다. 반드시 세미콜론 ( ; )으로 닫아줘야 한다. html에 css를 적용하는 방법 위 상태에 css를 적용한다. 1. inline css : This is a header Hello World! Welcome to html! 박스 태그는 박스형태..

파이썬의 자료형은 다른 언어에 비해 자료형끼리 변환이 쉽고, 변수를 만들 때 자료형을 지정하지 않아도 된다는 장점이 있다. 1. 숫자형 [1] 정수형 int (Integer) type() 함수는 변수의 자료형이 무엇인지 알려준다. int() 함수는 실수를 버림으로 정수형으로 바꿔준다. [2] 실수형 float n 을 float() 함수에 넣으면 정수였던 n 을 실수로 바꿔서 보여준다. 하지만 아래와 같이 다시 type(n) 을 해보면 n의 자료형이 아직 int임을 알 수 있다. 변수 n 의 자료형을 실수로 바꾸고 싶다면 다시 float() 함수의 결과값을 다시 n 에 대입해줘야 한다. 이것은 다른 함수에도 적용된다. [3] 복소수 복소수는 제곱해서 마이너스가 나오는 수로 보통 a + bi 형태로 표현한다..

1. import this 2. print() 값을 출력하는 함수. print() 함수 안에 문자열 2개를 쉼표(,)로 넣으면 띄어쓰기가 포함되서 출력된다. 기본적으로 print()함수는 함수가 끝나면 커서가 아래 줄로 내려간다. 즉, print('Hello World!') 줄이 실행되면 Hello World!가 출력된 후 커서가 아래줄로 내려가있고, print()가 실행되면 아무것도 출력되지 않은 후 다시 커서가 아래줄로 내려가고, print('Welcome!')이 출력되고 커서가 아래로 내려간 후 끝난다. 3. input() 사용자에게 값을 입력받는 함수. input() 안에 문자열을 넣으면 문자열이 출력된 후 입력할 수 있는 칸이 뜬다. input() 함수는 아래와 같이 split() 함수와 함께 ..

:화면에 보이지 않는 내용, 브라우저 ① ② : 브라우저가 내용을 인코딩할 언어 ③ : 검색엔진이 찾는 태그 ④ : 탭에 표시될 로고 등 사진 type = "color" 를 주면 첫번째 박스처럼 색상표가 나오고, type = "text" 를 주면 평범한 텍스트를 입력할 수 있는 박스가 생기고, type="password" 를 주면 입력한 값이 *로 표시된다. type="submit" 을 주면 form 태그의 action에 있는 주소로 값을 전송할 수 있다. type="file" 을 주면 위 그림과 같이 로컬 컴퓨터에 있는 파일을 선택할 수 있다. type="checkbox" 는 체크할 수 있는 선택지를 만들 수 있다. type = "button" 을 주면 클릭할 수 있는 버튼이 생긴다. 외에도 많은 ty..