Language

[CSS] 글자 / 텍스트 속성

텍스트를 다루는데 있어 속성들은 여러가지이다. 1. font-family: 폰트 자체를 지정. 고딕체, 명조체 등등 2. font-weight: 폰트의 두께를 지정한다. 1~1000의 숫자를 지정할 수도 있지만, 일반적으로 normal, bold, lighter, bolder 로 사용한다. 만약 두꺼운 글자나 얇은 글자를 지원하지 않는 폰트의 경우 적용되지 않을 수 있다. 3. line-height: 줄 높이(행간)을 지정할 때 사용한다. normal 또는 숫자로 지정할 수 있다. 단위 없는 숫자의 경우 폰트 크기를 기반으로 설정하고, 단위를 두면 px, %, rem 등 모두 사용할 수 있다. 보통 1.5~1.9 정도로 사용한다. 4. text-align: 텍스트의 맞춤을 지정한다. left, right..

[CSS] css의 단위 (px, %, rem, em, vw, vh)

1. "px": 화면 위의 1픽셀을 기준으로 하는 단위 1. "%": 부모 요소 크기를 기준으로 비율로 지정하는 단위 2. "rem": 루트 요소(html 요소)에 지정된 크기를 기준으로 배수곱 하는 단위 3. "em": 부모 요소의 크기를 기준으로 배수곱 하는 단위 4. "vw": "viewport width"의 약자로 브라우저를 볼 때의 출력 너비를 기준으로 퍼센트 곱 하는 단위 5. "vh": "viewport height"의 약자로 브라우저를 볼 때의 출력 높이를 기준으로 퍼센트 곱 하는 단위

[HTML] [6] 태그(5) - <br>, <blockquote>, <audio>, <video>, <span>

1. 줄바꿈을 위해 사용하는 태그이다. 다른 블록 요소 태그들의 내부에 사용하여 줄바꿈을 유도한다. 2. 인용문을 만들 때 사용하는 태그이다. 3. , 음성 데이터를 넣을 때, 영상 데이터를 넣을 때 사용된다. 4. 의미 없는 인라인 요소를 만들 때 사용한다. 주로 CSS를 이용하여 일부분만 장식할 때 사용된다.

[HTML] [5] 태그(4) - <header>, <article>, <section>, <div>, <navigation>

HTML의 태그들은 크게 2가지 부류의 태그들로 나눌 수 있다. 1. 블록 요소: , 처럼 앞뒤에 줄바꿈이 들어가는 블록을 만드는 태그 2. 인라인 요소: , 처럼 텍스트의 일부로서 다뤄지는 태그 3. 그룹 태그: , , 처럼 블록들의 그룹을 지정하는 태그 이 중 그룹 태그는 위의 설명처럼 블록 요소 태그들을 이용하여 여러 정보들을 그룹화하는 태그들을 의미한다. 그룹 태그는 내용을 직접 입력하는 태그가 아니라, 블록 요소들을 그룹화하여 CSS를 사용할 때 한번에 묶음 처리가 될 수 있도록 사용한다고 생각하면 쉽다. 1. 일반적으로 페이지 상부에 로고, 페이지 제목, 메뉴 등을 감쌀때 사용하는 태그이다. 태그와 엄연히 다른 태그이다. 태그는 웹 화면에 보이지 않는 내용을 다루는데 주로 사용하는 반면, 태그..

[HTML] [4] 태그(3) - 입력 양식 만들기

1. 은 입력 양식을 만들기 위한 태그이다. 태그를 이용하여 입력양식을 위한 컨테이너를 만들고, 모든 내부요소를 이 태그 안에 넣는다. 이 태그의 주요 속성은 다음과 같다. 1. action : 데이터의 전송될 페이지를 지정 2. method : 데이터 전송 방법을 지정- 주로 get / post 사용 3. name : 입력 양식의 이름을 지정 2. 태그는 사용자의 입력을 위한 태그이다. 이 태그를 사용하면 텍스트, 메일 주소 등등 다양한 입력값을 설정할 수 있다. 원하는 입력값의 속성을 "?" 부분에 넣으면 사용가능하다. 또한 "placeholder" 속성을 이용하여 텍스트 창에 기본 텍스트를 띄워놓을 수 있다. 1. text : 기본적인 텍스트(기본값) 2. search : 검색 전용 텍스트 3. e..

[HTML] [3] 태그(2) - <ul>, <ol>, <li>, 주석

1. + 은 "unordered list"의 약자로 순서가 없는 리스트 컨테이너를 만드는 태그이다. 해당 태그의 내부에 "list item"의 약자인 태그를 사용하여 무순서 리스트를 생성할 수 있다. 2. + 은 "ordered list"의 약자로 순서가 있는 리스트 컨테이너를 만드는 태그이다. 와 마찬가지로 해당 태그의 내부에 태그를 사용하여 리스트의 항목을 추가할 수 있다. 3. + ( + + ) 테이블을 만들어주는 태그이다. 우선 태그를 통해 테이블 컨테이너를 만들어준다. 태그는 표의 한 행을 감싸는 태그이고, 태그는 표의 제목 셀을 나타내는 태그이다. 태그는 테이블의 데이터를 나타내는 태그이다. 표의 제목 셀을 위한 태그는 필요에 따라 생략할 수도 있다. 태그 내부에 "border" 속성을 추가하..

[HTML] [2] 태그(1) - <h1>, <a>, <img>, <p>

html은 기본적으로 태그(Tag)라는 기호를 사용한다. ~ 의 형태를 띄고 있으며, 해당 '태그종류'에 따라 해당 부분의 역할이 달라진다. 태그 쌍은 시작태그와 종료태그로 구성된다. 예제 소제목 에 대해서, 다음과 같이 3가지로 나누어진다. 1.: 시작태그. 태그의 시작을 나타낸다. 2.예제 소제목: 값. 해당 태그에 어떤 값이 나타나는지 보여준다. 3.: 종료태그. 해당 태그의 종료를 나타낸다. 흔히 사용되는 태그들은 다음과 같다. 1. , , , , , 제목을 보여주는 태그이다. h뒤의 숫자가 커질수록 작은 제목이 된다. 사이트의 구성에 따라 가장 큰 부터 가장 작은 까지 사용할 수 있다. 순서대로 잘 구성된 제목 태그가 해당 페이지의 판단기준 중 하나이므로, 순서대로 잘 ㅏ사용하는 것이 중요하다...

[HTML] [1] html 파일의 골격

HTML이란 "Hyper Text Markup Language"의 약자로, 웹 페이지를 만들 때 사용하는 언어이다. 웹 페이지의 내용을 짜는 가장 기본적인 언어라고 할 수 있다. 웹 페이지에 출력할 문장 등을 ""로 감싼 "태그"라고 부르는 특수한 문자열로 감싸서 만든다. 이 HTML로 이루어진 파일을 CSS를 이용해 옷을 입히고, javascript를 이용해 동작을 구현하면서 웹 페이지가 생성되는 거이다. 모든 태그는 ~로 이루어진다. 웹 페이지의 가장 기본적인 골격(구성요소)는 다음과 같다. 1. 은 독 타입(Doctype) 선언이라고 부르며, 해당 페이지가 어떤 버전의 HTML에 맞게 작성되었는지 나타낸다. 현재 가장 최신 버전은 "HTML5" 이며, 웹 브라우저는 특정 버전이 지정되어있지 않으면 ..

[Python] 파이썬 정렬 다중 조건, 파이썬 정렬 키 여러개

파이썬에서는 sort()와 sorted()를 사용하여 정렬을 할 수 있는데, 인자로 key = lamda x:x[0]등을 주어서 정렬 조건을 지정해줄 수 있습니다. 이때 우선 조건과 차선 조건을 지정해주고 싶은 경우(2가지 이상의 조건이 필요할 경우), 다음과 같이 사용할 수 있습니다. array = (('b', 1, '나'), ('c', 2, '라'), ('a', 3, '다'), ('a', 7, '가'), ('c', 3, '가')) print(sorted(array, key=lambda x: (x[0], x[1]))) # 0번, 1번 키(알파벳, 숫자) print(sorted(array, key=lambda x: (x[0], x[2]))) # 0번, 2번 키(알파벳, 한글) # 출력 # [('a', 3..

[Python] 파이썬 순열 조합 / Python permutation(), combination()

👀 함수 ( permutations() / combinations() ) 👀 1. permutations() : 어떤 iterator에 대한 순열을 얻는 함수 2. combinations() : 어떤 iterator에 대한 조합을 얻는 함수 순열과 조합 모두 itertools라는 패키지의 모듈입니다. 알고리즘 문제를 풀다보면 가짓수에 대해 생각해야할 경우가 있는데, 이 두 함수를 사용하면 좀 더 간단하게 해결할 수 있는 경우가 존재합니다. 1. permutation() : 순열(nPr) 순열이란 서로 다른 n개중에 r개를 선택하는 경우의 수를 의미 순서가 상관있으므로 [1,2,3] != [3,2,1] 리스트, 튜플, 딕셔너리 모두 가능 from itertools import permutations a =..