![[JSP] IntelliJ 에서 JSP 개발환경 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcNQOvx%2FbtsC7qtoxqm%2FUuNX5TxNKYHXQ3Wk18KFyk%2Fimg.png)
개발 환경 windows 11 pro jdk : 17.0.9 Apache Tomcat : 10.1.17 intelliJ : 2023.3.2 IntelliJ에서 JSP 개발환경 초기 설정 인텔리제이를 실행하고 프로젝트를 만든다. 우측 상단에 돋보기 버튼을 누른다. add framework support 를 검색하고 클릭한다. Java EE - web applition을 체크하고 Create web.xml 도 체크하고 ok를 누른다. 이후 우측 상단의 current file 의 드랍다운 박스를 눌러서 Edit configurations...를 누른다. 아래와 같은 화면이 나오면 왼쪽 상단의 + 버튼을 누른다. 이후 Tomcat Server - Local을 누른다. Application server에서 Con..
![[CSS] CSS 필수 속성(배경 속성, 위치 속성, 애니메이션 속성)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcNQsgm%2FbtsCZ9lN5CS%2FUmlLGoBXqKKuKkXzzkMb7K%2Fimg.png)
이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 배경 속성 background-color 속성 요소의 배경에 색상을 넣을 수 있다. 속성 값으로는 색상값을 사용하면 된다. background-image 속성 요소의 배경에 해당 속성을 사용하면 이미지를 넣을 수 있다. 속성 값은 삽입할 이미지의 경로를 url() 함수로 지정하면 된다. 요소의 배경 크기가 반드시 지정되어야 한다. 이미지의 크기가 요소의 배경크기와 맞아야 한다. -요소의 배경이 이미지 크기보다 작으면 잘린다. -요소의 배경이 이미지 크기보다 크면 이미지 패턴이 반복된다. backgrount-repeat 속성 요소의 배경 크기가 삽입하려는 이미지보다 크면 이미지를 자동으로..
![[CSS] CSS 필수 속성(박스 모델)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbOvJsN%2FbtsC1GwT0Bv%2FqkPiYEB5J2flIe82whWqc0%2Fimg.png)
이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 박스 모델을 구성하는 속성 HTML 문서에서 사용된 각각의 요소가 어떤 원리로 웹 브라우저에 배치되어 표시되는지 이해하려면 박스 모델을 알아야 한다. 박스 모델은 모든 HTML 요소가 사각형의 박스로 둘러 쌓여 있다는 개념이다. 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 결국 웹 페이지를 만드는 본질이다. 박스 모델은 아래와 같은 4가지 요소로 구성된다. 박스 모델은 크롬 웹브라우저 개발자도구(F12, ctrl+shift+i)에서 살펴볼 수 있다. margin 영역 margin은 박스 모델에서 가장 외부에 있는 영역으로, 요소의 외부 여백을 담당..
![[CSS] CSS 필수 속성(CSS의 특징, 텍스트 속성)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FExfsx%2FbtsCVIPG3Mx%2FwcNEh00HSj4ijzaIQ2z0u1%2Fimg.png)
이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. CSS의 특징 기본 스타일 시트 hn 태그는 단순히 태그만 사용했는데도 웹 브라우저에는 텍스트가 다양한 크기와 굵기로 표시됐다. HTML 태그는 태그 자체에 꾸밈을 담당하는 역할이나 기능이 없다. 그렇지만 웹 브라우저 자체에 기본 스타일 시트가 내장되어 있기 때문에 위와 같은 모양으로 표현될 수 있는 것이다. 기본 스타일 시트 기본 스타일 시트란 글꼴이나 크기, 색상, 굵기, 문단 설정과 같은 스타일이 미리 정의된 파일 또는 문서 양식을 말한다. 기본 스타일 시트에 정의된 스타일 속성보다 사용자가 정의한 스타일 속성이 우선 적용된다. 적용 우선순위와 개별성 specificity 위와 같..
![[CSS] CSS 선택자](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcmQ4oO%2FbtsC31zZD2K%2FHsAItVySdrkyKzmmry76M1%2Fimg.png)
이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 기본 선택자 사용 전체 선택자 전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로, * 기호를 사용해 표시한다. 전체 선택자 전체 선택자는 모든 요소를 한 번에 선택할 수 있다. 태그 선택자 태그 선택자는 HTML 태그명으로 선택자를 지정하는 방법이다. 태그 선택자는 선택자에 지정된 태그명과 일치하는 모든 요소를 한 번에 선택한다. 안녕 하이 안녕 안녕 아이디 선택자 아이디 선택자는 HTML 태그에서 사용할 수 있는 id 속성 값을 이용해 선택자를 지정하는 방법이다. 이때 속성값 앞에는 # 기호를 붙여 구분한다. 안녕 id 속성값은 고유해야 한다...
![[CSS] CSS 기초 문법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdnuNeV%2FbtsC3YQK4oF%2FjT0d2ukrX5UAkDaNckkK5K%2Fimg.png)
이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. CSS : Cascading Style Sheets 문법 형식 CSS 문법은 크게 선택자와 선언부로 구분한다. 선택자 : CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역 선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역, 중괄호 안에 작성 선언부에 작성하는 스타일은 반드시 속성과 값을 한 쌍으로 작성 값의 뒤에 세미콜론을 넣으면 여러 스타일을 연속해서 작성 가능 안녕 줄 바꿈과 들여 쓰기 CSS 코드를 작성할 때, 줄 바꿈과 들여 쓰기를 꼭 할 필요는 없다. 그러나 줄 바꿈과 들여쓰기를 적절하게 사용하면 코드의 가독성을 크게 향상할 수 있다. 스타일 시트 스..
![[Git] Git 명령어 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdaUbLZ%2FbtsCNZJF0gI%2FkKkyuNbPINfKsHxH6zJQlK%2Fimg.png)
본 게시글은 모두의 git,github(저자 : 강민철)의 내용을 개인적으로 정리하는 글입니다. 기본적인 명령어 기본 경로에 만들기 git init 원하는 경로에 만들기 cd 원하는 경로 (폴더가 이미 생성되어 있어야 함) git init 현재 경로 확인 pwd 작업 디렉터리 상태확인 git status 스테이지에 올리기 git add add 전과 후 변경 사항을 한꺼번에 추가하려면 git add . 커밋하기 git commit -m "커밋 메시지" git commit -message "커밋 메시지" 커밋 목록 출력 git log add와 commit 동시에 하기 git commit -am "커밋 메시지" git commit -a -m "커밋 메시지" git commit -all -message "커밋 ..
![[GitHub] 소스트리로 clone, push, fetch, pull, pull request 하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb9E4q2%2FbtsCOAoPpDi%2FFinGvyWAY6SIjfQbXnGhIk%2Fimg.png)
본 게시글은 모두의 git,github(저자 : 강민철)의 내용을 개인적으로 정리하는 글입니다. 깃허브는 아래의 두 가지 쓰임새가 있다. 개발자의 SNS 개발자 간 협업을 가능케 하는 원격 저장소 호스팅 서비스 Git은 우리의 컴퓨터 속에만 존재하는 저장소이다. 이는 로컬에 있는 저장소, 즉 로컬 저장소라고 부른다. 반면 원격 저장소는 우리들의 컴퓨터 속에만 있는 저장소가 아닌, 인터넷 세상 어딘가에 있는 다른 컴퓨터 속의 저장소를 의미한다. 깃허브의 원격 저장소는 깃허브가 관리하는 컴퓨터 속의 저장소를 의미한다. 원격 저장소를 통해 백업과 협업에 이점이 있다. 원격 저장소와의 네 가지 상호작용 원격 저장소와의 상호 작용은 크게 네 가지이다. clone : 원격 저장소 복제 push : 원격 저장소 밀어..