[CSS] box-sizing
2022. 3. 30. 21:55
프로그래밍/CSS
CSS css box padding의 기본 원리 box-sizing: border-box; navigation은 보통 ul로 나눠지고, 그 안에 많은 li들로 구성됨 구글도 navigation을 찾아서 ul의 li에 있는 link를 가져오게끔 설정되어 있음 vscode 단축키 nav>ul>li*개수>a (이후 tab만으로 편하게 작성 가능) css box padding의 디폴트 원리 width가 200px인 box에 50px의 padding을 주면, css는 기존 box의 width를 유지하기 위해 padding의 크기만큼 박스를 늘리기 때문에 결과적으로 box의 크기는 250px이 됨 box-sizing: border-box; css에게 padding을 줘도 box 사이즈를 늘리지 말라고 하는 것
[CSS] BEM, reset, not, inherit
2022. 3. 29. 18:26
프로그래밍/CSS
[오늘의 공부] HTML index.html 사용 이유 CSS css 방법론 - BEM 아이콘 추가 방법 css hack - space-between 대체 reset css :not() selector inherit index.html 대부분의 웹 서버는 디폴트로 index.html을 찾아보도록 설정되어 있음 영어에서 index는 첫 번째라는 의미 vscode 단축키 shift + alt + 방향키 위 아래 : 해당 라인 복붙 div class="name" → div.name div id="id" → div#id div 10개 → div*10 link:css → CSS 방법론 CSS의 class name을 어떻게 지으면 좋을지에 관한 것 CSS의 방법론 중 하나인 BEM(Block Element Modi..
[CSS] transition, transform, animation, media
2022. 3. 28. 12:32
프로그래밍/CSS
CSS Transition Transformation Animation Media Query Transitions 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법 어떤 상태에서 다른 상태로 가는 변화를 애니메이션화 하는 것 Go home 마우스를 올리면 색깔이 반전되지만 애니메이션은 없음 변화가 아주 갑작스럽게 일어나고 있음 서서히 변하거나 부드럽지 않고 아주 빠르게 변하고 있음 이럴 때 필요한 것이 transition transition이라는 속성은 state가 없는 요소에 붙여야 함 예제에서는 hover가 있는 쪽이 아니라 없는 쪽에 써야 함 transition: 1. 어떤 것을 변화하게 만들 것인지 써야 함 배경색에 변화를 주고 싶음 (왜 배경색이냐면 변화하는 부분이 배경색이기 때..
[CSS] flex, selector, state, variable
2022. 3. 27. 15:59
프로그래밍/CSS
CSS inline / inline-block flex (justify-content, align-itmes) position selector (pseudo selector, attribute selector) state pseudo element variable Git / Github inline / inline-block inline은 높이와 너비가 없음 그래서 위, 아래에 margin을 가질 수 없음 padding은 사방에 다 가질 수 있는데 margin은 좌우로만 가질 수 있음 그래서 위, 아래에 margin을 적용하고 싶다면 inline 요소들을 block으로 바꿔야 함 디스플레이 속성 중 inline-block은 block으로 인식하게 함 높이도 가질 수 있고 사방에 margin도 가질 수 있..
[Python] sort, join
2022. 3. 26. 08:47
프로그래밍/Python
Sort score = [88, 95, 70, 100, 99] score.sort() # 오름차순으로 요소를 정렬 print(score) score.reverse() # list 역순으로 만들기 # 내림차순으로 정렬 score.sort(reverse=True) print(score) country = ["Korea", "japan", "CHINA", "america"] country.sort() # 문자열 정렬 시 대문자가 더 작은것으로 평가됨 print(country) country.sort(key = str.lower) # 대소문자 무시하려면 key 인수에 str.lower print(country) 더보기 [70, 88, 95, 99, 100] [100, 99, 95, 88, 70] ['CHINA'..
[CSS] HTML, CSS
2022. 3. 25. 20:31
프로그래밍/CSS
웹사이트는 그냥 text 파일 브라우저가 웹 사이트를 만드는 것 브라우저는 text를 받고 웹사이트로 구현 브라우저는 인간들이 쓰는 언어를 이해 못 함 브라우저에게 콘텐츠가 뭔지 알려줘야 함 HTML로 브라우저에게 content구조가 어떤지를 설명 오직 HTML만이 브라우저에게 content가 어떻게 구성되었는지 설명할 수 있음 CSS는 HTML과 같이 사용 CSS는 브라우저에게 웹사이트가 어떻게 보여야 하는지에 대해 알려줌 HTML은 브라우저에게 웹사이트의 콘텐츠가 무엇인지에 대해 알려주는 것 HTML은 뼈대 CSS는 근육 JS는 뇌 동적 상호작용성 (interactivity) 클릭하면 어떤 일이 생김 HTML은 Markup language Markup은 content CSS는 브라우저에게 그러한 co..
[Python] module
2022. 3. 23. 06:59
프로그래밍/Python
모듈 모듈이란 파이썬 코드를 작성한 스크립트 파일 함수, 변수, 클래스 등이 정의되어 있음 파이썬은 자주 사용하는 기능을 표준 모듈로 미리 작성하여 설치해 두므로 가져와 사용하면 됨 표준 모듈은 언어의 일부는 아니지만 해석기와 함께 설치되기 때문에 언제든지 사용 가능 이 모듈의 집합이 바로 표준 라이브러리 외부의 모듈을 가져와 사용할 때 import 명령을 사용 이 명령에 의해 모듈에 정의된 코드가 현재 소스로 읽힘 기능별로 모듈이 나누어져 있어 쓰고자 하는 기능에 따라 적절한 모듈을 import 해야 함 import math # 모듈 전체 import print(math.sqrt(2)) # 모듈 내 함수 호출 모듈 전체를 import할 때는 'import 모듈' 해당 모듈에 작성된 모든 상수와 함수를 ..
[프로그래머스] 하샤드 수, 콜라츠 추측
2022. 3. 22. 10:24
알고리즘
프로그래머스 lev1 하샤드 수 작성 코드 def solution(x): x_sum = 0 tmp = x while tmp > 0: x_sum += tmp % 10 tmp //= 10 return False if x % x_sum != 0 else True 다른 풀이 def solution(x): return x % sum([int(c) for c in str(x)]) == 0 프로그래머스 lev1 콜라츠 추측 작성 코드 def solution(num): cnt = 0 while num != 1: if cnt == 500: return -1 num = num // 2 if num % 2 == 0 else num * 3 + 1 cnt += 1 return cnt
[Python] 문자열
2022. 3. 21. 23:09
프로그래밍/Python
문자열 파이썬은 문자열을 기본 타입으로 지원하며, 문자열 조작을 위한 다양한 명령 제공 문자열을 구성하는 개별 문자를 읽을 때는 [] 괄호와 문자의 위치인 첨자를 이용 첨자는 앞에서 셀 수도 있고 뒤에서 셀 수도 있음 앞에서 셀 때는 0부터 시작하며 뒤로 갈수록 1씩 증가 뒤에서 셀 때는 음수를 사용. 제일 마지막 문자가 -1번이며 앞으로 갈수록 1씩 감소 첨자는 반드시 문자열의 길이 범위 안이어야 함 → 범위를 벗어나면 에러 발생 문자열은 문자로 구성된 리스트(그러나 immutable)의 일종이어서 for문으로 순회 가능 s = 'python' print(s[2]) # 앞에서 세기 print(s[-2]) # 뒤에서 세기 for c in s: # 문자열 내부를 for문으로 순회 가능 print(c, en..
[Python] 2차원 리스트, zip
2022. 3. 20. 22:38
프로그래밍/Python
2차원 리스트 인덱스 접근 a = [[10, 20], [30, 40], [50, 60]] for i in range(len(a)): # 세로 크기 for j in range(len(a[i])): # 가로 크기 print(a[i][j], end=' ') print() 더보기 10 20 30 40 50 60 프로그래머스 lev1 행렬의 덧셈 작성 코드 def solution(arr1, arr2): answer = [] for i in range(len(arr1)): tmp = [] for j in range(len(arr1[i])): tmp.append(arr1[i][j] + arr2[i][j]) answer.append(tmp) return answer TypeError: insert expected 2 ..