0. html과 css란?
html과 css는 웹사이트를 만들 때에 쓰는 프로그래밍 언어이다.
이 언어로 짠 코드를 소스코드 라고 하며, 코드를 작성하는 행위를 코딩 한다고 한다.
- html은 웹의 내용을 표시하는 프로그래밍 언어이다.
- css는 웹의 디자인을 꾸며주는 프로그래밍 언어로 cascading style sheet의 줄임말이다.
html은 기본적으로 꺾쇠 기호를 사용해 시작태그와 종료태그로 내용을 감싸 표시한다. 각 태그에는 저마다 속성들이 있어 속성값을 부여해 커스텀할 수 있다.
1. 사이트에 이름 붙이기
이 이름 title은 웹 페이지에 나타나진 않되 페이지의 정보를 나타내주므로 head 태그 내부에 작성해준다.
<html>
<head>
<title>My first Web</title>
</head>
<body>
<!-- 내용을 넣는 곳. -->
</body>
</html>2. 한글이 깨질 때
웹페이지의 문자들을 기계어로 바꾸어 컴퓨터가 이해하게 하는 것을 인코딩이라 하는데, 한글을 지원하지 않는 인코딩 방식이 있음. 따라서 한글을 지원하는 인코딩을 지정해주자.
utf-8은 한글을 지원하는 대표적인 인코딩 방식이다.
인코딩도 내용이 아니라 페이지에 대한 정보이므로 head 태그 안에 넣고, meta 태그는 종료 태그 없이 써준다.
<html>
<head>
<meta charset="utf-8">
</head>
</html>3. 제목 넣기
본문 내용에 제목을 넣으려면 h1~h6 태그를 쓰면 된다. title 태그와 h1 태그를 구분하자.
<html>
<head>
</head>
<body>
<h1>가장 큰 제목</h1>
<h2>부제목</h2>
<h6>제목은 h6까지 있다...</h6>
</body>
</html>4. 본문 넣기
한 단락을 작성할 때엔 p 태그로 단락을 묶어주자.
<html>
<head>
</head>
<body>
<p>
한 단락을 나타내는 p 태그.
</p>
<p>
p 태그 사이에는 띄어쓰기가 생긴다.
</p>
</body>
</html>5. 줄바꿈
html에서는 내가 아무리 enter을 쳐도 줄바꿈이 되지 않는다. 대신, 내가 원하는 곳에서 br 태그를 넣어야 한다.
<html>
<head>
</head>
<body>
<p>
이렇게<br>
br 태그를 써야<br>
띄어쓰기가 된다.
그렇지 않으면
띄어쓰기가 안된다.
</p>
</body>
</html>6. 꺾쇠 기호 넣기
본문에 < > 기호를 넣으려 해도 자꾸 태그로 인식돼서 본문에 나타나지 않는다. 따라서,& lt; & gt; 로 작성해야 한다.
<html>
<head>
</head>
<body>
꺾쇠는 < > 로 넣어야 한다.
</body>
</html>7. 링크 넣기
하이퍼링크란? 다른 외부사이트로 연결해주는 고리. 해당 글자를 클릭하면 다른 페이지로 넘어가게 해준다.
여기서 링크 태그를 a, 태그에 부가적인 옵션을 부여하는 href 를 속성, 그리고 href 값으로 넣어주는 url을 속성값이라 한다.
<html>
<head>
</head>
<body>
<a href="https://www.naver.com">
네이버
</a>
글자를 클릭하면 네이버로 이동!
</body>
</html>8. 이미지 넣기
이미지 태그를 쓰고, src 속성에 이미지 주소를 속성값으로 준다. 이미지 태그는 종료태그가 없다.
<html>
<head>
</head>
<body>
<img src="url"/>
</body>
</html>9. 영역 나누기
문서 안에서 영역을 나눠보자. 하나의 페이지 내에서도 배경색이 다른 부분이 있고, 글씨체가 다른 부분도 있다.
이런 것은 각자 영역을 주고 각 영역에 스타일을 따로 적용하는 것임!
이때 이 영역을 부여하는 태그가 div 태그이다. div는 영역 부여 빼고는 아무런 기능도 없다.
<html>
<head>
</head>
<body>
<div>
div로 영역을 나눠봤자
</div>
<div>
차이점은 보이지 않는다.
</div>
</body>
</html>'프론트 공부 > html과 css' 카테고리의 다른 글
| CSS의 포지션 속성 (0) | 2023.10.16 |
|---|---|
| CSS의 선택자와 캐스캐이드 (0) | 2023.10.16 |
| CSS의 박스 모델과 디스플레이 (1) | 2023.10.15 |
| CSS 기초 문법 (2) | 2023.10.15 |