＊반짝이는＊이끌림

[서평] 혼자 공부하는 파이썬 (개정판)

2kkeullim — Sun, 26 Jun 2022 20:17:51 +0900

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=294996715

혼자 공부하는 파이썬

『혼자 공부하는 파이썬』이 더욱 흥미있고 알찬 내용으로 개정되었다. 프로그래밍이 정말 처음인 입문자도 따라갈 수 있는 친절한 설명과 단계별 학습은 그대로! 혼자 공부하더라도 체계적으

www.aladin.co.kr

제가 한빛미디어의 혼자 공부하는 파이썬 (개정판) 책의 베타리더로 선정되었습니당~~!!

5월 9일 원고를 받고 베타리딩을 하며, 책을 미리 읽어볼 수 있는 기회를 가졌어요!

그리고 6월 초 베타리딩을 완료한 기념으로 실물 책을 받아볼 수 있었습니다.

베타리딩에서도 한 번 읽어보았지만, 실물 책으로도 읽고, 리뷰를 남기고 싶어서 이렇게 글을 작성하게 되었어요!

먼저 책에 대한 간단한 소개를 하자면,

2022년 6월 1일에 출간된, 아직 한 달이 채 되지 않은 책입니다.

지은이는 윤인성님이시고, 출판사는 한빛미디어입니다!

총 552쪽으로 구성되고, 뒷 쪽에 혼공 용어 노트라고 24쪽짜리 부록이 있어요!

(개인적으로 이 부록이 키워드별로 간단한 설명이 나와있어 나중에 기술 면접에 굉장히 도움될 것 같다고 생각해요!

중요한 키워드만 뽑아놔서 나중에 관련 개념을 찾아가며 dfs 식으로 공부하면 좋을 것 같네요ㅋㅋㅋ)

또한 책을 크게 두 부분으로 나눠서

1장부터 6장까지는 파이썬의 기본 문법에 대한 설명과 문법을 활용할 수 있는 기본편이고,

7장과 8장은 파이썬을 활용해 웹 서비스를 구현하는 방법 등을 간단하게 살펴보는 고급편입니다.

저 같은 경우는 파이썬을 제대로 교육과정을 밟으면서 배워본 적은 없지만,

혼자서 입문책은 여러 번 정독했었습니다.

하지만 그렇다고 해서 파이썬의 개념과 문법을 완벽히 안다기보다

그냥 어느 정도 파이썬 코드를 읽으면 이게 이런 코드구나 이해는 할 수 있는

완전 초보는 아니지만 그렇다고 결코 잘하지 않는 수준이었습니다.

그래서 이번 기회에 이 책을 보면서 제대로 공부해보고 싶었습니다.

책 이름부터가 혼자 공부하는 파이썬이다보니

평상시에 혼자서 공부를 잘 못하는 사람들도 쉽게 공부할 수 있을 것 같은 느낌이라서

좀 더 끌렸던 것 같아요~~!!!ㅎㅎ

또한 저 같은 경우는 두꺼운 책을 선호하다보니

(개인적으로 두꺼운 책이 개념 설명이 이해가 잘 되게 기술되어있다고 생각하거든요..ㅎㅎ)

제가 그동안 봐왔던 입문서들에 비해 두꺼워서 기대가 되었어요!

책을 읽으면서 느꼈던 장점들을 몇 가지 소개해보자면,

1. 파이썬을 처음 공부하는 사람이 읽기에 좋을 것 같다. (처음 공부하는 사람이 보기에도 어렵지 않게 기술되어 있다!)

- 저처럼 파이썬이 뭔지 얼핏 감을 잡은 사람들의 경우엔 책이 술술 읽혀서 재밌고, 빠르게 완독이 가능합니다.

2. 책 중간중간에 있는 여기서 잠깐이나 note들을 읽으면 생각의 깊이가 넓어진다.

- 생각해볼만한 부분들이나 간단한 설명, 추가적인 개념 설명 등을 통해 좀 더 얻어갈 수 있는 게 많습니다.

(좌) 여기서 잠깐, (우) note

3. 코드 실행 중 발생할 수 있는 오류에 대해 설명해주어, 올바른 개념 확립에 도움이 된다.

4. 처음 공부할 때 초보자들이 혼동할 수 있을만한 부분에 대해서도 명확히 설명이 되어 있다.

- 다른 개념서들의 경우 이 정도는 알겠지 싶어 생략한 부분도 자세히 기술해놓아 진짜 초보자들이 보기에 어려움이 없을 것 같다는 생각이 들었습니다.

파이썬을 처음 접하시는 분,

파이썬에 대해 자세히 알고싶은 분,

파이썬을 주력 언어로 사용해보고 싶은 모든 분들께

이 책을 추천 드립니다!!

이 글은 출판사로부터 도서를 협찬받아 주관적인 견해에 의해 작성했습니다.
- 한빛미디어, 혼자 공부하는 파이썬 (개정판)

[서평] Do it! 알고리즘 코딩테스트 - 자바 편

2kkeullim — Tue, 12 Apr 2022 03:35:55 +0900

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=291743655

Do it! 알고리즘 코딩 테스트 : 자바 편

“코딩 테스트는 어떻게 준비해야 할까?” 곧 코딩 테스트를 앞두고 있거나 올해 안에 IT 기업으로 취업 또는 이직을 준비하고 있다면 누구나 이런 고민을 할 것이다. 《Do it! 알고리즘 코딩 테스

www.aladin.co.kr

제가 이지스 퍼블리싱의 Do it! 알고리즘 코딩테스트 - 자바 편 서평단에 당첨이 되었습니다!!

서평단 지원은 처음이라 걱정했는데 이렇게 좋은 기회 주셔서 감사합니다ㅎㅎ!!!

현재 컴퓨터공학과 4학년에 재학중이고, 슬슬 개발자로 취직을 준비하는 학생으로서,

코딩테스트의 중요성은 말 할 필요가 없죠..!!

거의 대부분의 대기업, 혹은 스타트업에서 코딩테스트를 실시하고 있어,

취업을 위한 가장 첫번째 관문이기 때문이죵..

저는 부끄럽게도 아직까지 코딩테스트에 대해 준비하지 못했고,

이제야 조금씩 해볼까 생각을 하던 참에 Do it! 에서 나온 알고리즘 코딩테스트 책을 발견했어요!

개인적으로 새로운 분야를 공부할 때 이지스 퍼블리싱의 Do it! 시리즈를 선호해

이번에 Do it! 에서 코딩테스트 책이 출간된다는 소식을 봤을 땐

코딩테스트는 무조건 이 책으로 공부해야겠다! 이렇게 생각했답니다..ㅎㅎ

이 책은 2022년 4월 5일에 출간된 아주 따끈따끈한 신간 도서입니다!

출간된 지 일주일밖에 되지 않았어요!!

지은이는 김종관 님이시고, 출판사는 이지스 퍼블리싱입니다.

총 564쪽으로 구성되어 있고, 크게 3개의 파트로 나눠집니다.

1. 코딩 테스트 준비하기

2. Do it! 코딩 테스트 - 기초 편

3. Do it! 코딩 테스트 - 실전 편

각 파트 별 내용 구성은 다음과 같습니다.

코딩 테스트 준비하기

시간 복잡도를 고려한 알고리즘 선택 요령, 디버깅의 중요성 및 활용 사례

Do it! 코딩 테스트 - 기초 편

자료구조, 정렬, 탐색, 그리디, 정수론

Do it! 코딩 테스트 - 실전 편

그래프, 트리, 조합, 동적 계획법, 기하

이 책에 실린 모든 문제의 정답 소스 코드는

이지스 퍼블리싱 홈페이지와 김종관 님의 깃허브에서 내려받으실 수 있습니다.

정답이 제공되기 때문에, 자신이 작성한 소스 코드와 비교해보며

정답에서는 어떤 식으로 코드의 흐름이 이어지는지,

내가 작성한 코드와 정답 코드는 어떤 차이가 있는지,

내가 작성한 코드가 어디서부터 잘못 되어 오류가 나는지

등 확인을 해 볼 수 있어 굉장히 많은 도움이 되었습니다!

아직까지는 메인 언어로 java를 사용하지 않았고, 이제 막 java 언어를 공부하고 활용하는 단계이기에

서평단을 신청할 때 과연 내가 이 책을 이해할 수 있을까, 따라갈 수 있을까 고민도 많이 되었습니다.

하지만 책을 읽으면서,

친절하고 꼼꼼한 설명과 슈도코드로 문제를 쉽게 이해할 수 있었고,

슈도코드를 먼저 미리 작성해본 후, java 코드를 작성해보며,

아직은 미숙했던 java 언어에 대한 이해도 많이 높아졌습니다.

기존에는 구상을 하지 않고, 마구잡이로 문제를 풀어, 문제를 잘못 파악했던 경험도 종종 있었고,

문제를 읽고, 바로 코드를 짜려다보니 실수도 생기곤 했습니다...

하지만, 단계 별로 기술된 책의 설명을 보며, 순서대로 따라하다 보니,

정확하게 문제를 파악하고, 분석하게 되어, 문제를 잘못 파악해 틀리는 경우가 없어졌습니다!!

또한, 슈도코드를 이용해 구상한 내용을 어떻게 구현하면 좋을 지 미리 생각해보는 시간을 가짐으로써,

평소보다 더 빠르게 코드를 작성할 수 있었고,

무엇보다 예외 처리 부분에서 미처 생각하지 못해 빠뜨렸던 부분들이 이전에 비해 훨씬 많이 줄었습니다!!

덕분에 기존에 비해 높아진 정답률은 덤~~~!!

참고로, 올해 2022년 하반기에는 C언어 편과 파이썬 편 알고리즘 코딩테스트 책도 출간된다고 합니다!!!

혹시나! java를 main 언어로 사용하지 않고, C언어나 파이썬을 주로 사용하시는 분들은

하반기까지 조금만! 더 기다려주시면 될 것 같아요!!

java로 코딩 테스트를 준비하실 분들께는 이 책 정말 강추드립니다~!~!

이 글은 출판사로부터 도서를 협찬받아 주관적인 견해에 의해 작성했습니다.
- 이지스 퍼블리싱, Do it! 알고리즘 코딩테스트 - 자바 편

[Spring] inflearn 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 강의 후기

2kkeullim — Wed, 6 Apr 2022 18:18:02 +0900

개발에 흥미를 가지게 되며, 백엔드 개발을 먼저 공부해보고 싶다고 생각하였습니다.

백엔드 개발 기술 스택 중 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 접근 기술 - 인프런 | 강의

스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., - 강의 소개 | 인프런...

www.inflearn.com

저처럼 처음 Spring에 대해 잘 알지 못하시거나, 약간은 알지만 감은 잡지 못하신 분들에게 추천드립니다!

강사님과 함께 강의 시간에 소스 코드를 따라 치며 스프링으로 웹 애플리케이션을 만들어보게 되고,

이 과정에서 자세히는(?) 이해하지 못하더라도 전반적으로 스프링이 이렇게 돌아가는구나 하는

흐름을 이해할 수 있게 되었습니다.

강의를 통해 실제 동작하는 간단한 웹 애플리케이션을 다음 순서로 빠르게 만들어볼 수 있습니다.

스프링 프로젝트 생성
스프링 부트로 웹 서버 실행
회원 도메인 개발
웹 MVC 개발
DB 연동 - JDBC, JPA, 스프링 데이터 JPA
테스트 케이스 작성

- 출처 : 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 강의 소개

총 28개 수업, 5시간 21분의 시간으로 Spring의 동작 방식에 대해 이해하고,

Spring의 기초를 닦을 수 있다는 점에서 굉장히 만족스러웠고, 도움이 많이 되었습니다.

이제부터는 한빛미디어의 처음 배우는 스프링부트2 라는 책으로 공부를 해보려고 합니다.

읽어주셔서 감사합니다!

[안드로이드] Android(02) 프로젝트 만들어보기

2kkeullim — Fri, 24 Apr 2020 01:12:41 +0900

* 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에는 아무거나 입력해도 되지만, Name은 반드시 영문 대문자로 시작해야 하고, Package는 영문 소문자로 시작해야 합니다. Package 이름은 앱을 구분하는 고유한 값이기 때문에 다른 패키지 이름과 겹치지 않게 지어주는 게 중요합니다. Save location은 Project가 저장될 위치가 자동으로 표시되며, 언어로는 Java를 사용할 예정이니 바꿔줍시다. 다 바꾸었으면, Finish를 클릭해주세요.

좌 : activity_main.xml 우 : MainActivity.java

왼쪽 화면은 activity_main.xml 파일이고, 오른쪽 화면은 MainActivity.java파일입니다. activity_main.xml 파일에서 왼쪽 하얀 화면은 실제로 스마트폰 화면에 나타날 디자인(Design) 화면이고, 오른쪽의 남색 화면은 화면의 구성 요소만을 보여주는 청사진(Blueprint) 화면입니다.

제가 클릭한 파란색 네모 아이콘을 누르면 activity_main.xml 파일에서 Design, Design+Blueprint, Blueprint 중 어떤 화면 구성으로 보이게 할 지 선택할 수 있습니다.

2. 가상 단말 생성하기

앱을 실행하기 위해 안드로이드 기기가 필요합니다. 만약 안드로이드 기기가 없다면, 에뮬레이터를 이용해 가상 단말(Virtual Device) 환경에서 앱을 실행해볼 수 있습니다. 가상 단말을 만들기 위해서 우측 상단의 돋보기 버튼의 두 칸 왼쪽에 있는 AVD Manager(Android Virtual Device Manager) 버튼을 클릭해주세요.

+Create Virtual Device...버튼을 클릭하면 하드웨어를 고를 수 있는 화면이 나옵니다. 일단 기본으로 설정된 값들을 그대로 두고 Next 버튼을 클릭합시다. 그 다음에 뜨는 System Image 화면에서는 가상 단말을 실행할 때 필요한 이미지를 선택할 수 있습니다. 가장 위에 있는 R을 다운로드 링크를 눌러 다운받아준 후 Finish를 눌러 화면을 닫아주고, R을 선택해주고, Next를 누릅니다.

지금 보이는 이 화면은 지금까지 선택한 정보가 맞는지 확인하는 화면이며, 가상 단말의 정보를 확인하거나 수정할 수 있습니다. 이제 Finish를 눌러주면 가상 단말 생성이 완료됩니다. 이렇게 방금 생성한 가상 단말을 볼 수 있습니다. 방금 만들어준 가상 단말을 선택한 다음 ▶버튼(Launch this AVD in the emulator)을 누르세요.

에뮬레이터를 이용해 앱을 실행해보려면 오른쪽 상단의 아이콘 ▶을 누르거나 shift+F10을 누르면 됩니다.

잠시 기다리면 이렇게 안드로이드 스튜디오에서 보였던 화면이 그대로 단말에 보입니다. 이제 본격적으로 이것저것 만들어봅시다.

3. MainActivity.java

현재 MainActivity.java에는 이런 코드가 입력되어 있습니다.

package org.techtown.hello;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

이 코드를 보면, main()함수가 없습니다. Android에서는 main()함수가 아닌 onCreate()함수가 시작점의 역할을 합니다. onCreate()함수의 코드를 살펴보면 첫번째 줄에서 super라는 키워드를 사용해 onCreate()함수를 호출합니다. 이 코드는 부모 클래스에 있는 onCreate()함수를 호출하는 것이며, 화면의 메시지 출력과는 관계가 없습니다. 그렇다면 메시지는 두번째 줄의 setCounterView()라는 함수와 파라미터로 전달된 R.layout.activity_main에 의해 나타난 것입니다. setCounterView()라는 함수는 화면에 무엇을 보여줄 것인지 설정해주는 역할을 하고, R.layout.activity_main은 화면의 구성 요소에 대한 정보입니다.

4. activity_main.xml

activity_main.xml 파일은 res 폴더 아래의 layout 폴더 안에 들어있습니다. layout 밑의 activity_main.xml은 파일은 아까 파라미터에서 보았던 R.layout.activity_main와 비슷한 모양을 가집니다. 즉, MainActivity.java와 activity_main.xml이 연결되어 화면을 보여주는 것을 알 수 있습니다. activity_main.xml 파일을 더블 클릭해보면 아까 보았던 design, blueprint 화면이 나타납니다. activity_main.xml 파일에는 앱을 실행했을 때 나타나는 첫 화면의 모든 정보(구성 요소, 모양)을 담고 있음을 알 수 있으며, 앱의 첫 화면 자체를 의미합니다. 현재 앱을 실행했을 때 나오는 첫 화면의 텍스트를 수정하고 싶다면, activity_main.xml에서 텍스트를 더블클릭한 후, 우측에서 Common Attributes에서 text를 수정하면 됩니다. ▶를 눌러 에뮬레이터를 이용해 실행해보세요. 이미 실행한 앱이 있을 경우, ■ 아이콘을 눌러 중지한 다음 실행하시면 됩니다.

5. 버튼 생성하기

이번엔 화면에 버튼을 하나 추가하고, 버튼을 눌렀을 때, 메시지가 나타나도록 해보겠습니다. 버튼을 추가하기 전 이미 화면의 중앙에 있던 텍스트는 지워주세요(Delete 키 이용)

왼쪽 부분의 Palette에서 버튼이나, 텍스트 등의 요소를 드래그해 화면에 추가할 수 있습니다. 드래그하기 전, 자석 모양 아이콘(Turn On Autoconnect)를 클릭해 금지표를 없애주어야 요소를 쉽게 배치할 수 있습니다.

좌 : 자석 해제 전, 우 : 자석 해제

팔레트에서 Common 항목을 누른 후 Button을 선택한 상태로 화면의 가운데에 끌어다 놓으면, 가로와 세로 방향으로 회색 안내 점선이 표시됩니다. 이 안내선을 활용하여 중앙을 맞춰주시면 됩니다. 그런 다음 오른 쪽의 Common Attributes에서 버튼에 표시된 텍스트를 바꾸어줍니다. 그 후 다시 ▶을 눌러 에뮬레이터를 실행해주면, 가상 단말의 화면에 버튼이 나타난 것을 볼 수 있습니다.

그럼 이제 버튼을 눌렀을 때 메시지가 나타나도록 해봅시다. 여기에서 알아야 할 개념은 "이벤트를 처리한다"는 개념입니다. 버튼을 누르는 행위는 안드로이드에서 클릭 이벤트로 인식하며, 자바 코드로 이벤트를 처리해야합니다. 그런데 우리가 만든 버튼은 activity_main.xml 파일 안에 들어있으며, 자바 소스는(MainActivity.java)에 있으므로, 버튼을 MainActivity.java에 연결해주어야 합니다.

1. XML 레이아웃 파일의 버튼에 onClick 속성 값 넣기

- activity_main.xml파일에 들어 있는 버튼에 onClick 속성 값으로 클릭 이벤트를 처리할 함수 이름 입력

- 함수 이름은 소스 코드(MainActivity.java)에 들어 있는 함수 이름 그대로 사용

2. 소스 파일에 이벤트 처리 함수 추가하기

- MainActivity.java 파일을 열고 XML에서 지정한 함수 추가

- 함수의 이름은 위에서 넣은 onClick 속성 값과 같아야 함

출처 : Do it! 안드로이드 앱 프로그래밍 p49

저렇게만 보면 잘 이해가 안 되는 것 같아 사진과 함께 설명해볼게요. 아까 만든 확인 1 버튼을 클릭한 후 오른 쪽의 속상 창 중 Common Attributes에서 onClick이란 속성을 찾은 후 속성 값으로 'onButton1Clicked'를 입력하세요. 이렇게 값을 지정하면, 버튼이 클릭되었을 때 onButton1Clicked 함수(메서드)를 찾아 실행됩니다. 원래는 아래쪽에 Text와 Design 탭이 있어야하는데, 저 같은 경우에는 없어서 구글링을 통해 찾았습니다.

없으신 분들 → 2020/04/23 - [Study/Information] - [Android] 안드로이드 스튜디오 design, text tab이 없을 때 해결법

[Android] 안드로이드 스튜디오 design, text tab이 없을 때 해결법

* Windows 운영체제 기준으로 작성되었습니다. * Androin studio 3.6.3 for Windows 64-bit 환경을 사용합니다. § 안드로이드 스튜디오 design, text tab이 없을 때 안드로이드 스튜디오를 깐 후 막 첫번째..

2kkeullim.tistory.com

왼쪽 텍스트 모드를 보면 android:onClick이란 속성과 함께 속성값으로 아까 입력했던 onButton1Clicked라는 글자가 들어왔음을 볼 수 있습니다. 이제 자바의 소스 코드에 onButtonClicked 함수를 추가해 보겠습니다. 안드로이드 스튜디오에서는 코드가 입력되었을 때 필요한 import 구문을 자동으로 넣을 수 있는 기능을 제공합니다. 일단 이 기능을 먼저 설정해줍시다.

안드로이드 스튜디오 메뉴에서 File → Settings 클릭한 후, 설정 화면이 뜨면 Editor → General → Auto Import를 찾아 클릭해줍니다. 그 후 오른쪽 설정화면에서 언체크되어 있는 Add unambiguous imports on the fly와 Optimize imports on the fly(for current project) 항목을 체크해 준 후 OK 버튼을 클릭해주면 됩니다.

그럼 이제 아래의 코드를 추가해봅시다.

    public void onButton1Clicked(View v) {
        Toast.makeText(this, "확인1 버튼이 눌렸어요.", Toast.LENGTH_LONG).show();
    }

* 전체 코드*

package org.techtown.hello;

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void onButton1Clicked(View v) {
        Toast.makeText(this, "확인1 버튼이 눌렸어요.", Toast.LENGTH_LONG).show();
    }
}

안드로이드에서 Toast는 작고, 간단한 메시지를 잠깐 보여주는 역할을 합니다. makeText()와 show() 메서드를 이용하면 화면에 잠깐 보였다 없어지는 메시지를 표시할 수 있습니다. 그럼 이제 앱을 실행해봅시다. 아까와 마찬가지로 ▶를 눌러 실행하시면 됩니다.

6. 여러 개의 버튼을 추가하기

이번엔 여러 개의 버튼을 추가해봅시다. 확인1 버튼 아래에 새로운 버튼을 만들어주었습니다. 보시다시피 왼쪽, 오른쪽 테두리의 동그라미들은 파란색으로 채워져 있는데, 위, 아래쪽 테두리의 동그라미는 비어 있습니다.

테두리 위쪽에 있는 빈 동그라미를 마우스 왼쪽 버튼으로 누르고, 확인1 버튼의 아래쪽 테두리로 끌어다 놓으면, 새 버튼과 확인 1 버튼 사이에 연결선이 표시되며, 자동으로 새 버튼이 확인 1 버튼에 달라붙습니다. 새 버튼의 아래쪽 빈 동그라미는 화면의 아래쪽 경계선에 연결하면, 새 버튼의 위치가 확인1 버튼과 화면 아래쪽 경계선 사이에 알맞게 위치하게 됩니다.

새 버튼을 더블클릭한 후 오른쪽의 속성 창에서 text 속성은 네이버 접속하기로, onClick 속성은 onButton2Clicked를 입력해줍시다. 그리고 방금 했던 방식과 마찬가지로 하나의 버튼을 더 추가해, text 속성은 전화 걸기로, onClick 속성은 onButton3Clicked를 입력해줍시다. 완성된 결과는 다음과 같습니다.

이제 자바 코드를 수정하여 네이버 접속하기 버튼을 누르면 네이버에 접속되고, 전화 걸기 버튼을 누르면 특정 번호로 전화를 걸도록 만들어보겠습니다. MainActivity.java로 돌아와 아래의 코드를 아까 만들었던 소스코드인 onButton1Clicked 메서드 아래에 입력하세요.

public void onButton2Clicked(View v) {
        Intent myIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("http://m.naver.com"));
        startActivity(myIntent);
    }

public void onButton3Clicked(View v) {
    Intent myIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("tel:010-1000-1000"));
    startActivity(myIntent);
}

* 전체 코드 *

package org.techtown.hello;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void onButton1Clicked(View v) {
        Toast.makeText(this, "확인1 버튼이 눌렸어요.", Toast.LENGTH_LONG).show();
    }

    public void onButton2Clicked(View v) {
        Intent myIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("http://m.naver.com"));
        startActivity(myIntent);
    }

    public void onButton3Clicked(View v) {
        Intent myIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("tel:010-1000-1000"));
        startActivity(myIntent);
    }
}

아까와 마찬가지로 ▶를 눌러 실행해봅시다.

좌 : 네이버 접속하기 버튼 클릭, 우 : 전화 걸기 클릭

Intent를 사용하면 애플리케이션 구성 요소 간에 데이터를 전달하거나 실행하려는 기능이 무엇인지 안드로이드 플랫폼에 알려줄 수 있습니다. 이렇게 정말 간단하지만 첫 프로젝트를 만들어보았습니다~!~!

[Android] 안드로이드 스튜디오 design, text tab이 없을 때 해결법

2kkeullim — Thu, 23 Apr 2020 23:10:48 +0900

* Windows 운영체제 기준으로 작성되었습니다.

* Androin studio 3.6.3 for Windows 64-bit 환경을 사용합니다.

§ 안드로이드 스튜디오 design, text tab이 없을 때

안드로이드 스튜디오를 깐 후 막 첫번째 프로젝트를 만들어보고자 하는데, activity_main.xml에 남들은 다 보이는 design, text tab이 안 보였습니다. 여기서 design 탭은 우리가 실제로 화면 구성 요소를 마우스를 이용해 넣을 수 있는 화면이고, text tab은 직접 XML 파일을 수정할 수 있는 텍스트 화면입니다.

버전에 따라 크게 두 가지 방법이 있습니다.

1. 3.6 ver 이하 android studio를 사용할 때

app > res > values > styles.xml 클릭

드래그 표시된 줄의 parent="Theme~" 이 부분에서 Theme 앞에 Base. 추가

저 같은 경우는 3.6.3 version을 사용하기 때문에 이 방법으로 해결할 수 없었습니다.

2. 3.6 ver 이상 android studio를 사용할 때

Attributes 위의 세 버튼 중 가운데 버튼 클릭

짜잔~!~! 이렇게 activity_main.xml의 코드를 볼 수 있습니다. 왼쪽이 원래라면 text 탭을 눌렀을 때 나오는 화면입니다. 개인적으로 훨씬 쉬운 방법으로 볼 수 있는 것 같아요!!

[생활코딩] WEB2 CSS 완강

2kkeullim — Thu, 23 Apr 2020 01:49:15 +0900

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

[생활코딩] WEB2(CSS_07) CSS 코드의 재사용

2kkeullim — Thu, 23 Apr 2020 01:39:56 +0900

* Windows 운영체제 기준으로 작성되었습니다.

* vs code editor를 사용합니다.

§ CSS 코드의 재사용 → Click!

하나의 웹 사이트에서 모든 웹페이지들에게 동일한 스타일을 주고 싶을 때 중복적으로 코드를 계속 작성하는건 번거로우므로, 코드를 재사용 해 봅시다. 일단 모든 html 파일 들에서 중복되고 있는 CSS 코드들(<style> 태그 제외)을 복사해서 style.css 파일에 붙여넣어 봅시다. 그 후 기존의 html 파일들에서 <style> 태그를 지워주고, <link> 태그를 이용한다면, style.css라는 별도의 파일에 저장된 CSS를 기존의 html들에서 사용할 수 있게 됩니다.

* style.css *

h1 { 
    text-align: center;
    font-size: 60px;
    border-bottom:3px black solid;
    padding:20px;
    margin:0px;
}
.list {
    text-decoration: none;
    font-size: 30px;
}
#grid {
    display: grid;
    grid-template-columns: 220px 1fr;
}
#article {
    padding:20px;
}
#grid ol {
    border-right: 3px black solid;
    width:150px;
    margin:0;
    padding-left:50px;
    padding-top: 20px;
}
@media(max-width:800px) {
    h1 {
        font-size: 40px;
        border-bottom:none;
    }
    #grid {
        display: block;
    }
    #grid ol {
        border-right:none;
    }
    .list {
    font-size: 20px;
    }
}

* index.html *

<!DOCTYPE html>
<html>
    <head>
        <title>web2 실습용 파일</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>WEB2</h1>
        <div id = "grid">
            <ol>
                <li><a href="1.html" class ="list">HTML</a></li>
                <li><a href="1.html" class ="list">CSS</a></li>
                <li><a href="1.html" class ="list">JavaScript</a></li>
            </ol>
            <div id="article">
                <h2>CSS</h2>
                <p>
                    Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>)
                    is a style sheet language used for describing
                    the presentation of a document written in a markup
                    language.[1] Although most often used to set the
                    visual style of web pages and user interfaces
                    written in HTML and XHTML, the language can be
                    applied to any XML document, including plain XML,
                    SVG and XUL, and is applicable to rendering in
                    speech, or on other media. Along with HTML and
                    JavaScript, CSS is a cornerstone technology used
                    by most websites to create visually engaging
                    webpages, user interfaces for web applications,
                    and user interfaces for many mobile applications.
                </p>
            </div>
        </div>
    </body>
</html>

[생활코딩] WEB2(CSS_06) 반응형 디자인과 미디어 쿼리 소개

2kkeullim — Thu, 23 Apr 2020 01:12:45 +0900

* Windows 운영체제 기준으로 작성되었습니다.

* vs code editor를 사용합니다.

§ 반응형 디자인과 미디어 쿼리 소개 → Click!

이번에는 화면의 크기에 따라서 웹페이지들의 각 요소들이 반응해 최적화된 모양으로 바뀌게 하는 것, 반응형 웹, 반응형 디자인(Responsive Web)에 대해서 공부해봅시다! 그럼 CSS를 통해 구현하는 핵심적인 개념인 미디어 쿼리(Media Query)부터 알아봅시다. 일단 새로운 html 파일을 만들어보고, 화면의 크기에 따라서 특정 html의 요소를 보였다, 안 보였다하게 해보겠습니다.

일단 간단하게, <div> 태그를 이용해 responsive 글자를 써주고, <style> 태그에서 모든 div 태그는 10px, 초록색 실선의 박스에 감싸지고, 60px의 폰트 사이즈를 가지게 해줍시다. 그 후 화면의 크기에 따라 이 responsive 글자가 나타나게, 혹은 나타나지 않게 해주겠습니다. 그러려면 먼저 현재 화면의 크기를 알아야 합니다. 구글 개발자 도구에서 검사를 눌러보세요.

윗 부분에 현재 페이지의 크기가 보이는 것을 알 수 있습니다. 화면의 크기를 조절해주면, 저 값도 같이 변해, 새롭게 변한 화면의 크기를 알려줍니다. 그렇다면 screen의 크기가 800px보다 크다면 <div>태그의 display를 none으로 바꿔주겠습니다. 이 말은 화면의 크기가 최소 800px이다는 말과 같으므로, media query를 이용해 화면의 크기가 최소 800px이면 display를 none으로 해주면 됩니다.

<style>
	@media(min-width:800px) {
		div {
        	display:none;
        	}
	}
</style>

좌 : 799px, 우 : 800px

반대로 media query의 코드를 max-width:800px로 바꾼다면, 화면의 최대 크기가 800px이라는 뜻이므로, 화면의 크기가 800px보다 작거나 같으면 <div> 태그의 내용이 보이지 않을 것입니다.

<style>
	@media(max-width:800px) {
		div {
        	display:none;
        	}
	}
</style>

그럼 이번에는 실제로 아까 만들어두었던 web2 예제 페이지에 반응형 디자인을 적용시켜 봅시다~! 이번엔 화면의 크기가 800px보다 작거나 같으면 목차 부분과 내용 부분 사이의 구분선을 없애고, 본문을 아래쪽으로 내리며, 제목의 크기도 줄여봅시다. 마찬가지로 media query를 활용해주겠습니다.

<style>
	@media(max-width:800px) {
		h1 {
			font-size: 40px;
			border-bottom:none;
		}
		#grid {
			display: block;
		}
		#grid ol {
			border-right:none;
		}
		.list {
			font-size: 20px;
		}
	}
</style>

이렇게 추가해주시면 됩니다.

좌 : 800px, 우 : 801px

* 전체 코드 *

<!DOCTYPE html>
<html>
    <head>
        <title>web2 실습용 파일</title>
        <meta charset="utf-8">
    </head>

    <body>
        <style>
            h1 { 
                text-align: center;
                font-size: 60px;
                border-bottom:3px black solid;
                padding:20px;
                margin:0px;
            }
            .list {
                text-decoration: none;
                font-size: 30px;
            }
            #grid {
                display: grid;
                grid-template-columns: 220px 1fr;
            }
            #article {
                padding:20px;
            }
            #grid ol {
                border-right: 3px black solid;
                width:150px;
                margin:0;
                padding-left:50px;
                padding-top: 20px;
            }
            @media(max-width:800px) {
                h1 {
                    font-size: 40px;
                    border-bottom:none;
                }
                #grid {
                    display: block;
                }
                #grid ol {
                    border-right:none;
                }
                .list {
                font-size: 20px;
                }
            }
        </style>
        <h1>WEB2</h1>
        <div id = "grid">
            <ol>
                <li><a href="1.html" class ="list">HTML</a></li>
                <li><a href="1.html" class ="list">CSS</a></li>
                <li><a href="1.html" class ="list">JavaScript</a></li>
            </ol>
            <div id="article">
                <h2>CSS</h2>
                <p>
                    Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>)
                    is a style sheet language used for describing
                    the presentation of a document written in a markup
                    language.[1] Although most often used to set the
                    visual style of web pages and user interfaces
                    written in HTML and XHTML, the language can be
                    applied to any XML document, including plain XML,
                    SVG and XUL, and is applicable to rendering in
                    speech, or on other media. Along with HTML and
                    JavaScript, CSS is a cornerstone technology used
                    by most websites to create visually engaging
                    webpages, user interfaces for web applications,
                    and user interfaces for many mobile applications.
                </p>
            </div>
        </div>
    </body>
</html>

[생활코딩] WEB2(CSS_05) 그리드

2kkeullim — Wed, 22 Apr 2020 21:49:00 +0900

* Windows 운영체제 기준으로 작성되었습니다.

* vs code editor를 사용합니다.

§ 그리드 → Click!

그리드를 공부하기 전에, html을 새로 만들어줍시다. navigation과 article, 두 가지 단어를 나란히 배치해주기 위해 단어들을 각각 태그를 이용해 묶어주어야 합니다. 우리가 지금까지 배운 태그들은 의미가 있는 태그들이므로, 아무거나 사용할 수는 없습니다. 이렇게 아무 의미가 없는 경우지만 태그로 묶어주어야 할 때에는 <div> 태그 혹은 <span> 태그를 사용합니다. <div> 태그는 block line element로서 한 줄 전체를 차지하며, <span> 태그는 inline element로서 해당 텍스트만큼만 차지합니다. 지금은 <div> 태그를 써 봅시다.

<!DOCTYPE html>
<html>
    <head>
        <title>grid</title>
        <meta charset="utf-8">
    </head>
    
    <style>
    	border: 5px solid gray;
    </style>
    
    <body>
        <div>NAVIGATION</div>
        <div>ARTICLE</div>
    </body>
</html>

그리드를 공부하기 위해서는, 각각의 태그의 부피감을 확실하게 알 필요가 있으므로, <style> 태그를 통해 속성을 변경해줄게요. div라는 selector에 border 속성을 주겠습니다.

navigation과 article을 나란히 놓기 위해서 그리드를 사용해보겠습니다. 그리드를 사용하기 위해서는 두 개의 태그를 감싸는 부모 태그가 필요합니다. 부모 태그로는 똑같이 <div> 태그를 사용할 것이며, grid라는 id값을 주겠습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>grid</title>
        <meta charset="utf-8">
    </head>
    
    <style>
        #grid {
            border: 5px solid pink;    
        }

        div {
            border: 5px solid gray;
        }
    </style>

    <body>
        <div id = "grid">
            <div>NAVIGATION</div>
            <div>ARTICLE</div>
        </div>
    </body>
</html>

<style>
        #grid {
            border: 5px solid pink;
            display: grid;
            grid-template-columns: 150px 1fr;    
        }

        div {
            border: 5px solid gray;
        }
</style>

이렇게 변하는 모습을 볼 수 있습니다. grid를 사용했으며, 150px로 왼쪽의 navigation을 고정해주고, 남은 부분은 전부 article이 차지하도록 해주었으므로, 웹 페이지의 가로 사이즈를 변화시킬 때, 왼쪽의 navigation은 변화가 없이 고정된 150px의 값을 가지지만, 오른쪽의 article이 있는 부분은 유동적으로 변하는 모습을 볼 수 있습니다. 여기서 fr이 무엇인지 설명해드리기 위해 예시를 가져와봤습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>grid</title>
        <meta charset="utf-8">
    </head>
    
    <style>
        #grid {
            border: 5px solid pink;
            display: grid;
            grid-template-columns: 150px 1fr;
            margin:20px;    
        }

        #grid2 {
            border: 5px solid pink;
            display: grid;
            grid-template-columns: 1fr 1fr;    
            margin:20px;
        }

        #grid3 {
            border: 5px solid pink;
            display: grid;
            grid-template-columns: 2fr 1fr;    
            margin:20px;
        }


        div {
            border: 5px solid gray;
        }
    </style>

    <body>
        <div id = "grid">
            <div>NAVIGATION</div>
            <div>ARTICLE</div>
        </div>

        <div id = "grid2">
            <div>NAVIGATION</div>
            <div>ARTICLE</div>
        </div>

        <div id = "grid3">
            <div>NAVIGATION</div>
            <div>ARTICLE</div>
        </div>

    </body>
</html>

그리드를 3개 만들고, grid는 150px, 1fr, grid2는 1fr, 1fr, grid3는 2fr, 1fr의 값을 주었습니다. 그리고 3개의 구분을 명확히 하기 위해 margin값을 20px씩 주었습니다.

차이가 보이시나요?? 일단 150px로 크기를 지정해주는 경우 웹페이지의 사이즈의 변화와 상관없이 일정한 크기를 가지게 되고, 남은 부분을 2fr이 차지하게 됩니다. 두 번째 경우 1fr 1fr을 주었으므로 전체 사이즈를 1/2씩 나눠 갖는 형태를 보입니다. 마지막 경우는 2fr 1fr으로 각각 2/3, 1/3의 비율로 나뉘게 됩니다.

grid를 사용하면 좋은 점은, 텍스트가 많아질 때 자동으로 크기가 커지게 됩니다. 사진으로 보여드리겠습니다.

이런식으로 오른쪽의 텍스트가 많아졌고, 아무런 조치를 취해주지 않았음에도 알아서 그리드의 크기가 늘어난 것을 볼 수 있습니다.

이제 그리드를 배워보았으니 아까 만들었던 예제 2번 웹 페이지를 그리드를 이용해 수정해봅시다.

<!DOCTYPE html>
<html>
    <head>
        <title>web2 실습용 파일</title>
        <meta charset="utf-8">
    </head>

    <body>
        <style>
            h1 { 
                text-align: center;
                font-size: 60px;
                border-bottom:3px black solid;
                padding:20px;
                margin:0px;
            }
            .list {
                text-decoration: none;
                font-size: 30px;

            }
            #grid {
                display: grid;
                grid-template-columns: 220px 1fr;
            }
            #article {
                padding:20px;
            }
            #grid ol {
                border-right: 3px black solid;
                width:150px;
                margin:0;
                padding-left:50px;
                padding-top: 20px;
            }
        </style>
        <h1>WEB2</h1>
        <div id = "grid">
            <ol>
                <li><a href="1.html" class ="list">HTML</a></li>
                <li><a href="1.html" class ="list">CSS</a></li>
                <li><a href="1.html" class ="list">JavaScript</a></li>
            </ol>
            <div id="article">
                <h2>CSS</h2>
                <p>
                    Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>)
                    is a style sheet language used for describing
                    the presentation of a document written in a markup
                    language.[1] Although most often used to set the
                    visual style of web pages and user interfaces
                    written in HTML and XHTML, the language can be
                    applied to any XML document, including plain XML,
                    SVG and XUL, and is applicable to rendering in
                    speech, or on other media. Along with HTML and
                    JavaScript, CSS is a cornerstone technology used
                    by most websites to create visually engaging
                    webpages, user interfaces for web applications,
                    and user interfaces for many mobile applications.
                </p>
            </div>
        </div>
    </body>
</html>

목차 부분과 본문의 내용을 나란히 두기 위해 그리드를 사용해보았습니다. 그리드를 사용하기 위한 부모 태그로 div를 사용하였고, id 값으로 grid를 주었습니다. 또한 그리드를 사용할 때, 두 개의 부분으로 나눌 것이기 때문에 태그도 크게 두 개로 묶어주었습니다. 원래 있던 <ol> 태그 부분은 그대로 사용하고, <h2> 태그와 <p> 태그로 구성된 본문 부분을 그리드에 넣어주기 위해 <div> 태그로 묶어주었습니다.

그리드를 사용하니 훨씬 깔끔하게 정리되는 것 같습니다^^

[생활코딩] WEB2(CSS_04) 박스모델

2kkeullim — Wed, 22 Apr 2020 20:10:36 +0900

* Windows 운영체제 기준으로 작성되었습니다.

* vs code editor를 사용합니다.

§ 박스모델 → Click!

web2 css 실습을 위해 web1에서 사용했던 html 대신 새로운 파일을 간단하게 만들었습니다. 박스를 만들기 위해 <style> 태그 안에서 declaration으로 border을 사용해봅시다. 아래와 같이 <h1> 제목 태그의 경우 한 줄 전체를 사용합니다.

<style>
	h1 {
    	border-width:5px;
        border-color:black;
        border-style:solid;
    	}
</style>

반면 링크는 자기 자신의 콘텐츠 크기만큼만 공간을 사용합니다.

<style>
	h1 {
    	border-width:5px;
        border-color:black;
        border-style:solid;
    	}
	a {
    	border-width:5px;
        border-color:black;
        border-style:solid;
    	}
</style>

<h1> 태그와 같은 코드를 사용해 박스를 만들어주었음에도 불구하고, 자기 자신의 텍스트 크기만큼의 박스를 만든 것을 볼 수 있습니다. 이와 같이 html 태그들은 태그의 성격과 쓰임에 따라 화면 전체를 사용하는 태그들과, 자기 자신만큼의 부피를 가지는 태그들로 나뉩니다. 전자의 경우 block level element, 후자의 경우 inline element라고 부릅니다. 이 때 block level element들을 자기 자신만큼의 부피만큼만 보이도록 하고 싶으면 <style> 태그에 display:inline;이라는 declaration을 적어주면 됩니다.

<style>
	h1 {
    	border-width:5px;
        border-color:black;
        border-style:solid;
        display:inline;
    	}
	a {
    	border-width:5px;
        border-color:black;
        border-style:solid;
    	}
</style>

<h1> 태그에 inline 처리를 해주었으므로, <h1> 태그는 자기 자신의 부피만큼만 크기를 차지합니다. 따라서 위의 코드에서 <h2> 태그와 <p> 태그를 잠시 없애준다면 본문의 내용이 WEB 2라는 <h1> 태그 바로 뒤에 이어서 나옵니다.

이 때 <a>태그에 display:block;이라는 declaration을 주면, <a>태그는 한 줄 전체를 차지하게 됩니다.

<style>
	h1 {
    	border-width:5px;
        border-color:black;
        border-style:solid;
        display:inline;
    	}
	a {
    	border-width:5px;
        border-color:black;
        border-style:solid;
        display:block;
    	}
</style>

위의 코드들을 보면, 블록의 두께, 색상, 스타일의 코드가 중복되는 것을 볼 수 있습니다. 이런 경우 선택자를 ,를 통해 구분해서 작성해주면, 코드의 중복을 줄이며, 아까와 같은 상황이 됩니다. 바꾸는 김에 <h2> 태그와 <p> 태그는 추가해주었고, <display> 태그는 지워주었습니다. 또한, <h1> 태그의 폰트 사이즈를 60px을 사용하였는데, <a> 태그와 공통인 부분만을 묶어서 작성해줄 것이기 때문에 일단 폰트의 사이즈는 잠시 지워두었습니다.

지금까지의 전체 실습 코드입니다.

<!DOCTYPE html>
<html>
    <head>
        <title>web2 실습용 파일</title>
        <meta charset="utf-8">
    </head>

    <body>
        <style>
            h1, a { 
                text-align: center;
                border-width:5px;
                border-color: black;
                border-style: solid;
            }
            p {
                font-size: 20px;
            }
        </style>
        <h1>WEB 2</h1>
        <h2>CSS</h2>
        <p>
            Cascading Style Sheets(<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>) is a style sheet language
            used for describing the presentation of a document
            written in a markup language like HTML.
            CSS is a cornerstone technology of the World Wide Web,
            alongside HTML and JavaScript.
        </p>
    </body>
</html>

위의 경우에서도 border가 계속 반복되고 있는데,

<style>
	h1, a {
	border:5px solid black;
    	}
</style>

이런 식으로 줄여 작성할 수 있습니다. 5px, solid, black의 순서는 중요하지 않습니다!

이제 실제적인 박스모델에 대해 공부해보기 위해 쓸데없는 코드들을 지워보겠습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>web2 실습용 파일</title>
        <meta charset="utf-8">
    </head>

    <body>
        <style>
            h1 { 
                text-align: center;
                border:5px black solid;
            }
        </style>
        <h1>WEB2</h1>
    </body>
</html>

이렇게 드래그를 해보면, content와 box 사이에 여백이 없습니다. 이 때 여백을 주고 싶다면 padding이라는 값을 주면 됩니다.

이렇게 content와 box 사이에 제가 지정한 20px만큼 여백이 생겼습니다. 똑같은 <h1> 태그를 한 번 더 사용해보고, reload해보면

두 박스 사이에 여백이 생겨서 박스가 출력됨을 볼 수 있습니다. 박스 사이의 여백은 margin이란 값을 주어 변경할 수 있습니다.

<style>
	h1 { 
		text-align: center;
		border:5px black solid;
		padding:20px;
		margin:0;
	}
</style>

margin값을 0으로 주었더니, box의 여백이 사라진 것을 볼 수 있습니다. 반대로, 사이의 간격을 늘리고 싶으면, margin 값을 큰 값으로 주면 됩니다.

이번엔 박스에서 위쪽, 왼쪽, 오른쪽을 제외한 아래쪽 선만 남겨봅시다. border-bottom을 사용해주면, box의 아래쪽 선만 나오게 됩니다.

<style>
	h1 { 
		text-align: center;
		border-bottom:2px black solid;
		padding:20px;
		margin:0;
	}
</style>

이렇게 목차를 달아주었을 때, 목차의 오른쪽에 긴 세로선을 그으려면, border-right 값을 주면 됩니다.

이렇게 만들어주자, <ol> 태그는 block line element이기 때문에 세로선이 페이지의 오른쪽 끝에 표시되었습니다. 세로선이 조금 더 목차에 가까운 곳에 표시되게 하려면 width를 조절해주어야 합니다.

<style>
	h1 { 
		text-align: center;
		font-size: 60px;
		border-bottom:3px black solid;
		padding:20px;
		margin:10px;
	}
	a {
		font-size: 30px;
		text-decoration: none;
	}
	ol {
		border-right: 3px black solid;
		width:150px;
	}
</style>

width를 150px로 조절해주었더니, 선이 목차의 오른쪽 옆에 예쁘게 위치한 것을 볼 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>web2 실습용 파일</title>
        <meta charset="utf-8">
    </head>

    <body>
        <style>
            h1 { 
                text-align: center;
                font-size: 60px;
                border-bottom:3px black solid;
                padding:20px;
                margin:0px;
            }
            .list {
                text-decoration: none;
                font-size: 30px;
            }
            ol {
                border-right: 3px black solid;
                width:150px;
                margin:0;
                padding:20px;
            }
        </style>
        <h1>WEB2</h1>
        <ol>
            <li><a href="1.html" class ="list">HTML</a></li>
            <li><a href="1.html" class ="list">CSS</a></li>
            <li><a href="1.html" class ="list">JavaScript</a></li>
        </ol>
        <h2>CSS</h2>
        <p>
            Cascading Style Sheets(<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>) is a style sheet language
            used for describing the presentation of a document
            written in a markup language like HTML.
            CSS is a cornerstone technology of the World Wide Web,
            alongside HTML and JavaScript.
        </p>
    </body>
</html>

현재까지 완성된 최종 코드와 웹 페이지입니다~!~!