삶의 공유

안녕하세요. 예제를 활용하여 CSS, HTML 코드에 대해서 익히기 위한 포스팅으로 미니프로젝트를 준비해보았습니다. CSS HTML 코드를 활용해서 Mondrian 그림을 한번 그려보려고 하는데요  먼저 몬드리안은 네덜란드 화가의 이름 입니다. 대표적으로 아래와 같은 작품이 있습니다. 아래 작품의 이름은 빨강, 파랑 노랑의 구성이라는 작품 입니다. 이 작품과 비슷한 작품을 한번 그려보려고 합니다. Layout_ HTML 위 그림와 같은 비슷한 느낌으로 아래와 같은 Layout 구성으로 한번 그려보려고 합니다. 자 처음에 무엇을 해야할까요? 먼저 각각 칸마다의 구성을 위해 div 를 구성해줘야합니다. 왼쪽 상단부터 카운트를 하면 총 9개 입니다. 그럼 이제 9개의 div를 구성하고 각각의 class에 na..

안녕하세요 24년 목표 달성을 위해 웹개발을 본격적으로 하기로 맘먹은지 어느덧,, 3달이 훌쩍 지났지만.. 이제 느리지만 꾸준히 프로젝트 하나하나 수행하면서 제 역량을 올리려고 합니다. 많이 부족하겠지만,, 조금씩 늘어날 제 역량을 기대하며,, 시작하겠습니다. 프로젝트 완성본을 먼저 보여드리면, 아래의 Github 홈페이지와 비슷하게 만들어보려고 합니다 !! 자 바로 시작하겠습니다. 환경 Setting vscode를 설정하시고 프로젝트를 수행할 폴더를 열기 하셔서 아래와 같이 폴더를 설정합니다. - images폴더 - index.html - main.css - favicon.png (icon image) 그리고 index file에 css 파일과 연결 시킬 link 구문을 title 밑에 추가합니다. 그..

이어서 2번째 Website를 만들면서 HTML을 익혀 보자. 간단한 Website만들어보기 오늘도 아주 간단한 web site를 만들어 볼 것이다. 먼저 결과물을 보면 아래와 같다. 결과물과 코드를 하나씩 대조하면서 어떤 코드들이 Website의 어떤 부분들을 구현하는 것인지 확인해보자. HTML 코드는 다음과 같다. It's My Birthday!! On the 12th May What to bring: Baloons (I Love baloons) Cake (I'm really good at eatting) An apptite (there will be lots of foods) This is where you need to go: Google Map link 자 이제 하나씩 살펴보자 먼저 이미지와 ..

24년 목표로 그동안 미뤄왔던 Web 개발에 대한 공부를 시작해보려고 한다. 회사에서 자동화 Project를 맡기도 했고, 열심히 진행 해보고자 시작한다. 오늘은 간단한 Website Project를 만들면서 HTML 익히는 방법에 대해 알아보고자 한다. 사전 준비 먼저 사용할 Tool은 VS Code를 이용할 것이다. VS Code를 설치하고 2개의 확장팩을 설치가 필요하다 아래 Link를 타고 들어가서 VS Code를 설치한다. https://code.visualstudio.com/ 설치가 되면 아래의 2개의 확장팩을 설치해준다. - Live Preview - Prettier - Code formatter 간단한 Website만들어보기 오늘은 아주 간단한 web site를 만들어 볼 것이다. 바로 아..