HTML, CSS (33) 썸네일형 리스트형 [CSS] 글자 크기, 굵기, 줄 높이 글꼴 abc font - size : 픽셀 글자의 크기를 조정할 수 있으며 글자의 세로크기가 픽셀만큼이란 뜻이다. font - weight: 굵기 글자의 굵기를 나타낼 수 있으며 100부터 900까지 100 단위로 입력한다. 기본값은 400이다. line-height: 줄 높이 줄 높이를 조정할 수 있다. 줄높이가 1.5이고 font가 33이면 33*1.5 = 49.5px이 줄높이가 되는 형식이다. 출력값 HTML 삽입 미리보기할 수 없는 소스 [CSS] 글꼴 글꼴 abc 글꼴은 font-family를 사용해서 입력할 수 있다. 입력방식은 font - family: 폰트1, 폰트2 ,..... 형식이고 적용 방식은 폰트 1 적용-> 영문만 지원되는 폰트 등의 이유로 문자를 지원하지 않는 폰트의 경우 폰트 2를 적용 - > 이하 반복한다. 아래는 위 코드가 적용된 것으로 abc는 Arial이 적용되고 "글꼴"은 Arial이 한글을 지원하지 않아 돋움으로 적용된 것을 확인 할 수 있다. HTML 삽입 미리보기할 수 없는 소스 만약, 내가 보여주고 싶은 글꼴이 있는 데 그 글꼴이 보는 사람의 컴퓨터에는 없는 경우가 있을 수 있다. 이럴 때는 웹폰트를 사용하는 데, 프로그램을 실행 시 웹에서 폰트를 불러와서 적용시키는 역할을 한다. 우선 구글폰트(Google Font.. [CSS] 배경색, 글자색, 색상 스타일1 스타일2 스타일3 영역을 구분을 짓는 태그다. 태그만으로는 아무런 영향을 끼치지 않지만 CSS, 즉 스타일을 다르게 하기 위해 영역을 구분 지을 때 사용한다. style = "css속성: 값" CSS 속성은 위 코드에서 보듯이 태그 안쪽에 들어가며 태그 안에서만 작동한다. background-color: 색상 배경색을 지정할 때 사용한다. color: 색상 글자색을 지정할 때 사용한다. 2개의 속성을 동시에 사용하고 싶을 때는 ;를 사용하여 잇는다. 상위 태그에서 지정한 속성을 하위 태그에서 재지정하면 하위태그 쪽 속성이 우선시된다. 위 코드에서는 body에서 글자색을 빨간색으로 지정했지만 스타일 1과 스타일 2는 자신의 태그가 우선시되는 것을 확인할 수 있다. 코드의 색상은 4가지 방식으로 나.. [HTML] 기본 템플릿(!) HTML 코드를 만드는 데 vscode를 사용할 것이다. 이 때, 간단한 입력으로 기본 템플릿을 불러올 수 있다. 처음 시작 위치에서 !을 누르면 다음과 같이 나오는 데 엔터를 누르면 된다. 그럼 다음과 같은 이나 등을 쓰지 않고 한 번에 받을 수 있다. [HTML] 이미지 삽입 이미지를 넣을 수 있도록 하는 태그는 단일 태그로 src 다음 쌍 따옴표 안에 이미지 주소를 넣으면 이미지를 띄울 수 있다. 이미지 주소는 이미지 위에서 우클릭을 누르고 이미지 주소 복사를 누르면 얻을 수 있다. 이미지 주소말고 컴퓨터에 있는 사진이나 그림을 사용하고 싶다면 지금 사용하고 있는 html 파일에서의 이미지 파일의 상대 경로를 적거나 절대경로를 적으면 된다. 위 코드의 경우 위키 백과의 이미지를 동일 파일에 넣었기 때문에 이미지명만 적었다. [HTML] 제목 , 본문, 하이퍼 링크 1 2 3 4 5 6 aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa 내블로그 은 제목을 나타내는 태그로 h1~h6까지 있다. 숫자가 작을 수록 중요한 제목이고 아무런 스타일을 입히지 않으면 h1에서 h6순으로 크기가 작아진다. 는 문단을 나누는 태그로 사용하면 문단과 문단을 나눠줄 수 있다. 은 문장의 줄을 나누는 태그로 태그처럼 혼자서 쓰인다. html은 위 코드같은 줄바꿈 엔터마저 공백으로 인식하기 때문에 다음 줄로 나눠야하는 경우 을 통해 나눈다. 은 글자에 하이퍼링크를 추가할 수 있는 태그이다. 주소에 html 파일을 입력하면 html 파일로 넘어가게 만들 수 있다. 은 각각 로 html에서 태그를 사용하며 많이 쓰.. [HTML] 한글을 안 깨지게 하기 크롬에서는 한글이 깨지지 않다가 다른 브라우저에서 한글이 깨지는 경우가 있다. 이는 인코딩(encoding) 방식이 브라우저마다 달라서 생기는 일이다. 이를 방지하기 위해서는 html 파일에서부터 이 파일이 어떤 인코딩 방식을 사용하는지 선언해주면 한글이 깨지는 일을 방지할 수 있다. Hello html! 인코딩은 페이지에 대한 정보이므로 태그에 들어가고 인코딩 방식을 정해주는 meta는 안에 내용을 넣지 않으므로 를 쓰지 않는 것을 볼 수 있다. utf-8은 한글을 지원하는 인코딩 방식이고 많이 사용한다. [HTML] HTML의 구조 Hello html! 가장 기초적인 HTML 구조이다. 이 파일이 html로 작성될 것을 선언하는 것으로 html 파일의 제일 첫 단에 들어간다. html의 가장 기초적인 태그로 이 안에 html의 정보들이 들어가야 한다. 페이지 안에서 보이지 않는 페이지의 정보들을 적는 공간이다. 페이지의 이름이 대표적인 예시 페이지에서 보여줄 내용이 들어가는 칸 위 코드를 따라서 html 파일을 만들면 아래와 같이 나온다. 이전 1 2 3 4 5 다음
