분류 전체보기
-
Anaconda와 Jupyter Notebook : Python 실행환경 만들기컴퓨터 알아가기/알아두면 편한 팁 2021. 5. 25. 19:30
많은 프로그래밍 언어중에서 파이썬(Pyhton) 프로그램을 많이 사용하는 것은 익히 알고 있을겁니다. 사실 컴퓨터 프로그래밍 언어는 텍스트로 타이핑해서 우리가 보기 쉽게 그래픽 등으로 동작하기까지의 과정을 담고 있는데 오늘은 파이썬 프로그램 라이브러리 도구 가운데 Anaconda와 Jupyter Notebook을 설치해 보도록 하겠습니다. ▒ Anaconda (아나콘다) 1. Anaconda란? Anaconda라는 것은 라이브러리들을 쉽게 설치하고 관리를 해주는 도구로 이해하면 될 것 같습니다. 여러가지 필요한 패키지들을 가상환경에서 설치되어 개발환경을 조성합니다. 한마디로 과학 플랫폼이라고 보면 되는데 모든 프로그래밍 언어에서 사용할 수 있다고 소개되어 있습니다만, 글로만 봐서는 개념을 잡기 어려운 것..
-
CSS Transition : Hover, Transition duration, Transition delay, Timing function, Transition 단축속성값, Transition 단축조합컴퓨터 알아가기/HTML CSS 2021. 5. 21. 19:30
CSS Transition 즉 CSS 전환은 한마디로 시각적으로 변환되는 것을 말합니다. 예를 들어 마우스를 올리면 색이 변하는 것처럼요. 다음 CSS와 브라우저를 기준으로 예를 들겠습니다. 하나의 태그로 나타내면 브라우저는 다음과 같습니다. ▒ Hover Hover는 CSS 변환에서 가장 쉽게 볼 수 있는 속성입니다. 마우스를 올렸을때 Hover를 사용한 속성값을 표시해 줍니다. 사용법은 지정하고자하는 이름에 콜론 ":" 과 함께 hover라고 표시해 줍니다. 다음 CSS는 trans 클래스에 hover를 사용하여 위 그림의 Orange색을 연두색계열로 바꾸어 주는 코드입니다. 그리고 나서 Hello!에 마우스를 대보면 다음과 같이 색이 변합니다. ▒ Transition Duration (전환 시간) ..
-
CSS Grid Layout : Align items, Align content, Justify self, Align self, Grid auto rows, Grid auto columns, Grid auto flow컴퓨터 알아가기/HTML CSS 2021. 5. 20. 19:30
지난 시간까지는 justify-items와 justify-content 속성에 대해 이해를 해봤습니다. 이제부터는 Grid Layout을 공부해보도록 하겠습니다. ▒ Align items와 Align content속성 이제는 items와 content속성을 같이 봐야 할 것 같습니다. Grid 영역내에 어떻게 변하는지 지난 시간 기준으로는 items는 Box item에 직접 영향을 미치고 content는 전체 Grid에 전체 영향을 미쳤습니다. 이제 Align items와 Align content를 같은 개념으로 보면 상하로 변동이 있을겁니다. 다음 브라우저를 기준으로 설명해 보겠습니다. 상기 브라우저에 대해 잠깐 설명하면 이동하는 위치를 보기 위해서 태그 높이를 더 주었습니다. 상기 그림은 Defaul..
-
CSS Grid Layout : Justify items, Justify content컴퓨터 알아가기/HTML CSS 2021. 5. 19. 19:30
Grid Layout을 이해하기 위해서는 축 개념을 바로잡고 있어야 합니다. 지금까지 x축과 y축의 이해를 높혔습니다만 한가지 반드시 기억해야할 점은 Row는 행이라는 뜻인데 무조건 수평으로 나뉘는 개념으로 이해하시면 됩니다. 수평으로 나눈다라는 것은 높이를 수평으로 계속 자른다라는 개념이고 Column은 그 반대 개념이겠죠? 이 개념이 이해되기전에는 어떠한 진도도 나가지 않는게 나중에 훨씬 더 빨리 진도가 나갑니다. ▒ Justify items 속성 justify-items 속성은 수직축을 중심으로 좌우로 위치를 조정하는 속성입니다. Flexbox와 같은 개념입니다. 속성값으로는 Grid의 왼쪽 기준인 start, 오른쪽 기준인 end, 중앙배치인 center, 해당 Grid까지 확장하는 stretch..
-
CSS Grid Layout : Grid-template-area 속성, Overlapping(중첩) 요소처리컴퓨터 알아가기/HTML CSS 2021. 5. 18. 19:30
이제부터는 CSS Grid Layout에 대해 조금 더 들어가 보겠습니다. ▒ grid-template-area 속성 본 속성을 사용하면 grid-row-start, grid-row-end, grid-column-start, grid-column-end, grid-area 속성값으로 사용되는 섹션에 이름을 지정하고 관리할 수 있게 해줍니다. 다음 HTML과 CSS를 기준으로 이야기를 풀어 나가겠습니다. 상기 HTML코드를 보면 이제 홈페이지의 기본구성을 볼 수 있습니다. 및 태그가 위 아래 배치가 되고 웹사이트를 찾아갈 수 있게 만드는 Navigation 섹션인 태그 그리고 본문으로 구성되어 있는 태그로 이루어져 있습니다. CSS코드를 아래와 같이 만들고 웹페이지를 한번 보겠습니다. ① 수직과 수평 Gr..
-
CSS Grid : Repeat함수, Minimax함수, Grid gap, Grid items, Grid area컴퓨터 알아가기/HTML CSS 2021. 5. 17. 19:30
▒ Repeat( ) 함수 Grid의 속성값으로 repeat( ) 함수를 사용할 수 있습니다. 행과 열을 만들때 좀 더 간소화한 코딩을 위한 겁니다. 다음과 같은 예가 있습니다. 위 예는 넓이가 300px을 3개로 나누는데 각각의 크기는 100px이라는 뜻입니다. 즉 다음은 같은 CSS 코드입니다. repeat(3, 100px) = 100px 100px 100px 그럼 repeat(2, 300px 500px)은 어떻게 해석이 될까요? => 300px과 500px을 2번 반복하라의 뜻입니다. 즉, 300px 500px 300px 500px 총 4개의 수직으로 나뉘어지겠죠. 지난 시간 다루었던 다음 그림을 repeat( )함수로 바꾸어 보겠습니다. 위 그림을 보면 수직으로는 반복이 힘들고 수평으로는 같은 F..
-
CSS Grid : Grid-template-columns, Grid-template-rows, Grid-template, Fraction 속성컴퓨터 알아가기/HTML CSS 2021. 5. 14. 19:30
Grid 격자에 대해 공부해 보도록 하겠습니다. 쉽게 표현하자면 하나의 큰 영역(container)안에 바둑판같은 격자(box)를 형성한다고 보면 되겠습니다. 우선 순위는 행 기준인데 행과 열을 지정함으로써 격자가 생기겠지요. 즉 container가 상위 영역이고 box가 하위 영역이어야하고 상위 영역을 Parent, 하위 영역을 Children이라고 영문은 되 있더라구요. Flexbox 처럼 display속성에 grid를 주면 상위 영역안으로 하위 영역이 배치가 되는 구조라고 보시면 됩니다. 다음 HTML과 CSS 그리고 이에 따른 브라우저의 모양을 기준으로 설명 드리겠습니다. (기준은 Codecademy가 메인이고 추가 여러 소스에서 공부하고 같이 내용을 담도록 하겠습니다. ) 위 예제에서 상위 영역..
-
CSS Flexbox : 간단한 홈페이지 레이아웃 꾸며보기컴퓨터 알아가기/HTML CSS 2021. 5. 13. 19:30
이제 HTML도 CSS도 전문가 수준은 아니지만 어느정도 개념을 잡았으니 홈페이지 화면(Main Page)을 한번 꾸며 볼까 합니다. 우선 다음과 같은 순서로 진행해 볼까 합니다. ① 어떤 주제로 할건가 ② Main Page의 태그는 어떤 구성으로 할 건가 ③ 필요 이미지가 있는가 ▒ Main Page 만들기 저는 과일가게에서 판매되는 과일을 홍보해 보고자 합니다. 과일에 대한 이미지도 필요할 거고 이름 가격 등등이 필요할 건데 이번 시간에는 레이아웃에 중점을 두기 위하여 Main Page의 큰 틀만 만들어 보는 것으로 목표를 두겠습니다. 구성은 다음과 같이 해 보겠습니다. 다른 HTML을 사용한 적이 없기때문에 태그안에 4개의 Division으로 나눴습니다. 다음과 같이 HTML로 구성해 보았습니다. ..