C언어 예술가

앞으로 플라스크를 사용해야할 듯 싶어서 설치를 하려고 보니까 엥? 이미 설치가 되어 있었다.기억은 안나는데 내가 사용하는 파이썬이 아나콘다여서 이미 설치가 되어 있는 것인지 아니면 예전에 내가 설치했던 것인지 기억이 나지 않는다.아나콘다 홈페이지 가서 살펴보니 기본적으로 설치되어 있는 것 같았다. 파이썬3에서 플라스크를 사용하려면 아나콘다 최신버전을 설치하던지 아니면 아나콘다에서 플라스크(flask) 버전을 바꾸는 방법을 사용하면 된다.아나콘다 플라스크아나콘다를 설치함으로서 이렇게 플라스크는 간단히 설치된다.파이썬으로 어떤 프로젝트를 시작하든 가장 기본이 되는 것은 가상환경 설정이다.여기서 가상환경은 파이썬 3.3이상의 버전에서는 vevn이라는 도구를 사용하여 설정할 수 있는데 프로젝트 별로 라이브러리의..

스마트폰, 태블릿 등 다양한 미디어 디바이스의 등장으로 인터넷은 PC에서 뿐만아니라 다양한 모바일 기기에서 손쉽게 사용이 가능해졌습니다.분명 인터넷 사용은 더 편리해 졌지만 개발자의 입장에서는 다양한 크기의 디바이스 화면에 맞는 웹페이지를 따로 만들어야 하는 고충이 생겼습니다. 커다란 PC화면에서 보여지는 페이지를 스마트폰 같은 작은 기기에서 그대로 사용하는 것은 단순히 화면이 축소되어 보이기 때문에 폰트나 이미지의 크기가 어색해 보일 수 밖에 없기 때문입니다. 또한 스마트폰 같이 작은 디바이스에서 보여지는 화면은 PC 화면에서의 복잡한 인터페이스 보다는 단순한 인터페이스로 설계되어야 할 필요가 있습니다.CSS의 미디어쿼리(media query)를 사용하면 화면의 해상도에 따라서 페이지를 다르게 보여줄 ..

우리가 알고있는 일반적인 태그들(div, p, a)은 각각 특정한 기능을 가진 태그인 반면 시맨틱 태그는 기능을 위한 태그가 아니다. 있으나 없으나 문서의 모습이나 형태가 변하지 않는다.시맨틱(semantic) 태그란 단어 의미대로 의미론적 태그다.따라서 시맨틱 태그를 이해하려면 지금까지 알아온 태그와 달리 추상적으로 바라볼 필요가 있다.예를들어 대학 건물을 짓는다고 생각해보자. 건물만 지어놓고 건물에 이름을 만들지 않아도 기능적으로는 아무런 문제는 없다. 강의실을 사용할 수도 있고 컴퓨터 실습실도 사용할 수 있다. 다만 처음 오는 사람은 무엇이 어디에 있는지, 어떤 기능을 하는 건물인지 직접 들어가봐야 알 수 있다. 따라서 건물에 공대건물, 법대건물, 도서관 건물 등과 같이 이름을 써놓으면 처음 오는 ..

기존의 웹페이지를 만들 때 사용하던 올드한 레이아웃 제작방법을 개선하고자 flexbox 가 생겨났다. flex는 flexible의 준말로 유동적인 레이아웃을 손쉽게 만들 수 있다는 의미를 가진다.기본 컨셉은 아주 명확하기 때문에 기존의 레이아웃을 만드는데 사용하던 table 태그나 position 또는 float 속성을 사용하는 방법의 복잡함을 고수할 필요가 없어졌다.다만 생각보다 다양한 속성들이 있어서 정리할 필요는 있다. 이 속성을 모두 사용할 필요는 없으므로 대략적인 이해만 해 둔 후에 필요할 때마다 참고하여 레이아웃을 만들면 될 것이다.flexbox의 기본 컨셉container와 item들이 부모와 자식관계일 때 container에 display : flex; 속성을 줌으로서 다음과 같은 모습의 ..

Cascading은 작은 계단모양의 폭포를 말합니다. 폭포의 전후로 물의 높낮이가 바뀌겠죠. 연속적인 물의 흐름에서 높낮이 차이를 우선순위에 비유한 것 인듯 싶습니다. CSS(Cascading style sheets)의 C는 Cascading의 약자입니다. CSS의 뜻을 살펴보면 우선순위가 있는 스타일 시트라는 뜻이군요. 구체적으로 하나의 태그에 여러가지 방법으로 동일한 속성의 스타일을 적용하는 경우 우선순위에 따라서 적용될 스타일이 결정된다는 뜻입니다. 속성을 적용하다보면 하나의 태그에 본의 아니게 같은 속성이 겹쳐 적용될 때가 있을 겁니다. 단편적인 예제를 통해서 CSS를 공부할 때는 이런 경우가 그다지 발생하지 않으므로 Cascading에 대해서 깊게 생각하지 않아도 될지 몰라도 완성도 있는 HTM..

박스모델을 공부한 후부터 지금까지 사이트 레이아웃을 만드는데 필요한 중요한 속성들을 계속 살펴보고 있습니다.이번에 다룰 float 속성도 레이아웃을 잡는데 쓰이는 속성으로 기본 개념은 단순하지만 기본 개념만으로는 동작방식을 예측하기 힘든 경우가 있어서 케이스별로 정리해서 이해할 필요가 있습니다.저도 천천히 공부하는 입장이고 경험적이고 실험적인 설명도 있으므로 혹시 틀린점이 있다면 댓글 부탁드립니다. float 속성float의 뜻은 "뜨다", "흐르다" 뭐 이런 뜻입니다. 단어의 의미가 이 속성과 딱 매치된다고 말은 못하겠습니다. 그래도 단어의 뜻으로 이 속성을 설명해 보자면 이렇습니다."float 속성을 갖는 요소는 html 문서에서 공간은 차지하되 다른 요소의 배치에 영향을 안주는 요소가 된다."이건 ..

numpy는 numerical python의 약자로 수치를 다루는 분야를 위한 패키지로서 아주 유명하다. 이 패키지에 포함된 array와 matrix와 같은 자료구조는 수치를 다루는 데 있어서 기본적인 자료구조(데이터 타입)다.방대한 양의 데이터를 다루거나 할 때 다차원 배열(ndarray)를 사용하거나, 행렬(matix)를 다룰 때 matrix 를 사용할텐데 ndarray와 matrix는 서로 차이점이 있지만 양방향 캐스팅(변환)이 가능하다.기본 파이썬 데이터 타입 역시 ndarray 타입이나 matrix 타입으로 직관적인 캐스팅이 가능하다.numpy에 대한 자세한 메뉴얼은 공식 사이트에서 살펴보면 될 것이다. numpy의 설치는 따로 하지 않고 파이썬 아나콘다 버전을 설치하여 해결하였다.파이썬 아나콘..

이번 포스팅은 태그 요소의 위치를 설정하는 속성에 대한 이야기를 해보겠습니다. 앞서 박스모델에서 태그요소간에 상호작용에 의해서 위치가 결정된다고 했습니다.맞긴 하지만 지금까지는 태그 요소를 위치하는 방법 중에 한가지만 살펴본 것입니다.위치를 결정하는 속성은 position인데 이 속성을 지금까지 설정하지는 않았습니다. position 속성을 주지 않으면 디폴트로 static이라는 속성값이 부여됩니다. 그러면 지금까지 static 속성값으로 위치를 정한 것이 되네요.position 속성position 속성이 가질 수 있는 속성값에는 다음과 같은 4가지가 있습니다.static : position 속성을 부여하지 않았을 때 가지는 디폴트 값. relative : 현재 위치에서 상대적인 offset 속성을 줄 ..

저번 시간에 박스모델에 대한 공부를 하면서 HTML 태그 요소들이 문서내에서 어떻게 배치되는지에 대해서 살펴보았다. 이를 결정하는 속성 다섯가지(width, height, padding, border, margin)에 대해 살펴보았었는데 오늘은 이 규칙의 기준을 바꿀 수 있는 box-sizing이라는 속성을 살펴보고, 더 나아가 태그 요소들 간에 margin이 어떻게 적용되는지에 대해서도 살펴보겠다.저번 시간에 이어서 매우 중요한 내용이므로 반드시 이해하고 넘어가야 한다.box-sizing 속성박스모델에서 태그 요소들을 둘러싼 4개의 층으로 된 박스들은 앞에서 언급한 5가지 속성에 의해서 결정된다. 그 중 width와 height 속성은 가장 안쪽에 있는 내용(content)의 가로와 세로 사이즈를 결정..

박스모델은 웹 페이지를 만드는데 있어 기본 중에 기본이라고 할만큼 중요한 내용이다. 그럼에도 소홀해지기 쉬운 내용인데 제대로 이해하고 있지 못하면 웹페이지의 레이아웃을 설계하다 문제가 발생했을 시에 원인 파악이 힘들어질 수 있다.박스모델은 html 요소(element)들이 문서 내의 공간을 차지하는 부피에 관한 규칙이다. 차지하는 모양이 네모 박스(box) 모양이라서 박스모델이라고 한다.태그(tag)들은 내용(content)를 감싸고 있고 내용은 문자 또는 이미지 등이 있으며 문서에서 일정한 부피를 박스모양으로 차지한다. 그리고 내용들 간에 간격이 정해지는지는 방식도 존재한다. 이제부터 하나씩 알아가보자.박스모델그림은 html 코드와 브라우저에서 코드를 실행한 모습이다. div 태그에 css 스타일로 5..