전체 글 133

생활코딩을 통한 CSS(with BGM. 부산 개발자들의 모임)_ch.5

이제 HTML과 CSS의 수업이 끝났습니다! (지금껏 오신다고 고생 많으셨습니다! ㅠㅠ... 하지만 우린 가야할 길이 많이 남았습니다. 그래서 다시 짐을싸고 공부를 하러 가보도록 하겠습니다~!) 그리하여... 우리는 이제부터 JavaScript라는 것을 배워볼 것 입니다. 1. 우리가 자바스크립트를 왜 배우는가? - 이제껏 우리가 배운 HTML로 웹페이지를 만들수 있었습니다. 하지만 사용자는 웹사이트와의 상호작용을 하기를 원합니다. 하지만 HTML은 정적이기 때문에 한번 화면에 출력되면 그 모습 그대로 나오기 때문에 우리는 우리의 조작에 의해 반응을 하는 동적인 웹페이지를 만들고자 합니다. 그렇기에 이러한 기능을 구현하기 위해서 등장한 언어가 JavaScript입니다. - 기본적으로 자바스크립트는 HTM..

React Js(기초-2)

자! 오늘은 2번째 React 시간입니다. 오늘 우리가 해볼것은 React 환경 구축입니다. 바로 시작해보도록 하겠습니다!(들어가기에 앞서 미리 npm, npx 등이 설치가 되어 있어야 합니다) 1. ReactApp 만들기 1-(1) 1-(2) 1-(3) 1-(4) 1-(5) 1-(6) 1-(7) 2. Github repository 만들기 - 이부분은 깃 push까지 알고 계시면 그부분을 따라서 진행하시면 됩니다.(git 내용들어가서 확인해보기) * package.json의 이름과 동일하게 파일이름을 만드는것을 권장합니다. 3. React-App이 어떻게 작동하는지 알아보기 - public/favicon: favicon 아이콘을 확인할수있음 - index: 그냥 index이다. 목적에 맞게끔 비워져있다..

FE/React 2020.11.18

React Js(기초-1)

React? 과연 무엇인가. - 프레임워크? 라이브러리? 개발언어? 처음 내가 react를 듣기만 했었을때는 Js를 기반으로 사용하는 프레임워크 정도로 알고 있었는데 알고보니 라이브러리였다. 잘못된 지식을 새롭게 알게되어서 다행이었다. - 이것은 우리가 개발하는데 있어서 보다 나은 편리함을 준다고 정도로만 일단은 알고있어보자... 추후 공부를 하면서 새로운 지식을 얻도록 블로그에 개시를 할 예정이다. 일단 질질끌것 없이 React 시작을 해보도록 하겠다. (따라 해보기) (단! 이 부분은 사전의 HTML, CSS, JS의 지식을 선행 후 알아보시기를 바랍니다.) 1. 우선은 node를 설치를 해봅시다. - node가 설치가 되어있지 않다면 홈페이지 들어가서 설치하기(version은 크게 상관이 없다) =..

FE/React 2020.11.17

생활코딩을 통한 CSS(with BGM. 부산 개발자들의 모임)_ch.4

안녕하세요! 오랜만에 돌아온 현이 입니다!. 블로그 운영을 한동안 진행하지 못한점 매우 죄송하게 생각하고 있습니다(꾸벅)*꾸벅...ㅠㅜ 한동안 시험기간 및 따로 진행중인 프로젝트로 인해서 이렇게 오랜만에 다시 돌아와 글을 쓰게 되었습니다! 이번에 제가 진행할 부분은... 바로 HTML 구조를 아름답게 꾸며줄 CSS를 공부를 할 예정입니다. 이전에 한달전 쯤인가..? 가짜사나이라는 웹 사이트를 HTML로 만들어서 소개드린적이 있습니다. 뭐.. 나름 만족은하긴 했지만 굉장히 예쁜느낌은 들지 않는다..? 그런 생각이 많이 들었습니다. 바로 그러한 부족한 부분을 아름답게 꾸며줄 마크업 언어가 바로 CSS 라는 것입니다. ==> 그래서 오늘부터는 바로 CSS 수업을 들어가겠습니다. (참고로 이 수업은 HTML과 ..

HTML 태그 정리 메모장

- Heading 태그( h1 ~ h6 ) - 단락 태그( ) - 줄바꿈태그 ( ) - 글자를 굵게 표현 ( ) - 글자를 이탤릭체로 표현 ( ) - 글자에 밑줄 ( ) - 글자의 중간선 긋기 ( ) - 앵커태그 ( ) *target 속성: 1. _self: 현재 화면에 표시한다는 의미, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작 2. _blank는 새로운 창에 표시한다는 의미로 외부 페이지가 나타나게끔 하는 속성 - 아무 의미가 없는 컨테이너 요소: 와 // div는 블록 레벨 태그이며, span은 인라인 레벨 태그 - 리스트 태그 ( 과 이 있고 ul은 순서가 없는 리스트, ol은 순서가 있는 리스트를 의미합니다. 안에 태그를 사용해줘야합니다. // 태그는 태그의 용어와 정의..

FE/HTML 2020.10.15

생활코딩을 통한 HTML(with BGM. 부산 개발자들의 모임)_ch.3

HTML의 3번째 시간 "서버와 클라이언트 ~ 웹사이트 방문자 분석기" 를 진행해보겠습니다. 1. 서버와 클라이언트 - 인터넷의 정보를 우리가 주고 받을때는 2대의 컴퓨터가 필요함! 과연 어떠한 원리로 우리의 정보가 표현이 되는지 아래의 그림을 살펴보자. - 이런식으로 우리가 평소에 사용하는 인터넷이 내용을 주고 받는다는 사실과 앞으로 우리가 이러한 서버를 직접 구현할지 아니면 대행해주는 곳에 맡길지는 각자의 판단에 맡기면 될듯하다.(각각의 장, 단점이 있으며 현재 생활코딩에서 알려주는 방향은 먼저는 웹 호스팅을 통해 이해를 하고 후에 서버를 통한 원리파악을 권하고 있다.) 2. 웹 호스팅(git hub) - host? 인터넷이 연결되어있는 컴퓨터 한대한대를 'host' 라고 부름. 그리고 이러한 'ho..

생활코딩을 통한 HTML(with BGM. 부산 개발자들의 모임)_ch.2/+캡스톤디자인 이야기

오늘은 생활코딩 HTML의 두번째 시간이다. 이제 겨우 두번째 시간이지만 살짝 문제아닌 문제가 생겨버렷다. 웹 개발분야로 가기 위해서 전과를 했고 학부 공부에 치여 정작 웹에 대한 공부를 못하고 있었지만 이번에 스터디 참여를 통하여 여유있는 웹 개발 공부를 하고자 했지만 나의 현재 신분은 대학교 삼학년(사망년이라고 흔히 불러진다..)이고 졸업작품이란것을 해야한다. 진짜 뭐 배운거 없음...큰일 남... 아무튼 이번에 어찌저찌 캡스톤디자인 조별과제에서 나온 주제가 주식예측 서비스 웹 어플리케이션이었다. 나 또한 주식이란 분야에 생각이 있었고 뜻이 맞는 팀원들이 있어서 공통의 주제로 팀이 짜여졌다. 후에 어색한 분위기일줄 알았지만 생각보다? 괜찮은 분위기에서 회의를 하였고 마침 팀원중에 데이터 분석쪽에 관심..

생활코딩을 통한 HTML(with BGM. 부산 개발자들의 모임)_ch.1

2020년에 기존의 경제학과에서 전과를 하고 이제 컴공으로 온지 한학기가 지나 이제는 2학기를 맞이하여 한3주정도가 지나는중이다. 이번 한 학기동안에는 내가 자료구조, 논리회로, C언어, 파이썬 등등의 수업을 들었고 여름 방학에는 동아리를 통해 앱 개발분야(엄청 짐이 많이되서 제대로 못한..팀원들께 죄송한...) 및 전체적인 개발의 흐름과정(네이버 코딩 부스트캠프, edwith강의)등을 알아보는 시간을 가지었다. --> 이것저것 두서없이 함...ㅋㅋㅜㅠ 혼자서 시작한터라 삽질도 많이했고, 아직도 많이 하고 있지만 이제는 무언가를 만들어야겠다는 생각이 들었고 그중에서 web application이란것을 만들어보고자 3달 전쯤에 들어온 open 카톡방인 부산개발자들의 모임, 지금은 투표로 인해서 BGM이라는..

font 속성 (20.07.10)

font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit; (font 스타일의 축약형 속성입니다.) font-style font-style 지정, 기본 값은 normal font-variant font-variant 지정 - 기본 값은 normal - small-caps: 소문자를 작은 대문자로 변형 font-weight font-weight 지정, 기본 값은 normal font-size/line-height font-size/line-height 지정, 기본 값은 normal font-family font-family 지정 *축약형 선언시 유의할 점 - font-size와 font-fam..

FE/CSS 2020.07.10