yubyeong

웹 퍼블리싱 시작하기 본문

Web Development/HTML

웹 퍼블리싱 시작하기

yubyeong 2023. 9. 29. 18:59

웹 사이트를 만드는 프로그래밍 언어 : HTML, CSS

  • HTML : 웹 사이트에 들어갈 내용을 담당
  • CSS : 웹 사이트에 들어갈 스타일을 담당

HTML 파일의 기본 구조

 

<!DOCTYPE html> : 파일이 HTML 문법을 쓴다는 것을 알려주는 코드.

그 아래로 <html> 태그로 감싼 후에, <head>태그와, <body> 태그로 나눈다.

<head> 태그 안에는 페이지에 대한 정보가 들어가고, <body>에는 페이지 내용이 들어간다.

  • <meta charset="utf-8"> :utf-8:한글을 지원하는 대표적인 인코딩 방식 (페이지의 정보이므로 head 태그에 넣고 meta 태그는 내용이 아니기에 종료 태그가 없음)
  • 인코딩 : 어떤 숫자가 어떤 문자에 해당하는지 정해 놓은 규칙 (ex : 크롬에서는 한글이 보이지만 사파리등 다른 웹사이트에서는 한글이 깨짐)

TAG (태그)

  • <title></title> 페이지 이름 (화면에 보이지 않음)
  • 제목 : <h1> … </h1> ~ <h6> … </h6> : 숫자가 낮아질수록 더 큰 제목.
  • 단락 : <p> … </p>
  • 줄 바꿈 : <br>
  • 영역 나누기 : <div> … </div> (박스를 친다고 생각.)

 

속성 : 시작 태그에 속성 이름="속성 값"형태로 사용하는 문법

예시 1: <a>0 태그의 href 속성 (하이퍼링크)

<a href="https://주소.kr">링크</a>

예시 2: <img> 태그의 src 속성(이미지)

<img src="https://example.com/my-image.png">

CSS 속성

  • CSS 코드를 추가할 때는 CSS 속성: CSS 속성값 형태로 적음
  • 여러 개의 CSS 속성을 사용할 때는 세미콜론(;)으로 구분..
  • 색상 코드 : 색상을 HEX(16진수)로 표현한 값이다. 보통 이 값으로 색상을 사용.
  • 픽셀(px) : 화면에서 그려지는 가장 작은 정사각형을 말다. 이 사각형을 크기의 단위로도 사용.

배경색

background-color: #272928

글자색

color: #ffffff

글꼴

우선 적용할 글꼴 이름부터 차례대로 적어 주면 된다.

font-family: Poppins, 'Noto Sans KR', sans-serif

글자 크기

font-size: 16px

글자 굵기 

100에서부터 900까지, 100 단위로 올라가며,

중간이 되는 font-weight 값은 400.

font-weight: 400

너비

width: 560px

높이

height: 380px

안쪽 여백

세로, 가로 10px 예시

padding: 10px

세로 10px, 가로 20px 예시

padding: 10px 20px

바깥 여백

세로, 가로 10px 예시

margin: 10px

세로 10px, 가로 20px 예시

margin: 10px 20px

세로 10px, 가로 자동 (알아서 채워 넣기) 예시

margin: 10px auto

참고 : auto는 바깥 여백 (margin)의 가로에서만 동작.

'Web Development > HTML' 카테고리의 다른 글

HTML 핵심개념(태그, 링크, 리스트, 테이블, 멀티미디어, 폼, 시맨틱태그)  (1) 2023.10.03
'Web Development/HTML' Related Articles more