본문 바로가기

코드잇23

CLI 전용 에디터 - Vim 사용 방법과 단축키 안내 GUI 환경에서는 파일 종류에 따라 Microsoft Word, VS code, PyCharm, 메모장 등 다양한 툴을 사용해서 파일 내용을 작성할 수 있다. 그런데 CLI 환경에서는 전용 텍스트 에디터를 사용한다. 그 중에서 가장 보편적인 것으로 Vim 이라는 에디터가 있다. Vim의 장점은 엄청 많은 기능과 단축키가 있다는 점이고, 단점은 모든 걸 마우스가 아닌 키보드로 해결해야 한다는 점이다. 나는 오래 전부터 Vim 에디터에 호기심을 가지고 있었기 때문에... 이번 강의 주제가 Vim 이라고 해서 기대를 많이 했다. (감동중) 그럼 이제부터 Vim을 사용하는 방법과 단축키에 대해서 정리해보도록 하겠다. Vim 실행하기 가장 먼저 해야 할 것은 당연히 Vim 실행하기 이다. 터미널을 열고, vim .. 2023. 5. 20.
디렉토리와 파일 생성하기 - mkdir, touch 터미널에서 파일과 디렉토리를 살펴볼 때에 주로 사용하는 커맨드에 대해서 알아보았다. 이번 포스팅에서는 디렉토리, 파일을 직접 생성하는 방법에 대해서 소개하려고 한다. 디렉토리 생성할 때 mkdir 디렉토리를 생성하기 위해서는 mkdir 이라는 커맨드를 사용하고, argument로 새로 만들 디렉토리명(경로 포함)을 주면 된다. 예제를 통해서 알아보자. 현재 coding_study 디렉토리 안에는 setting, study, text 세개의 디렉토리가 들어있다. 만약 여기에 login 이라는 디렉토리를 추가하고 싶다면 mkdir login 이라는 커맨드를 입력하고 실행하면 된다. 다시 ls 커맨드를 사용하여 내용물을 출력해 보았다. login 디렉토리가 잘 만들어진 것을 확인할 수 있었다. mkdir 뒤에.. 2023. 5. 19.
ls 커맨드에서 자주 사용하는 옵션 터미널에서 디렉토리의 내용물을 알고 싶을 때 사용하는 커맨드는 ls이다. 이번 포스팅에서는 ls에서 자주 사용하는 옵션에 대해서 소개하도록 하겠다. a 옵션 a는 all(모두)의 약자이다. 유닉스 파일 시스템에는 숨겨진 파일이 있는데, 이름이 . 으로 시작하고 확장자가 없는 파일들이다. 이러한 파일들은 ls 커맨드를 입력하거나 GUI 툴을 이용할 때에는 보이지 않는다. 이 숨겨져 있는 모든 파일과 디렉토리를 확인하고 싶다면, a 옵션을 추가하여 ls -a 커맨드를 실행하면 된다. 아래 이미지는 동일한 디렉토리에서 -a 옵션을 사용하지 않았을 때와 사용했을 때를 비교한 것이다. l 옵션 ls 커맨드를 사용해서 출력되는 결과물은 이름만 나오기 때문에 무엇이 디렉토리(폴더)이고 무엇이 파일인지 구별할 수가 없.. 2023. 5. 18.
다른 코드 불러올 때 사용하는 <link>, <script> 태그 코드잇 학습일기 챌린지가 끝났다. 동기부여도 되고 나름 재미있다고 생각했는데, 새로운 공지가 올라오지 않은 것을 보니 5월에는 챌린지를 진행하지 않는 것 같다. 그래도 뭐, 그거랑은 상관없이 앞으로도 계속 블로그에 공부한 내용을 정리해서 올릴 예정이다. 오늘은 다른 코드를 불러올 때 사용하는 링크(link) 태그와 스크립트(script) 태그에 대해서 소개하려고 한다. 외부에서 파일을 불러올 때는 태그는 외부에서 파일을 불러올 때 사용하는 태그이며, 구글 폰트를 적용할 때에도 link 태그를 사용한다. 파비콘을 지정할 때에도 link 태그를 사용한다. favicon.ico 라는 파일을 서버에 업로드 한 후에 해당 경로를 지정해주면 된다. rel 속성에는 icon 이라고 쓴다. html에서 자바스크립트를 .. 2023. 5. 2.
코드잇 학습일기 Day17. 폼 태그 속성, 인풋 태그 종류와 속성 어제는 폼(form) 태그의 구성과 인풋, 라벨, 버튼을 만드는 코드를 공부했다. 오늘은 어제에 이어 폼 태그의 속성, 인풋의 종류 등에 대해서 알아볼 예정이다. 폼 태그의 속성 폼 태그는 action 속성과 method 속성 - 두 가지 속성을 가지고 있다. action 속성 폼에 내용을 입력하고 버튼을 누르면 기본적으로 페이지를 이동한다. 만약 현재 페이지의 주소가 heinafantasy.com 이라고 가정하고, 아이디에 heina, 비밀번호에 1234를 적었다고 하면, 버튼을 눌렀을 때 아래와 같은 주소로 이동한다. http://heinafantasy.com/?id=heina&password=1234 주소를 자세히 들여다 보면, 물음표 이후로 폼에 입력한 값이 들어있다. 이런 것을 쿼리 문자열(Qu.. 2023. 4. 25.
코드잇 학습일기 Day.16 폼(Form) - 인풋(Input), 라벨(Label), 버튼(Button) 오늘의 코드잇 학습일기 시작~ 폼 태그에 관련된 강의였는데, 우리가 흔히 볼 수 있는 로그인, 회원가입 등 페이지와 관련이 많은 내용이었다. 폼(Form) 웹사이트에서 내용을 적는 부분을 폼(Form)이라고 한다. 폼의 구조를 살펴보자면, 가장 먼저 내용을 입력하는 칸을 인풋(Input)이라고 부르며, 각 인풋 옆에 있는 이름을 라벨(Label)이라고 부른다. 그리고 버튼(Button)은 누르면 입력한 데이터를 전송 or 저장하는 역할을 한다. 클래스101의 로그인 화면을 예제로 확인해보도록 하자. 폼(Form)을 만드는 방법 먼저 폼을 만들려면 태그로 감싸 주어야 한다. 그 안에 태그를 넣는다. 미리보기를 실행해 보면 사용자가 내용을 입력할 수 있는 칸이 하나 생긴 것을 확인할 수 있을 것이다. 참고로.. 2023. 4. 24.
코드잇 학습일기 Day15. 아이프레임(iframe) 원래 코딩강의는 되도록 평일에 듣고, 주말에는 휴식에만 집중하는 편인데... 이번 주에는 정신이 없어서 학습일기를 한개밖에 쓰지 못했다. 학습일기 챌린지가 주 2회인데, 주말에 1개를 쓰지 않으면 4월 챌린지를 실패하는 상황이라서, 주말이지만 코딩강의를 듣기로 했다. 아이프레임(iframe) 유튜브에서 공유하기(동영상 퍼가기) 기능을 이용할 때 iframe 으로 시작하는 태그를 확인할 수 있다. 아이프레임은 inline frame 이라는 의미이다. 간단하게 설명하자면 html 문서 안에서 또 다른 html 문서를 보여주는 역할을 한다. 개발자 도구를 열어서 보면 태그 안에는 , , 태그가 모두 들어있는 것을 확인할 수 있다. 이것을 응용하여, 만약 어떤 html 화면에서 다른 html 화면을 불러오고 싶.. 2023. 4. 22.
코드잇 학습일기 Day14. 멀티미디어(이미지, 비디오, 오디오) 한동안 바쁜 일이 있어서 코드잇 강의를 듣지 못했다. 더 미루면 이번 주 코드잇 학습일기 챌린지를 할 수 없을것만 같아서, 시간을 쪼개어 모니터 앞에 앉았다. 이미지를 넣을 때 이미지를 넣을 때에는 라는 태그를 사용한다. 태그 안에 src 속성값으로 이미지 경로를 적어주면 된다. 이미지 태그와 함께 사용하는 속성으로 alt가 있는데, 이 곳에는 이미지에 대한 정보를 텍스트로 넣는다. 그러면 마크업만 보고 어떤 이미지인지 알 수 있으며, 이미지를 볼 수 없는 시각장애인용 스크린리더 프로그램에서도 alt에 적혀있는 내용을 읽어준다. 또한 이미지 다운로드에 실패했을 때에도 이 이미지를 보여준다. 이미지를 보지 못해도 어떤 이미지인지 대충 짐작이 가능하기 때문에 사용자를 배려하여 되도록이면 alt 속성을 적어.. 2023. 4. 21.
코드잇 학습일기 Day13. 테이블 태그와 스타일링 요즘 듣는 코드잇의 html 핵심 개념 강의는 기초적인 html 태그들을 소개하고 있다. 이미 알고 있는 내용들을 한 번 더 정리하는 기분으로 듣고 있는데, 설명이 어렵지 않고 퀴즈도 재미있는 편이라 강의를 듣는 시간이 기다려진다. 이 정도면 취미로 코딩 강의를 듣는다고 할 수 있을지도 모르겠다. 표를 그리고 싶을 때 , , 표로 정리된 정보를 나타내고 싶을 때 사용하는 태그에 대해서 알아보도록 하겠다. 표를 그릴 때에는 아래 예제처럼 태그 안에 과 태그를 사용해서 만든다. 태그는 행을 표현하며, 태그는 열을 표현한다. 예전에는 테이블 태그를 이용해서 레이아웃을 나누고 사이트를 꾸미기도 하였는데, 최근에는 flex, grid 등 바람직한 방법들이 있으므로 테이블 태그는 표로 정보를 보여주고 싶을 때에만 .. 2023. 4. 12.
코드잇 학습일기 day12. 리스트 태그와 스타일링 하루 업무를 마치고 퇴근하려다가 오늘 코드잇 강의를 듣지 않았다는 게 떠올라서 다시 모니터 앞에 앉았다. 오늘 강의는 모두 알고있는 내용 들이어서 복습하는 기분으로~ 빠르게 다섯개 강의를 수강할 수 있었다. 순서 있는 리스트 만들기 , 순서가 있는 리스트를 만들 때는 태그 안에 태그를 사용해서 내용을 작성하면 된다. 그렇게 하면 코드에 적혀있는 순서대로 1, 2, 3 숫자로 된 글머리가 생긴다. 순서 없는 리스트 만들기 , 순서가 없는 리스트를 만들 때에는 태그 안에 태그를 사용해서 내용을 작성한다. 이렇게 하면 내용 앞에 자동으로 글머리 숫자 대신, 동그란 모양의 포인트가 생긴다. 리스트 스타일링하기 태그에 type이라는 속성을 주어 리스트 글머리를 어떻게 보여줄지 정할 수 있다. 라고 쓰면 알파벳 소.. 2023. 4. 10.