삐제제의 개발 노트

HTML문서에서 쓰이는 CSS 속성중 position 이라는 속성이 있습니다. 이 position 속성에서 자주 쓰이는 속성들은 대표적으로 fixed, relative, absolute 가 있습니다. static 속성이있는데 이것은 디폴트 값이라고 생각하시면 됩니다. 아 그리고 body 태그는 기본값으로 position : relative 값을 가지고 있습니다. 이번 포스트 에서는 fixed 에 대하여 먼저 포스팅 하려고 합니다. fixed는 position : fixed 값을 가지고있는 엘리먼트를 웹에 고정시킵니다. 그리고 이 속성값을 줌으로써 top, left, right, bottom 속성을 이용할 수 있습니다. 우선, 사진으로 봅니다. 아래는 코드입니다. fixed 태그는 적용된 위치부터 고정되어..

flexbox는 이름 그대로 유연한 박스를 의미합니다. flexbox를 사용할때는 지켜야 할 규칙이 있습니다. 첫번째 규칙 : 자식 엘리먼트에 아무것도 적으면 안된다. 부모 엘리먼트에만 명시해야합니다. 위 규칙을 참고하여 flexbox를 만드는법은 간단합니다. display: flex; 코드를 넣어줌으로써 body를 flex컨테이너로 만들어 주는것입니다. div 태그는 참고로 박스.. 원래의 형태가 블럭의 형태를 띄는 친구들입니다. (블럭은 블럭 옆에 다른 요소들이 올 수 없습니다.) 하지만 위 코드처럼 flex 속성을 주게되면 여전히 블럭임에도 불구하고 옆에 다른 블럭들이 나란히 놓이게 됩니다. 마치 인라인 처럼요. 우선 이렇게 설정해주게되면 다른 더 많은 속성들을 사용할 수 있습니다. 우선 justi..

def Hello(name, age): return f"Hello {name} you are {age} years old!"

함수를 호출하는 대부분의 경우, 함수의 결과를 신경써야한다. 예를들어 plus 함수를 만든다고 할때, 전의 게시글에는 단지 계산 값을 print로 출력해줬지만 반환값을 변수에 저장하고싶을때도 있을것이다. 그럴땐 이렇게 return으로 값을 반환해주면 변수에 값을 저장해 줄 수 있다. 말 그대로 return, 돌려준다. def plus(a, b): return a+b result = plus(3, 5) // result에 8이 저장된다. 그리고 return 아래에 어떤값을 쓰든, 파이썬에서는 return을 만나면 그 함수는 종료가 되버린다. def plus(a, b): return a + b print("Hey!") print(plus(3, 5)) // 실행하면 콘솔에는 8 만 출력된다.

지난 글에서 함수가 무엇인지.. 그리고 어떻게 만드는지 간단하게 포스팅했었다. 이번 포스팅에서는 함수의 인자 (매개변수라고도 한다.) 에 관해서 포스팅 하려고한다. 우선, 매개변수란 어떤상황에 쓰이냐면 만약 우리가 함수를 만들건데, 그 함수에 어떤 값을 주고 그 값을 함수 내부에서 처리해서 반환해주길 원할때 사용한다. def WHO_ARE_YOU(who) : print("I M", who) WHO_ARE_YOU("PJJ") 위 코드를 보면 알 수 있듯이, WHO_ARE_YOU 라는 함수는 who 라고하는 매개변수값을 값으로 받는다. 그리고 함수 내부에는 print("I M, who) 라고 되어있다. 그럼 WHO_ARE_YOU("PJJ")로 함수를 호출하면 어떤값이 출력이 될까? I M PJJ 라고 출력된..

함수란.. 영어로 function이다. 말 그대로 코드내에서 어떤 기능을 담당하는 역할을 말한다고 할 수 있다. 예를들면.. 우리가 처음 프로그래밍 언어를 배울때, 만약 파이썬이라고하면 처음에 다들 hello world! 라는 문자열을 출력해 본 기억이 있을것이다. 그때 어떻게 출력을 하던가? print("hello world") 이렇게 출력했을것이다. 여기서 print가 함수이다. print(매개변수) 함수는 매개변수 자리에 값을 넣으면 그 값을 콘솔에 출력해주는 "기능"을 하는것이다! 이렇게 파이썬에서 기본적으로 제공해주는 함수를 built-in-function 이라고하는데.. 뜻은 이미 만들어진 함수? 이렇게 생각해도 좋을것같다. 그리고 우리가 function을 만들수도있다. function을 만드..

리스트 : 가장 기본적인 배열을 뜻한다. 리스트 내부의 값을 수정할 수 있다. 선언과 초기화는 아래 코드를 참고 days = ["Mon", "Tue", "Wed", "Thur", "Fri"] print(days) days.append("Sat") days.reverse() // 리스트의 순서를 바꿉니다. print(days) 타입 또한 자유롭게 넣을수있다. something = ["abc", 123, False, None, "adfadf"] JAVA나 C처럼 오직 한가지 타입만 저장하는것이 아니고 여러가지 타입의 데이터를 넣을수있다! 이것은 튜플도 마찬가지고 딕셔너리에서도 마찬가지이다. 튜플 : 리스트와 같지만 수정이 불가능하다. 튜플은 아래와 같이 만든다. days = ("Mon", "Tue", "We..

Hello Hello Hello Hello Hello Hello Hello 우리는 html 태그에 id 나 class와 같은 속성을 부여해줄수있다. CSS는 우리가 코딩한 html태그를 선택하여, 그 태그가 안고있는 텍스트들을 예쁘게 만들어 줄 수 있다. 먼저 head 태그 내부에 style태그를 만든다. 우리는 이 style 태그 내부에 CSS 코드들을 작성한다. 그리고 여기서 css 코드로 꾸며줄 html태그를 선택해야하는데 이것을 우리는 선택자 라고 부른다. 먼저 이 게시글의 제목인 id 와 class 속성에 대해 알아야하는데, id 와 class 속성이 해주는 역할은 비슷하다. 그 태그에 이름을 붙여주는거라고 생각하면된다. 다른점은 id는 유일해야 한다는것이다. class는 겹쳐도 상관없다. 유일..

블럭(Block) : 옆에 다른 요소가 올 수 없는것. 블럭의 유용한 특징 세가지 : margin, padding, border margin : box의 경계의 바깥에 있는 공간, 속성값이 하나이면 사방이 모두 적용된다는것이고 속성값이 두개면 순서대로 상하, 좌우를 의미한다.. ex) margin: 20px 15px; < 상하 20px 좌우 15px 만약 4개의 값을 준다면.. ex) margin : 20px 5px 12px 9px; 순서대로, 위, 오른쪽, 아래, 왼쪽 (시계방향) 순서대로 적용된다. padding : 경계로부터 안쪽에 있는 공간 border : box의 경계를 의미한다. 쉽게 말하면 테두리? style도 여러종류가있지만, 주로 solid를 많이 사용하는 편 속성은 width, styl..

HTML 코드에 헤드 태그 부분에 link 태그를 이용하여 넣어줄수있다. 위 코드에선 넷플릭스 홈페이지에서 이미지 링크를 긁어왔다!