HTML & CSS 기초

Jnns·2023년 11월 21일

HTML 태그들

<!DOCTYPE html>
<html>
  <head> // 페이지 전체 정보와 설정
  	<title>이 페이지 전체의 제목입니다.</title>
    <meta charset="utf-8"> // 인코딩 방식
    <meta http=equiv ~> // 인터넷 익스플로러 최신 표준으로 보여주기
    <meta name="viewport" content=""> // 모바일 기기에서 보여줄 비율 조정(기기의 비율에 맞추겠다는 의미)
     <meta name="keyword" content=""> // 검색 엔진을 위한 키워드(keyword)를 정의
     <meta name="author" content=""> // 문서의 저자(author)를 정의
     <meta name="description" content=""> //  웹 페이지에 대한 설명(description)을 정의
    
    // 메타 데이터 설정(미리보기 설정)
    <meta property="og:title" content="">
    <meta property="og:url" content="">
    <meta property="og:type" content="">
    <meta property="og:image" content="">
    <meta property="og:description" content="">
    
    <link> // 외부 데이터 가져오기
  </head>
  
  <body> // 페이지의 보여지는 부분
    <h1></h1> // 제목 설정
    <p></p> // 단락
    <br> // 줄바꿈
    <a href=""></a> // 링크 걸기
    <div></div> // 여러 태그를 감싸서 영역 나누기
    <span></span> // 일부만 감싸서 영역 나누기
  </body>
</html>

CSS 속성들

style

// 블록 관련
<div style="background-color: #ffffff"></div> // 배경색
<div style="text-align: center"></div> // 정렬
<div style="width: 120px; height: 100px"></div> // 너비, 높이
<div style="padding: 40px 20px"></div> // 안쪽 여백
<div style="margin: 0 auto"></div> // 바깥 여백

//글자 관련
<div style="color: #ffffff"></div> // 글자 색
<div style="font-size: 20px"></div> // 글자 크기
<div style="font-weight: 400"></div> // 글자 굵기

margin & padding

요소는 위 그림 처럼 내용(content), 패딩(padding), 테두리(border)로 이루어져 있다.
padding 은 내용(content)과 테두리(border) 사이의 '여유 공간' 이다. 테두리(border) 까지가 요소이고, Margin은 요소 주위의 여백이다. 다른 요소와의 사이 공간이라고 할 수 있다. margin 과 padding 을 잘 구분하자!

// padding
<div style="padding: 40px"></div> // 세로, 가로 40px
<div style="padding: 40px 20px"></div> // 세로 40px, 가로 20px
<div style="padding: 40px 0"></div> //  세로 40px, 가로 여백없음
<div style="padding: 40px 30px 20px 10px"></div> // 위 40px, 오른쪽 30px, 아래 20px, 왼쪽 10px

// margin
<div style="margin: 20px"></div> // 세로, 가로 20px
<div style="margin: 20px 0"></div> // 세로 20px, 가로 0px
<div style="margin: 0 auto"></div> // 세로 0px, 가로 너비에 맞추기