본문 바로가기

분류 전체보기

 (122)
3. Java의 동작원리 자바의 동작원리에 대해서 알아보겠습니다. 자바의 동작원리는 위의 이미지 한 장으로 설명할 수 있습니다. 1. java source code를 사람이 작성합니다. 사람이 작성한 코드 파일은 .java 파일입니다. 2. 사람이 작성한 파일을 compile 과정을 통해 자동으로 컴퓨터 언어로 전환하는 과정을 거칩니다. 변환된 파일은 .class 파일입니다. 3. class파일을 컴퓨터에 설치된 자바 버츄얼 머신을 통해 작동시킵니다. 4. 그러면 컴퓨터에 결과가 나타납니다. 단순하지만 꼭 알아두어야 하는 자바의 작동원리를 한 장의 사진으로 간단하게 알아보았습니다!
2. Java, Hello World 출력으로 시작해보기 ⭐️ 자바를 이용해서 프로그램을 만들기 위해서는 기본적인 도구가 필요한데 저는 Eclipse를 이용해서 만들어보겠습니다. Eclipse는 구글 검색을 통해 쉽게 다운로드 가능합니다. 본격적으로 eclipse를 실행하기 전 파일을 저장할 폴더를 미리 만들어줍니다. 필수적인 과정은 아니지만 파일을 편하게 확인하기 위해서 미리 만들어주는 것이 좋습니다. 저는 Desktop에 JAVA1이라는 폴더를 미리 만들어주었습니다. 1. Eclipse 실행 후 Navigator창 세팅 Eclipse를 실행하면 위와 같은 창이 뜹니다. 위의 탭 중에 Window로 들어가서 Navigator를 클릭하고 왼쪽 아래 화면으로 띄워줍니다. 처음에 세팅되어 있는 Package Explorer는 조금 더 자바에 익숙해진 후에는 사용하기 편..
1. M1 맥북 Java JDK 설치 방법 일반적으로 구글에서 다운로드할 수 있는 JDK 사이트인 Oracle에서 지원하는 자바 프로그램은 M1에서 제대로 설치가 되지 않습니다. 현재 M1을 지원하는 JKD를 제공하는 사이트는 openjdk이기 때문에 아래의 사이트에서 다운로드할 수 있습니다. https://www.azul.com/downloads/?os=macos&architecture=arm-64-bit&package=jdk Downloads Download Azul Platform Prime Azul Platform Prime extends Core, adding unique Azul innovations to improve the runtime characteristics of Java workloads. Azul Platform Prim..
7. Class 클래스 태그와 Id 아이디 태그 이번에는 HTML의 태그와 태그에 대해서 알아보겠습니다 - ! 두 개의 태그는 모두 HTML 요소에게 '이름'을 주는 방법이라고 간단하게 설명할 수 있습니다. 1. Class 클래스 - "class 이름"을 지정하고 요소에 클래스 이름을 추가해주면 css에서 그 이름의 스타일을 적용 가능 + Class의 이름이라는 것을 나타내기 위해서는 앞에 . (마침표) 를 꼭! 써주어야 함 ex. 캐발자 딩시 블로그 그럼 이제 실제 VScode로 구현해보겠습니다. VScode 화면에 하얀색 밑줄 친 부분을 보면 마침표를 찍고 클래스 이름을 정해준 후, 스코프를 열고 스타일을 적어주었습니다. 그리고 클래스에 있는 스타일을 적용시키고 싶은 내용 태그의 속성으로 클래스 이름을 넣어줍니다. 위에서는 19번 줄에 있는 캐발자..
6. HTML 이미지 Image 첨부 이번에는 HTML에서 이미지를 첨부해보겠습니다. 태그 _ 이미지를 첨부하는 태그 - 태그의 속성은 src입니다. - 태그는 다른 태그들과 다르게 종료태그 X 바로 VScode를 통해 이미지 첨부를 해보겠습니다 - ! 기본적인 이미지 첨부를 먼저 해보겠습니다. 먼저 첨부할 이미지를 찾아주어야 합니다. 저는 구글링을 통한 구글 이미지를 나타내 보려고 합니다. 원하는 사진을 검색한 후, 사진을 우클릭해서 이미지 주소 복사를 해줍니다. 복사한 주소를 속성 값으로 넣어주면 됩니다. 위 사진의 13번 줄을 보시면 가 적혀있습니다. 파일 저장 후, 웹 사이트를 새로고침 하면 이렇게 이미지가 뜨게 됩니다. 여기서 이미지의 크기를 바꾸기 위해서는 img 태그 안에 속성으로 width, height를 써주면 됩니다. 먼저..
5. HTML 링크 Anchor 첨부 HTML에서 하이퍼링크와 이미지를 첨부하는 방법을 알아보겠습니다 - ! 태그 _ 하이퍼링크 (Anchor)를 첨부하는 태그 - 태그의 속성은 href입니다. ex. 캐발자딩시의 스터디로그 위의 방법으로 웹 사이트에서 링크를 클릭하면 웹 사이트가 있던 탭이 링크의 웹 사이트로 변경됩니다. 이제 VScode를 이용하여 직접 하이퍼링크를 달아보겠습니다 - ! 먼저 태그를 사용해서 사이트에 링크를 첨부해보겠습니다. body 부분 26번 줄을 보시면 태그를 사용하여 저의 블로그로 가는 링크를 첨부했습니다. 왼쪽 화면에 보시면 아래에 하이퍼링크로 잘 나타나 있습니다 - ! 링크를 타고 들어가면 이렇게 제 블로그가 같은 탭에서 나타납니다. + 새로운 탭에서 링크를 여는 방법 링크를 새로운 탭에서 열기 위해서는 tar..
4. HTML 옵셔널 태그 _ head, body, html 태그 HTML 태그에는 옵셔널 태그라는 것이 있습니다. 태그 - 보여지지는 않지만 문서 안에 필요한 데이터를 모아둔다. 태그 - 웹 사이트에 보여주고자 하는 내용들을 모아둔다. 태그 -html 코드라는 의미로 묶어주는 역할을 한다. 위의 사진과 같이 사용해주면 되는 태그입니다 - 사진에서도 확인할 수 있듯이 옵셔널 태그는 보통 정리하는 목적으로 사용하는 경우가 많습니다. + 태그 속 태그 전체 들여쓰기 태그 안에 태그를 할 땐 내용을 모두 들여쓰기를 해주어야 합니다. 들여쓰기를 하지 않는다고 내용이 실행되지 않는 것은 아니지만, 코드를 더 정확하고 깔끔하게 보면서 확인하기 위해서는 이 작업이 필수적입니다. 내용 전체를 한 번에 들여쓰기하는 방법은 들여쓰기 하고 싶은 내용을 전부 드래그해서 Ctrl + } 를 ..
3. CSS로 웹 사이트에 스타일 더해주기 이번에는 만들어진 웹 사이트에 CSS 적용하여 미적인 부분을 업그레이드시켜주겠습니다. 먼저 CSS를 입혀주기 위해서는 html 태그를 사용해주어야 하는데 CSS를 반영하기 위한 태그는 종료태그로 마무리해주면 됩니다. + CSS 기본 문법 - css를 코딩하는 기본 문법 형식의 예시 위 예시처럼 css의 기본 문법은 css를 입히고 싶은 내용의 태그를 먼저 적어주고 { 를 열어준 후 속성 : 속성 값 ; 의 순서로 적어주면 됩니다. css를 입히고 싶은 태그가 같은 것이 여러 개일 때는 선행 태그를 먼저 써주고 그다음에 그 태그를 순서대로 써주면 됩니다. 그럼 직접 웹사이트에 반영해보겠습니다 - ! 오른쪽 화면에 style 아래에 적힌 css 속성들이 왼쪽 화면에 적용된 것을 볼 수 있습니다. + CSS ..

티스토리툴바