본문 바로가기

전체 글58

순서가 있는 목록, 순서가 없는 목록 만들기 순서가 없는 목록 HTML 삽입 미리보기할 수 없는 소스 위에서 보이는 형태로 순서가 없는 목록을 만들기 위해서는 이라는 태그를 이용해야 한다. ul은 unordered list 라는 뜻으로 목록이 출력되지만 순서가 출력되지 않는 목록을 의미한다. beer 김치 meat milk 태그 안에 목록으로 출력되고자 하는 내용을 넣는다. 그리고 그 내용을 각각 태그로 감싸주면 된다. 태그로 감싸지 않는 경우 아래와 같이 표현된다. HTML 삽입 미리보기할 수 없는 소스 태그로 감쌌지만 목록의 형태로 만들어지지 않는 모습을 확인할 수 있다. 순서가 있는 목록 HTML 삽입 미리보기할 수 없는 소스 위에서 처럼 숫자로 순서가 표시된 목록을 만들기 위해서는 태그를 이용한다. ol이란 ordered list의 약자이다.. 2023. 7. 11.
vscode 익스텐션 vscode 테마 변경 vscode의 테마를 변경하는 데 사용할 수 있는 익스텐션은 Community Material Theme이다. 설치 후 "색 테마 설정" 혹은 "Set Color Theme" 버튼을 클릭하면 색을 선택할 수 있는 창이 나온다. 선택을 할 때마다 테마가 바뀌는 것을 확인할 수 있다. Icon 이미지 변경 파일에 형태에 따라서 아이콘 모양이 나타나는 익스텐션이다. 위의 예시에 나타나는 아이콘 이미지 외에도 굉장히 다양한 파일들 및 폴더에 대해 지원이 되고 있어 파일 아이콘만으로 구분하기가 쉽다. 코드 자동 정렬 Prettier는 코드를 저장할 때 해당 코드를 자동적으로 정렬해주는 익스텐션이다. 여러 사람이 협업을 할 경우 코드의 정렬이 달라 알아보기 힘든 경우도 있고, 실수로 html.. 2023. 7. 8.
웹 사이트는 텍스트일 뿐이다. 이 글은 노마드코더의 코코아톡 클론코딩 강의를 들으며 작성한 내용입니다. 웹 사이트는 텍스트로 구성된 문서이다. 보통 우리가 웹 사이트를 만든다고 하면 굉장한 무언가를 생각하기 쉽다. 하지만 노마드 코더는 말한다. 웹 사이트는 그저 텍스트로 구성된 문서일 뿐이라고. 그래서 그 문서를 출력해서 보게 되면 그저 알아보기 어려운 문서일 뿐이라고. 하지만 그 문서를 받아들여 해석하고 우리가 봐왔던 웹 사이트의 모습으로 만들어주는 것이 바로 웹 브라우저이다. 필요한 텍스트는 단 3종류 뿐 그럼 웹 사이트를 구성하는 텍스트는 어떻게 구성이 되어 있을까? 지금부터 텍스트는 언어로 표현을 한다. 우선 가장 중요한 첫 번째 언어는 HTML이다. 이 언어는 배우는 데 30분도 안걸린다 생각될 정도로 쉽다. 솔직히 언어라고.. 2023. 7. 7.
모듈 번들러 webpack 번들링과 모듈 번들러 webpack 개발을 할 때 동일한 코드를 계속해서 작성해야 하는 경우가 있다. 이럴 경우 같은 일을 반복적으로 하는 것을 줄이기 위해, 코드의 복잡성을 줄이기 위해 해당 코드를 따로 분리를 한다. 이렇게 따로 분리된 파일을 모듈이라고 한다. 코드가 많아질수록 이러한 모듈 역시 그 수가 늘어나게 된다. 많은 수의 모듈로 이루어진 상태로 해당 파일들이 서버를 통해 사용자에게 제공되기 시작하면 사용자는 한 번 페이지를 요청할 때 각 파일들을 모두 받아와야만 하고 그렇게 되면 오랜 시간이 걸릴 수밖에 없다. 때문에 개발 시 여러 개의 모듈로 자바스크립트 파일을 분리해 둔 상태에서 운영계로 배포를 할 때에는 해당 모듈들을 하나로 묶어서 서버를 통해 사용자에게 서비스되도록 한다. 이렇게 여러.. 2023. 5. 20.