＊반짝이는＊이끌림

개발에 흥미를 가지게 되며, 백엔드 개발을 먼저 공부해보고 싶다고 생각하였습니다. 백엔드 개발 기술 스택 중 Spring으로 첫 걸음을 내딛고 싶었고, 주변의 추천을 통해 인프런의 김영한 강사님의 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 강의를 듣게 되었습니다! https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8 [무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있..

* Windows 운영체제 기준으로 작성되었습니다. * Androin studio 3.6.3 for Windows 64-bit 환경을 사용합니다. § 프로젝트 만들어보기 1. 프로젝트 생성하기 처음 실행했을 때 이런 화면이 뜹니다. 여기서 + Start a new Android Studio project를 선택하면 오른쪽과 같이 앱 안에 만들어질 첫 화면을 선택할 수 있습니다. default로 Empty Activity가 선택되어 있는데, 이것은 화면 안에 아무것도 없는 가장 단순한 모양입니다. 그대로 선택한 후 Next 버튼을 누르면 이렇게 Name, Project name, Save location, Language를 입력할 수 있는 창이 뜹니다. Name과 Package Name에는 아무거나 입력해..

WEB1 HTML을 끝낸지 얼마 안 된 것 같은데 어느새 WEB2의 CSS를 완강하였네요~!~! css를 공부하면서, 기존에 html로만 짜던 것보다 훨씬 효율적이고, 디자인적으로도 예쁘게 짤 수 있다는 것을 알았습니다. 굉장히 기초만 배웠기에 아직 배워야 할 부분들이 많을 것 같아요. 일단 지난번에 html로 만들어 github에 올렸던 페이지부터 css를 활용해 고쳐보고 싶어요~!~! github repository https://github.com/2kkeullim/2kkeullim 웹 사이트 주소 https://2kkeullim.github.io/2kkeullim/ Introducing about 2kkeullim 2kkeullim.github.io

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § CSS 코드의 재사용 → Click! 하나의 웹 사이트에서 모든 웹페이지들에게 동일한 스타일을 주고 싶을 때 중복적으로 코드를 계속 작성하는건 번거로우므로, 코드를 재사용 해 봅시다. 일단 모든 html 파일 들에서 중복되고 있는 CSS 코드들( 태그 제외)을 복사해서 style.css 파일에 붙여넣어 봅시다. 그 후 기존의 html 파일들에서 태그를 지워주고, 태그를 이용한다면, style.css라는 별도의 파일에 저장된 CSS를 기존의 html들에서 사용할 수 있게 됩니다. * style.css * h1 { text-align: center; font-size: 60px; border-bottom:3p..

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § 반응형 디자인과 미디어 쿼리 소개 → Click! 이번에는 화면의 크기에 따라서 웹페이지들의 각 요소들이 반응해 최적화된 모양으로 바뀌게 하는 것, 반응형 웹, 반응형 디자인(Responsive Web)에 대해서 공부해봅시다! 그럼 CSS를 통해 구현하는 핵심적인 개념인 미디어 쿼리(Media Query)부터 알아봅시다. 일단 새로운 html 파일을 만들어보고, 화면의 크기에 따라서 특정 html의 요소를 보였다, 안 보였다하게 해보겠습니다. 일단 간단하게, 태그를 이용해 responsive 글자를 써주고, 반대로 media query의 코드를 max-width:800px로 바꾼다면, 화면의 최대 크기가 ..

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § 그리드 → Click! 그리드를 공부하기 전에, html을 새로 만들어줍시다. navigation과 article, 두 가지 단어를 나란히 배치해주기 위해 단어들을 각각 태그를 이용해 묶어주어야 합니다. 우리가 지금까지 배운 태그들은 의미가 있는 태그들이므로, 아무거나 사용할 수는 없습니다. 이렇게 아무 의미가 없는 경우지만 태그로 묶어주어야 할 때에는 태그 혹은 태그를 사용합니다. 태그는 block line element로서 한 줄 전체를 차지하며, 태그는 inline element로서 해당 텍스트만큼만 차지합니다. 지금은 태그를 써 봅시다. NAVIGATION ARTICLE 그리드를 공부하기 위해서는,..

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § 박스모델 → Click! web2 css 실습을 위해 web1에서 사용했던 html 대신 새로운 파일을 간단하게 만들었습니다. 박스를 만들기 위해 반면 링크는 자기 자신의 콘텐츠 크기만큼만 공간을 사용합니다. 태그와 같은 코드를 사용해 박스를 만들어주었음에도 불구하고, 자기 자신의 텍스트 크기만큼의 박스를 만든 것을 볼 수 있습니다. 이와 같이 html 태그들은 태그의 성격과 쓰임에 따라 화면 전체를 사용하는 태그들과, 자기 자신만큼의 부피를 가지는 태그들로 나뉩니다. 전자의 경우 block level element, 후자의 경우 inline element라고 부릅니다. 이 때 block level ele..

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § CSS 선택자 → Click! 모든 링크, 즉 태그는 기본적으로 검은색으로, 방문한 적이 있는 링크는 회색으로, 현재 방문하고 있는 링크는 빨간색으로 수정해봅시다. 이 때, 코드를 중복으로 작성하지 않고, 동일한 값을 줄 태그들을 class라고 하는 html의 속성을 준 후, 속성의 값(이름)으로 saw를 줍니다. 이름은 원하는 것으로 바꿔도 상관 없습니다~!~! 그리고 위의 1st Grade? 2nd Grade? class의 값으로 saw를 준 "1st Grade?"와 "2nd Grade?"의 색이 회색으로 바뀐 모습을 볼 수 있습니다. class의 경우 한 번에 여러 속성이 들어올 수 있으며, 띄어쓰기..