본문 바로가기

코딩공부23

CLI 전용 에디터 - Vim 사용 방법과 단축키 안내 GUI 환경에서는 파일 종류에 따라 Microsoft Word, VS code, PyCharm, 메모장 등 다양한 툴을 사용해서 파일 내용을 작성할 수 있다. 그런데 CLI 환경에서는 전용 텍스트 에디터를 사용한다. 그 중에서 가장 보편적인 것으로 Vim 이라는 에디터가 있다. Vim의 장점은 엄청 많은 기능과 단축키가 있다는 점이고, 단점은 모든 걸 마우스가 아닌 키보드로 해결해야 한다는 점이다. 나는 오래 전부터 Vim 에디터에 호기심을 가지고 있었기 때문에... 이번 강의 주제가 Vim 이라고 해서 기대를 많이 했다. (감동중) 그럼 이제부터 Vim을 사용하는 방법과 단축키에 대해서 정리해보도록 하겠다. Vim 실행하기 가장 먼저 해야 할 것은 당연히 Vim 실행하기 이다. 터미널을 열고, vim .. 2023. 5. 20.
절대 경로 vs 상대 경로 오늘은 절대 경로와 상대 경로의 개념에 대해서 설명하려고 한다. 이미 다른 포스팅에서도 한 번 다룬 기억이 있는 것 같지만, 유닉스 커맨드를 공부할때도 유용하게 사용되는 개념이다. 경로를 argument로 받는 모든 커맨드에 절대 경로, 상대 경로를 둘 다 사용할 수 있기 때문이다. 절대 경로 절대 경로란, 루트 디렉토리를 기준으로 어떤 파일이나 디렉토리의 고유한 경로를 표시하는 것을 말한다. 경로가 길어질수록 불편해지는 단점이 있다. ex) home/heina/documents/study/codeit/20230509 상대 경로 상대 경로란, 현재 자신이 위치해 있는 디렉토리 기준으로 경로를 나타내는 것을 말한다. 현재 디렉토리는 . 으로 표시하며, 상위 디렉토리는 .. 으로 표시한다. ex) ../co.. 2023. 5. 9.
정보와 의미를 담고 있는 html 태그들(meta, link, title, 시맨틱 태그) 의미를 담고 있는 html 태그를 효율적으로 사용하면 검색 최적화나 웹 접근성 등에 도움이 된다. 이번 포스팅에서는 정보와 의미를 담고 있는 html 태그들에 대해서 알아보도록 하겠다. 안의 , , 태그는 페이지에 대한 정보를 담고 있는 태그이다. 태그 안에 컴퓨터가 읽고 사용하는 메타 데이터(meta data)가 담겨 있는데, 메타 데이터는 '데이터에 대한 데이터'라고 할 수 있다. (말이 어렵...) 페이지 제목을 나타내는 , css 파일이나 파비콘 이미지 등을 불러오는 , 그리고 각종 태그 등이 이에 속한다. 첫번째 줄에 있는 meta charset은 utf-8 인코딩을 사용해서 올바른 문자를 보여주게 하고, 네번째 줄의 og는 오픈 그래프(open graph)의 약자이다. 카카오, 페이스북, 네이.. 2023. 5. 3.
JSON 문법과 자바스크립트 객체 표기법 비교 JSON 문법과 자바스크립트 객체 표기법의 공통점과 차이점에 대해서 정리해 보았다. JSON 문법이란? 구글 홈페이지에 request를 보내면 서버가 아래와 같이 html과 javascript로 이루어진 코드를 response 해준다. 그러면 웹 브라우저가 받은 코드를 해석한 후에 예쁘게 화면에 출력해서 우리에게 보여주는 것이다. 이렇게 request로 받을 수 있는 포멧은 html과 javascript 코드 외에도 여러가지가 있다. 개발자 도구 console 창에 아래와 같이 입력해서 실행하면, html 형식이 아니라 데이터로 추정되는 결과를 response로 받는다. 이것은 JSON 이라고 하는 포맷인데, JavaScript Object Notation의 약자이다. 개발자들이 어떤 정보를 나타낼 때 .. 2023. 5. 3.
다른 코드 불러올 때 사용하는 <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.

티스토리툴바