본문 바로가기

개발자 꿈나무43

프로그래밍의 자료형 파이썬(프로그래밍)의 자료형에는 총 4가지 타입이 있다. 프로그래밍 공부에 있어 매우 기초적인 내용이므로 꼭 알아두어야 한다. 프로그래밍의 자료형 정수(Integer) : 양/음의 정수, 0 선언 형태는 data=1 ex) -3, 0, 2, 3 소수(Floating Point) : 실수형, 소수점이 포함된 실수 선언 형태는 data=9.0 ex) 1.4, 2.0, 3.7 문자열(String) : 따옴표('," 모두 해당)에 들어가 있는 문자형 선언 형태는 data='abc' ex) hello, world, "3" 불린(Boolean) : 논리, 참(True) 또는 거짓(False)을 표현 선언 형태는 data=True ex) 10 > 8 → True, 10 < 8 → False Q. 문자열을 표현할 때 .. 2021. 5. 16.
파이참 IDE 설치하기 (macOS) 파이썬 개발언어를 공부하기 위해서는 파이참(PyCharm)이라는 프로그램을 설치해야 한다. 파이참 안에는 코드 편집기를 비롯한 컴파일러, 인터프리터 등을 모두 포함하고 있는데 지금 단계에서는 당연히 무슨 뜻인지 모른다. 그냥 파이썬 프로그램을 개발하는데 필요한 모든 것이 다 들어있구나~ 파이썬 공부할 때 파이참의 도움을 많이 받겠구나~ 정도로 이해하면 될 것 같다. 파이참 같은 프로그램을 IDE 라고 부르는데 이것은 Integrated Development Environment의 약자로 통합 개발 환경을 뜻한다. 파이참 pycharm 설치 방법 프로그램 설치의 시작은 검색! 구글에서 pycharm 이라고 검색한다. 아래와 같은 웹사이트를 발견할 수 있다. 클릭해서 사이트에 방문하도록 하자. https:/.. 2021. 5. 11.
파이썬 프로그래밍 언어 설치하기 개발 언어에 처음 입문하는 사람들에게 좋다는 파이썬(python)을 배워보기로 했다. 최근에 알게된 모 사이트에서 온라인 강의를 들을 예정인데, 사이트는 조금 더 들어보고 괜찮으면 블로그에 소개하도록 하겠다. 그래서 오늘 포스팅은 나처럼 파이썬을 처음 시작하는 분들을 위한 파이썬 프로그래밍 언어 설치하기! 나는 파이썬의 'ㅍ'자도 해본 적이 없지만 왠지 모르게 이름이 마음에 든다. 그리고 로고에 그려진 뱀 두마리도 귀엽다. (아름답지 않으면 살아갈 가치가 없지-_-) 파이썬 python 설치 방법 먼저 구글에서 python을 검색하면 아래와 같은 사이트가 나온다. https://www.python.org/ Welcome to Python.org The official home of the Python P.. 2021. 5. 11.
버튼 <button>에 onclick 링크걸기 버튼을 구현할 때 안에 태그를 사용하면 일부 브라우저에서 클릭이 되지 않는 문제가 있다. 이러한 경우 태그가 태그를 감싸는 형태로 순서를 바꾸어 사용해도 되지만 자바스크립트의 onclick 을 이용하여 구현하는 간단한 방법도 있다. 버튼내용 버튼내용 현재 페이지에서 이동 혹은 새 창으로 이동하는 버튼을 만들고 싶을 때 위의 코드에 링크 주소만 바꾸어 사용하면 된다. 2021. 4. 7.
position: fixed 이용해서 footer, div 하단에 고정시키기 최근에 회사에서 삼* 브랜드 기업과 서비스 제휴를 맺어 카시트 클리닝을 신청하는 고객용 랜딩 페이지를 제작했다. 디자인 컨펌을 하고 퍼블리싱을 진행하는 김에 css를 사용하며 몇가지를 함께 정리해 두었다. 어렵지 않지만 막상 하려면 기억이 가물가물한... 그러다가 검색해서 코드를 보고나면 '맞다, 이거였지!' 하는 css 코드 몇가지를 이번주에 블로그에 정리해 두려고 한다. 스크롤과 상관없이 div 하단에 고정시키는 방법 신청하기 랜딩 페이지의 시안은 아래와 같다. 가장 먼저 타이틀이 보여지고 스크롤을 아래로 내리면 상세페이지를 확인할 수 있다. 그리고 서비스가 마음에 들어 신청을 하고 싶다면 '신청하기' 버튼을 클릭하면 된다. 상세페이지가 꽤 길어서 신청하기 버튼을 상세페이지 아래에 둔다면 스크롤을 많.. 2021. 4. 7.
아이템(div)의 너비 설정하기 - flex item 속성(2) 얼마 전에 flex css 속성들에 대해 포스팅하기로 했었는데 flex item 속성(1)까지 포스팅을 하고 그 후로 시간이 꽤 지났다. (이런 저런 일들로 너무 바빴...) 늦었지만 마무리는 해야하니까 오늘은 flex item 속성 제 2탄! 지난 번에 item 정렬과 순서를 설정하는 css를 알아보았다면 오늘 소개할 아이들은 item 너비와 관련된 css 들이다. 2020/10/29 - [개발자 꿈나무/CSS] - flex 기초 - flex란 무엇인가? 2020/11/06 - [개발자 꿈나무/CSS] - 아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) 2020/11/07 - [개발자 꿈나무/CSS] - 아이템(div) 정렬과 여백 설정하기 - flex .. 2021. 1. 1.
div 박스 & png 투명배경 이미지에 그림자 효과주기 이벤트 페이지를 퍼블리싱하던 도중 css 스타일시트를 이용하여 그림자 효과를 주어야 하는 div 박스와 투명배경 png 이미지를 만났다. 이 두가지는 각각 그림자 효과를 적용하는 방법이 다른데 블로그에 정리해두려고 한다. div 박스 그림자 효과주기 그림자효과를 주려는 대상이 네모난 모양이라면 box-shadow 를 사용하여 그림자 효과를 줄 수 있다. .box { box-shadow : none; /* 그림자 효과를 없앰 */ box-shadow : x-position y-position blur color inset; /* 왼쪽부터 차례대로 가로 위치, 세로 위치, 그림자의 흐린 정도, 그림자 색상 가로 위치, 세로 위치는 양수이면 오른쪽, 음수이면 왼쪽에 그림자를 만들고, 블러값은 클수록 흐려짐 i.. 2020. 11. 29.
VS code 미니맵 안 보이게 하기 텍스트 에디터의 종류에는 여러가지가 있는데, 요즘 나는 VS code를 사용하고 있다. VS code는 Visual Studio Code의 약자로 마이크로소프트사에서 개발한 편집기인데 다양한 플러그인을 제공하고 속도도 빠른 편이라 개인적으로 만족도가 높다. VS code를 사용하다 보면 우측에 미니맵이 표시된다. 가끔은 이 미니맵이 작업하는데 매우 거슬릴 때가 있어, 보이지 않게 숨기는 방법에 대해 소개하려고 한다. 1. mac OS 기준으로 'Command + Shift + P' 를 누른다. 2. 텍스트창에 'minimap' 이라고 입력하면 아래에 'View: Toggle Minimap' 이라는 항목이 표시된다. 선택해주도록 하자! 끝이다. 미니맵이 사라졌을 것이다. (넘나 간단-_-;) 다시 미니맵을.. 2020. 11. 13.
아이템(div) 정렬과 순서 설정하기 - flex item 속성(1) 지난 포스팅에서는 flex와 flex-container(부모 요소)에 사용할 수 있는 속성들에 대해 알아보았다. 2020/10/29 - [개발자 꿈나무/CSS] - flex 기초 - flex란 무엇인가? 2020/11/06 - [개발자 꿈나무/CSS] - 아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) 2020/11/07 - [개발자 꿈나무/CSS] - 아이템(div) 정렬과 여백 설정하기 - flex container 속성(2) 이번 포스팅에서는 flex-item(자식 요소)에 사용할 수 있는 속성 중에서 순서, 정렬을 변경하는 css에 대해 설명할 예정이다. order item의 순서를 설정하는 css이다. 숫자가 클수록 순서가 밀리며 음수, 0, 양수.. 2020. 11. 13.
아이템(div) 정렬과 여백 설정하기 - flex container 속성(2) div 박스의 사이 간격을 동일하게 하고 싶다면? 내부 컨텐츠 길이에 상관없이 div 박스가 동일한 넓이를 갖게 하고 싶다면? 이번 포스팅은 이러한 물음들에 대한 좋은 해결책이 될 것이다. 이번에 소개할 css 태그 모두 지난 포스팅과 마찬가지로 flex container에 적용 가능한 속성이다. justify-content 수평축의 정렬 방법을 설정하는 css이다. 속성값은 아래와 같다. .flex_container { justify-content: flex-start; /* 기본값, 아이템을 시작점으로 정렬 */ justify-content: flex-end; /* 아이템을 끝점으로 정렬 */ justify-content: center; /* 아이템을 가운데 정렬 */ justify-content: .. 2020. 11. 7.