위코드 수강 전, 사전 공부를 시작해보았다.
HTML/CSS의 기본내용에 대해서 알아보자.
HTML과 CSS
'HTML(HyperText Markup Language)'은 웹사이트에 들어갈 내용을 담당하고, CSS(Cascading Style Sheets)는 웹사이트를 예쁘게 스타일링해준다. 이외에 JS가 더해져서 웹사이트를 만들 수 있다.
HTML 기본적인 구조
<></>를 이용해서 원하는 내용을 입력할 수 있다. head 에 속하는 내용은 실질적으로 웹화면에 나타나지 않고, body 에 속하는 내용은 웹화면에 나타난다.
<!DOCTYPE HTML>
<html>
<head>
<title>제목을 입력하세요</title>
</head>
<body>
<h1>안녕하세요<h1>
<h2>반갑습니다<h2>
<p>코딩을 배워봅시다</p>
</body>
</html>HTML 기본태그
<!--HTML코멘트-->: 코멘트는 브라우저에 출력되지 않는다. 복잡한 부분들을 설명할 때 정리해주는 중요한 역할을 한다.
<h1>~<h6>: 1~6단계의 소제목을 표현한다. 1이 제일 큰 제목이고, 6이 제일 작다.
<br>: html문서에는 엔터키를 입력해도 하나의 공백으로만 표현되므로, 'br태그'를 이용해 줄바뀜을 표현한다.
<a>: href속성을 통해 url 또는 html페이지 내의 앵커로 이동할 수 있다.
<a href="https://www.google.com">구글 바로가기</a><img>: 이미지를 삽입할 수 있다.
<img src="이미지 파일 소스url alt="이미지 출력할 수 없을 때 출력되는 문자열" width="300px" height="200px">＊href/src/url의 차이: 항상 셋이 헷갈려서 정리해봤다.
css는 항상 'url', html에서 link인 경우 'href', link가 아닌 경우(이미지, 비디오 등) 'src'
기본 CSS 속성
html에 css파일을 연결하여 사용한다.
<link rel="stylesheet" herf="../styles.css">CSS에서 폰트 크기를 표현할 수 있는 단위 몇 가지가 있는데, 그 중 px이 가장 많이 사용된다.
h2 {
font-size: 72px;
}글을 왼쪽, 가운데, 오른쪽으로 텍스트 정렬을 할 수 있다.
hl {
text-align: left;
}글에 원하는 색을 입힐 수 있다.
h1 {
color: bule;
}html과 마찬가지로 css도 코멘트를 달 수 있다.:
`/*css코멘트입니다.*/`
css는 항상 'url', html에서 link인 경우 'href', link가 아닌 경우(이미지, 비디오 등) 'src'
이 거 무심코 항상 지나갔는데 이렇게 정리를 할 수 가 있군요!