Web
-
display와 float의 차이Web/CSS 2020. 1. 12. 12:04
Navigation bar에서 설명했듯 display: inline-block; 과 float: left;는 비슷한 효과를 보여준다. 이번 편에서는 그 차이에 대해서 정확하게 알아보도록 하자. 아래 코드와 그 결과를 보도록 하자. See the Pen PoweLvv by Catnap421 (@catnap421) on CodePen. float의 경우, p태그의 내용이 박스 옆에 오고, display의 경우, 아래에 오는 걸 확인할 수 있다. 즉 하단에 다른 태그를 입력하면 그 결과를 쉽게 확인할 수 있다. float의 경우, 해당 요소의 크기만큼 할당해서 바짝 붙이기 때문에 box 요소가 float 되고 난 후, 남은 공간에 p요소가 오게 된다. 그러나 display의 경우, display: inline..
-
Navgation bar(내비게이션 바)Web/CSS 2020. 1. 11. 21:47
Nav bar(이하 내비게이션 바) 디자인은 CSS 레이아웃에서 중요한 역할을 한다. 내비게이션 바를 디자인할 때 크게 가로와 세로 두 가지 경우로 나눌 수 있다. 코드를 통해서 어떻게 가로와 세로로 디자인하는 지를 살펴보고, 그때 각 프로퍼티가 어떠한 역할을 하는지 알아보자. 가로로 디자인할 때(horizontal) See the Pen qBEYQrj by Catnap421 (@catnap421) on CodePen. Example explained: float: left; - use float to get block elements to slide next to each other display: block; - Displaying the links as block elements makes the ..
-
floatWeb/CSS 2020. 1. 11. 15:52
CSS에서 float는 레이아웃을 만들 때, 블록 요소들을 가로 정렬을 시킬 때 자주 사용한다. float의 간단한 사용법과 예시는 여기서 다루지 않고, 이 글에서는 float를 사용할 때 생길 수 있는 문제와 이를 해결할 수 있는 기법들에 대해 소개하고자 한다. float 프로퍼티가 선언된 자식 요소로 인한 부모 요소의 부적절한 높이 See the Pen bGNMoRv by Catnap421 (@catnap421) on CodePen. 자식 요소에 float 프로퍼티를 주게 되면 위 코드와 같이 부모 요소의 높이가 제대로 설정되지 않는다. float 요소는 일반적인 흐름상에 있는 게 아니기 때문에 float 요소의 높이를 알 수 없고, 부모 요소는 이로 인해 제대로 높이가 표현되지 않는다. 1. ove..
-
값에 의한 vs 참조에 의한Web/JavaScript 2020. 1. 6. 20:37
자바스크립트를 공부하다 보면 C언어에서 매개변수로 값을 줄 때와 포인터를 줄 때처럼 명확한 표현 방식이 없음을 마주할 때가 있다. 그렇다면 어떻게 자바스크립트는 이 둘을 구분할까? 데이터 값 조작 방식으로 값에 의한(by value) 방식과 참조에 의한(by reference) 방식이 존재한다. (이하 값, 참조) 값을 통해 조작하는 경우는 기본 타입이라고 볼 수 있다. 예시로 숫자, 불리언, 문자열이 있다. 참조를 통해 조작하는 경우는 참조 타입인데, 객체(배열, 함수 등)가 그러하다. 위 두 가지의 차이점을 보면 참조 타입은 메모리의 크기가 불분명하기 때문에 메모리를 비효율적으로 많이 사용하는 경우에 속한다. (문자열은 이후에 다시 설명) var n = 1; // 숫자, 문자열, 불리언은 기본 타입 ..
-
[DOM]ID, Class, Name 속성에 대해Web/JavaScript 2018. 1. 2. 01:39
HTML 문서를 작성하다 보면 태그 안에 속성 값으로 id, class, name이 존재하는 것을 경험할 수 있다. 오늘은 이 속성들의 차이를 명확히 구분짓고 가는 것이 후에 도움이 될 것 같아서 이렇게 정리하는 시간을 가지게 되었다. 차이이 셋의 차이를 Mozilla 사이트의 내용을 참고하면서 간단하게 비교해보자.1. Id먼저 공식 Mozilla 사이트에서 살펴보면 ID를 다음과 같이 설명하고 있다. idDefines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting..
-
Dictionary 정렬하기Web/Python 2017. 11. 26. 15:03
딕셔너리는 리스트만큼이나 파이썬 내에서 활용이 많으며, 또 자바스크립트의 JSON 파일과 유사한 성격을 띄기 때문에 정렬의 쓰임이 많다.여기서는 딕셔너리를 정렬하는 방법에 대해 알아보도록 하자. 딕셔너리 정렬하는 방법은 2가지가 존재한다. 1. operator 라이브러리 활용하기2. 람다함수 활용하기 각각에 대해 알아보자. 1. Operator 라이브러리 활용하기operator를 활용해서 key 혹은 value로 정렬이 가능하다. 다음의 예시를 보자. Key를 기준으로 정렬하기>>> import operator>>> k = {1:"c", 2:"a", 3:"t", 4:"n", 5:"a", 6:"p"}>>> k_sorted=sorted(k.items(), key=operator.itemgetter(0)) >..
-
고급 자료형(딕셔너리, 집합)Web/Python 2017. 11. 24. 20:22
Dictionary Key로 Value 얻기>>>a.get('name') = a['name']>>>a.get('name', 'anonymous') // 못 찾으면 anonymous를 반납한다. Key 존재여부 확인>>> 'name ' in a // 딕셔너리에 'name' Key가 있느냐 딕셔너리의 용도검색할 키와 데이터부분으로 나누어져 있는 경우 -> JavaScript의 객체와 비슷하게 쓰이며 그 예로는 'JSON'을 생각해 볼 수 있다. 집합 자료형집합을 처리하기 위한 자료형- set 키워드로 생성- { }로 집합 자료형을 표현 집합 자료형의 특징- 집합은 원소의 중복을 허용하지 않는다.- 순서가 없다.- 인덱싱이 불가능하다.- 인덱싱을 하려면 튜플이나 리스트로 변환 후에 해야 한다. 교집합, 합집합..