HTML, CSS 기본

tycode·2021년 4월 4일

웹개발 종합

목록 보기

1/9

HTML 기초

HTML은 크게 head와 body로 구성되어 있다.
안에는 페이지의 속성 정보
안에는 페이지의 내용

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목입니다 | HTML 기초</title>
</head>
<body>
    <!-- 구역을 나누는 태그들 -->
    <div>구역을 나눈다</div>
    <p>문단이다</p>
    <ul>
    	<li> bullet point!1 </li>
    	<li> bullet point!2 </li>
    </ul>
    
    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>제목을 나타내는 태그. (구글 검색이 잘 된다)</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 역할 있음.</h3>
    <hr> 가로선 그어준다.
    span 태그: 특정 <span style="color:red">글자</span>를 꾸밀 때
    a 태그: <a href="http://naver.com/"> 하이퍼링크 </a>
    img 태그: <img src="https://www.google.com/images.png" />
    input 태그: <input type="text" /> 입력 양식이다.
    button 태그: <button>버튼이다</button>
    textarea 태그: <textarea>나는 무엇일까요?</textarea>
</body>
</html>

STYLE

class="..." 태그는 명찰을 달아 줄 때 쓴다. (예: class="mytitle")
지칭할 때는 style안에다가 .mytitle {...}라고 쓴다.

배경관련

background-color: 눈으로 배경 영역 확인할 때 사용하면 편할 듯하다.
(이미지 깔 때는 요 3개가 거의 같이 다닌다)
background-image: url("...");
background-size: cover;
background-position: center;

사이즈

width
height

폰트

color
font-size
font-weight
font-family
   HTML에 이 부분을 추가하고
     <link href="url">

   CSS에 이 부분을 추가하면 완성!
     * {
     	 font-family: 'Jua', sans-serif;
     }
(*은 모든 태그에 적용할 때 쓰인다.)

간격

margin: #px #px #px #px; (시계 방향)
padding

그외 것들

text-align: (글 위치)
border-radius: #px; (이미지의 둥근 정도)
border: (테두리)

내용물을 화면 가운데로 두기 (가운데 있다는 것은 양쪽 여백이 최대라는 뜻)

<div>로 묶고 시작하자
   width: #px;
   margin: auto;
(html은 글과 박스 속성이 있다. 글 속성의 경우는 움직이지 않는다.)
(그래서 글 속성을 박스 속성으로 바꾸어야 한다.)
   display: block; (추가하자)
</div>

Margin, Padding

margin과 padding (헷갈리지 말기!)

*margin은 바깥 여백을 채워준다.

*padding은 안쪽 여백을 채워준다.

CSS 파일 분리

<style> ~ </style> 부분이 너무 길어서 보기 어려울 때는 이렇게 하면 된다.
	style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기
	<link rel="stylesheet" type="text/css" href = "(css파일이름).css">