개발자의 낙원

Grid(그리드)? 평행선과 수평선으로 이루어진 격자구조의 요소. 일반적으로 row(행): 가로줄과 column(열): 세로줄로 구성된다. 구글 크롬 시작화면의 웹페이지 아이콘 링크들도 일종의 그리드 배치로 볼 수 있다. ( HTML 소스는 안 까봐서 저게 실질적인 어떤 라이브러리의 그리드 구조인지는 모른다.) 부트스트랩에서는 responsive(반응성이 있는) 그리드를 제공해 준다. 이 말은 웹페이지 방문자가 사용 중인 기기의 화면크기, 혹은 브라우저의 크기에 반응하여 요소들의 배치가 자동으로 번경됨을 뜻한다. 크롬을 통해 예시를 살펴보자 크롬브라우저의 가로길이를 늘리자, 한 행에 배치되어 있는 아이콘의 개수가 3개에서 5개로 늘었다. 부트스트랩이 반응하는 화면 사이즈 표 출처 : 부트스트랩 그리드 d..

부트스트랩? 웹 디자인용 템플릿 코드를 모아놓은 Html, CSS, js기반의 프론트엔드 프레임워크. 특징 mobile-first(모바일 우선): 스마트폰, 태블릿등의 모바일 사이트를 개발하기 수월하다. responsive(반응성): 화면의 크기에 맞춰서 웹페이지의 요소들이 자동으로 조절된다 홈페이지 Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr bootstrap, navbar, toggler를 이용해서 링크 목록을 제공해주는 버튼을 만들어보자. navbar? 네비게이션바의 준말로 웹사이트 맨위에서 사이트..

최근 파이썬의 기본기를 익히기위해 프로그래머스 0레벨에서 코드골프를 치고있다. 코드골프의 개념 코드골프란 어떤 기능을 최대한 짧은 코드로 구현하는것을 말한다. https://ko.wikipedia.org/wiki/%EC%BD%94%EB%93%9C_%EA%B3%A8%ED%94%84 코드 골프 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 코드 골프(code golf)는 레크리에이션 컴퓨터 프로그래밍 대회의 일종으로, 참여자들은 특정한 알고리즘을 구현하는 가장 짧은 잠재적 소스 코드를 달성하기 위 ko.wikipedia.org 나는 글자 수를 줄이기보단 라인을 줄이는 방식으로 놀고있다. 오늘 건진기능은 next method "next()" 와 walrus operator ":=" 이다..

Python icons created by Freepik - Flaticon 파이썬에선 class를 통해 객체를 선언할때, 객체 내부 변수들을 선언하면서 초기화해주는 메서드가 있다. class HelloWorld: def __init__(self): self.class_variable = 0 def는 새로운 함수를 정의할때 사용하는 keyword이다. 그러므로 우리는 __init__ 이라는 이름을 가진 클래스 메서드를 새로 만든것이다. import HelloWorld helloworld = HelloWorld() helloworld.__init__() 클래스메서드를 사용하려면 호출을 해줘야한다. ..? 조금 이상한점을 느끼지 않았는가? 우리는, 적어도 나는 객체를 만든후 저런식으로 초기화 메서드를 호출하..

메서드 사용법 alert("Hello world"); 메서드명("텍스트"); "(큰따옴표) 대신 '(작은따옴표) 를 사용 할 수 도 있다. 파이썬과의 차이점 파이썬은 띄어쓰기로 문장을 구분하기때문에 ;(세미콜론)을 사용하지 않는다. 한줄에 여러 문장을 진술할경우에만 세미콜론(;)을 사용한다. print("hello world"); print("hello world") string multiline string : (여러줄 문자열) 작성법 파이썬: """ """ 따옴표 세개를 사용한다 자바스크립트: singleline string(한줄 문자열) 과 차이가 없다. " " 따옴표 한개를 사용한다 다른 변수값을 불러오는 string의 모습 파이썬: f-string, 혹은 %연결 연산자를 사용 ex) f"hell..

구글크롬에선 html 코드를 볼수있는 inspect(검사) 기능이 있다. 1. Element 선택 대상의 HTML element 하나만 복사를 한다. 결과: https://s.pstatic.net/static/www/mobile/edit/20221228/mobile_222744719461.png" width="58" height="60" class="special_img_fold" alt="2023년 계묘년 토끼해"> 2. Outer HTML 선택 대상의 HTML element와 함께, 그 안에 포함된 element들도 복사를 해준다. ex)table이라면 그밑에 tr td 까지, ol이라면 그밑의 li까지 전부 복사를 해준다 결과: https://s.pstatic.net/static/www/mobile..

당신이 코드에 사용한 오브젝트나 함수가 해당 라이브러리에서 곧 제거되거나 변형될예정일 경우에 출력되는 메시지. 오류가 발생한것은 아니다. 단 근시일내에 라이브러리가 업데이트된다면 당신이 짠 코드는 승인이 되지 않을 수 있다고 경고해주는것이다.. 이 경고를 봤다면, 한번쓰고 버릴 코드가 아니라면 되도록 다른 코드를 짜도록 하자.

Sequence (시퀸스)수 또는 다른 대상의 순서가 있는 나열 list(리스트), tuple(튜플), and string(스트링) iterable(반복가능): for loop나 "in" 키워드 뒤에 집어넣을 수 있다. 출력결과 list1 = [1, 2, 3, 4, 5] tuple1 = (1, 2, 3, 4, 5) string1 = "12345" for item in list1: print(item) for item in tuple1: print(item) for item in string1: print(item) indexed(번호가 있다): "[]" 중괄호를 이용하여 Sequence속의 개별 element에 접근 할 수있다. 번호는 0번부터 시작하며, 음수를 사용하여 접근할 수 도있다. list1 =..

break vs continue break: loop 를 종료시킨다. continue: continue 이하의 나머지부분을 생략하고 다음loop로 넘어간다. all vs any all(iterable): 대입된 값이 전부 ture 일경우에만 true를 반환한다. any(iterable): 대입된 값중true가 하나라도 존재할 경우에만 true를 반환한다. etc str.startswith(prefix[, start[, end]]) string이 prefix에 해당하는 값들로 시작한다면 ture 그렇지않다면 false를 반환한다. prefix는 tuple을 받아줄 수도 있다. example = "Hello World" example.startswith("Hello") -> true example.start..

위치를 지정하기위해 명심할것 1.content is Everything요소가 전부다. 2.Order Comes From Code요소의 상대적 위치는 코드위치로부터 온다. 3.Children sit on parents하위 요소는 상위 요소 안에들어있다. Display-outside 속성들 block 다른 요소들과 같은줄에 위치할 수 없다. 윗줄과 아랫줄에 한줄씩 공백을 생성한다. width, height, margin, padding 속성명령어를 통해 크기를 조절할 수 있다. , , 순서리스트 (, , ), 등등 Inline 다른 요소과 같은줄에 위치할 수 있다. 박스의 주위에 공백이나 줄바꿈을 생성하지 않는다. 생성시 박스의 크기가 담고있는 내용물 (문장, 이미지)등에따라 자동으로 조절된다. 크기를 임의..