HTML / CSS 시작하기
1. HTML 버전 설정
HTML 코드를 입력하기 전에 버전을 안내해주자!
<!DOCTYPE html> → 가장 최신 버전인 html5로 구동된다.
2. HTML 태그
기본 문법 : <태그> 내용 </태그>
<title> </title> → 웹사이트 제목
<h1> </h1> → 웹사이트의 가장 큰 머릿말 (h1~h6까지 있음)
<p> </p> → 본문 (글 내용)
<b> 내용 </b> → 사이에 있는 내용을 bold체로 변경
<i> 내용 </i> → 사이에 있는 내용을 itaric체로 변경
---
약자들을 위한 Phrase Tag
<strong> </strong> = <b>
<em> </em> = <i>3. 한글이 깨져요!
<meta charset="utf-8"> → 한글을 지원하는 인코딩 방식으로 진행4. CSS 기초 1
style 태그 안에 작성해야한다.
(ex)
<style>
h1 {
font-size: 64px;
}
font-size → 글자크기
text-align → 정렬 (left, center, right)
color → 글자색
margin → 요소 사이의 여백5. Optional Tag
<html> → body + head
<head> → title, style
<body> → 글 내용6. 하이퍼링크
<a href="~~.com">
<a href="~~.com" target="_blank"> → 새 탭에서 링크가 열린다.7. 상위/하위 파일로 이동
"folder1/~.html" → 하위 파일로 이동
"../index.html" → 상위 파일로 이동
"~.html" → 같은 파일 내에서 이동8. 이미지 첨부
img src → 이미지 첨부 태그 (종료 태그 없음)
<img src="~~.ing(이미지 링크)">참고사항 : 이미지 가운데 정렬
<style> img { display: block; margin-left: auto; margin-right : auto; } </style>
9. class와 id
1) class
→ 여러요소에 같은 스타일을 입힐 때
→ 한 요소가 여러 class 소지 가능
<p class="~~">
+
<style>
.~~
2) id
→ 중복 설정 불가능 (단일 타겟)
→ 한 요소가 여러 아이디 소지 불가능
<p id="~~">
+
<style>
#~~10. div
여러 요소를 하나로 묶는 태그
11. CSS파일 만들기
~~.css
link로 html과 이어주기
<head>
<link href="css/~~.css" rel="stylesheet">12. 스타일 적용 방법
1. <style> 태그
2. style 속성 <p style - "color: Green"; ~~>
3. 외부 css파일 + <link> 태그13. 코멘트
<!-- 머리말 --> → html 코멘트
/* 머리말 */ → css 코멘트코멘트할 문장을 선택한 후 'cmd + /' 를 누르면 코멘트 처리가 된다.
14. 참고할만한 사이트
- stackflow
- JSFiddle
- W3Schools
< 소감 >
본격적으로 프로그래밍 공부를 시작하게 된 하루였다. 아직 기초적인 내용이라 아직까지는 버겁지 않고 쉽게쉽게 이해가 되었다. 앞으로 더 어려운 내용을 하기 전, 기초 베이스를 탄탄하게 다지기 위해 여러번 복습을 해야할 것 같다.
현수의 웹 TIL입니다!