본문 바로가기

TIL

(23)
html 파일의 작성 규칙과 head html 파일을 작성할 때 몇 가지 지켜야하는 규칙이 있다. 이번 글에서는 해당 규칙에 대해 알아보고자 한다. 첫 번째 규칙 첫 번째 규칙은 바로 위의 문구를 가장 상단에 작성하는 것이다. 이 문구의 뜻은 "이 파일은 일반적인 텍스트가 아니라 html 문서이다." 라는 것을 브라우저에게 알려주는 것이다. 두 번째 규칙 두 번째 규칙은 html 태그를 작성하고 해당 태그 안쪽에 작성하는 내용들이 html의 content라는 것을 표시한다는 것이다. 여기서 html 태그에는 lang 속성을 사용할 수 있다. 해당 속성을 사용하게 되면 구글, 빙 등의 검색엔진에게 해당 html파일의 주된 언어가 영어인지, 한국어인지 확인시켜줄 수 있다. 세 번째 규칙 세 번째 규칙은 head와 body를 사용한다는 것이다. ..
img 태그와 src 속성 img 태그의 특징 태그는 이나 태그와 다른 점이 하나 있다. 바로 닫힘태그가 따로 없다는 것이다. Go to google.com 위와 같이 태그나 태그의 경우 및 로 닫히는 태그를 표시해주고 있다. 하지만 태그의 경우 다음과 같이 닫힘 태그가 없다. 그 이유는 바로 img 태그가 "self-closing tag" 이기 때문이다. self-closing tag란 "자체 닫기 태그"를 뜻한다. a 태그나 h1 태그와 달리 img 태그에는 사이에 들어가는 content가 없다. 들어가야할 text가 없이 img 태그는 그 자체로 이미지를 나타내기 때문이다. src 속성 img 태그 역시 a 태그의 href나 target 속성과 마찬가지로 속성을 가지고 있다. 그 중 src 속성은 img 태그에 집어넣을 이미..
a 태그와 속성들 태그란? 태그에서 a 는 anchor를 뜻한다. anchor는 닻이라는 뜻이다. 태그는 link를 생각하면 되고 해당 태그를 통해 다른 웹사이트로 이동할 수 있게 된다. 태그의 사용 태그는 다음과 같이 사용할 수 있다. Go to google.com 이렇게 하면 아래와 같은 문구를 확인할 수 있다. 하지만 위의 문구를 누르면 아무런 반응도 일어나지 않는다. 태그는 등의 title을 뜻하는 태그와 달리 부가적인 정보를 필요로 한다. 이런 부가적인 정보는 attributes(속성)이라고 한다. 속성은 태그의 이름을 작성한 후 띄어쓰기를 해 주고 추가하는 형태로 그러한 속성 중 하나가 바로 "href" 이다. href 속성 태그의 중요한 속성 중 하나인 href는 "HTTP reference" 혹은 "hype..
css를 html에 적용하는 방법 1. html 파일에 css 코드를 추가한다. css를 html에 적용하는 첫 번째 방법은 바로 head 태그 안에 style 태그를 만드는 것이다. style 태그 안에 적용하고자 하는 css 코드를 추가하면 html에 css가 적용된 상태를 확인할 수 있다. 이 방법으로 CSS를 사용하는 것을 inline CSS라 한다. 2. css 파일을 html 파일에 주입한다. 위의 코드는 "style.css" 라는 파일명을 가진 css 파일을 주입한다는 뜻이다. 이 때 rel 속성을 적어주는데 이는 해당 html 파일과 style.css 파일간의 관계를 설명해주는 부분이다. style.css 파일은 html 파일과 stylesheet 관계를 맺는다는 것이다. 이 방법은 external CSS라고 부른다. 1번..
순서가 있는 목록, 순서가 없는 목록 만들기 순서가 없는 목록 HTML 삽입 미리보기할 수 없는 소스 위에서 보이는 형태로 순서가 없는 목록을 만들기 위해서는 이라는 태그를 이용해야 한다. ul은 unordered list 라는 뜻으로 목록이 출력되지만 순서가 출력되지 않는 목록을 의미한다. beer 김치 meat milk 태그 안에 목록으로 출력되고자 하는 내용을 넣는다. 그리고 그 내용을 각각 태그로 감싸주면 된다. 태그로 감싸지 않는 경우 아래와 같이 표현된다. HTML 삽입 미리보기할 수 없는 소스 태그로 감쌌지만 목록의 형태로 만들어지지 않는 모습을 확인할 수 있다. 순서가 있는 목록 HTML 삽입 미리보기할 수 없는 소스 위에서 처럼 숫자로 순서가 표시된 목록을 만들기 위해서는 태그를 이용한다. ol이란 ordered list의 약자이다..
vscode 익스텐션 vscode 테마 변경 vscode의 테마를 변경하는 데 사용할 수 있는 익스텐션은 Community Material Theme이다. 설치 후 "색 테마 설정" 혹은 "Set Color Theme" 버튼을 클릭하면 색을 선택할 수 있는 창이 나온다. 선택을 할 때마다 테마가 바뀌는 것을 확인할 수 있다. Icon 이미지 변경 파일에 형태에 따라서 아이콘 모양이 나타나는 익스텐션이다. 위의 예시에 나타나는 아이콘 이미지 외에도 굉장히 다양한 파일들 및 폴더에 대해 지원이 되고 있어 파일 아이콘만으로 구분하기가 쉽다. 코드 자동 정렬 Prettier는 코드를 저장할 때 해당 코드를 자동적으로 정렬해주는 익스텐션이다. 여러 사람이 협업을 할 경우 코드의 정렬이 달라 알아보기 힘든 경우도 있고, 실수로 html..
웹 사이트는 텍스트일 뿐이다. 이 글은 노마드코더의 코코아톡 클론코딩 강의를 들으며 작성한 내용입니다. 웹 사이트는 텍스트로 구성된 문서이다. 보통 우리가 웹 사이트를 만든다고 하면 굉장한 무언가를 생각하기 쉽다. 하지만 노마드 코더는 말한다. 웹 사이트는 그저 텍스트로 구성된 문서일 뿐이라고. 그래서 그 문서를 출력해서 보게 되면 그저 알아보기 어려운 문서일 뿐이라고. 하지만 그 문서를 받아들여 해석하고 우리가 봐왔던 웹 사이트의 모습으로 만들어주는 것이 바로 웹 브라우저이다. 필요한 텍스트는 단 3종류 뿐 그럼 웹 사이트를 구성하는 텍스트는 어떻게 구성이 되어 있을까? 지금부터 텍스트는 언어로 표현을 한다. 우선 가장 중요한 첫 번째 언어는 HTML이다. 이 언어는 배우는 데 30분도 안걸린다 생각될 정도로 쉽다. 솔직히 언어라고..