HTML/CSS 이란?
● HTML [HypertextMarkupLanguage] : 웹 문서를 만들기 위한 기본적인 언어
● CSS [cascading style sheets]: 웹 문서의 전반적인 스타일을 저장해둔 스타일 시트
HTML 기본 태그 (요소)
<!DOCTYPE html> : 웹 브라우저에게 HTML버전을 알려주는 역할 ( 적을시, 자동으로 html5 사용)
<title> : 웹 사이트의 제목
<h1> : 가장 큰 머리말 (heading 1)
<h2> : 두 번째로 큰 머리말 (heading 2)
<p> : 문단
HTML 기초 태그
<b> : 텍스트를 굵게 만들어줌 ( bold )
<p> <b>HTML</b>을 배워보자 </p><i> : 텍스트를 날려줌 ( italic )
<p> <i>HTML</i>을 배워보자 </p><strong> : <b> 태그와 똑같이 굵게 표시됨. 감싸고 있는 텍스트가 중요하다고 표시하는것이 목적임
<em>: <i> 태그처럼 날려써짐. 텍스트가 중요하다고 표시하는것이 목적임
<strong> , <em>은 음성 읽기 도구에서 강조해서 읽어준다.
CSS 사용법 : css는 보통 <style> </style> 사이에 적어주면 된다.
<!DOCTYPE html>
<html>
<head>
<title>Tistory</title>
<meta charset="utf-8"> <!-- 한글 깨짐현상방지를 위해 씀-->
<style>
</style>
</head>
<body>
<p> <b>HTML</b>에 대해서 알아보자</p>
</body>
</html>예를 들어서 스타일링 하고 싶은 요소가 p라면
<!DOCTYPE html>
<html>
<head>
<title>Tistory</title>
<meta charset="utf-8">
<style>
p {
font-size: 65px;
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p> <b>HTML</b>에 대해서 알아보자</p>
</body>
</html>
이런식으로 폰트크기나, 글자의 정렬 ( align)을 조정할 수 있다. 저기서는 center로 되어있지만 left, right로 조정가능하다. color는 말 그대로 글자의 색을 의미한다.
이 상태로 html파일을 열면 이러한 웹사이트가 만들어진 것을 볼 수 있다.
위에서 쓴 <html>, <head> , <body> 태그는 필수태그가 아니기에 쓸지말지는 자신의 자유이고 팀으로 작업을 하게 될때는 상의를 하면 된다고 한다 !
내 눈에는 저렇게 쓰는게 깔끔해보이고 이미 습관이 됐기에 난 사용중이다.
HTML 주석 : <!-- 이 사이에 쓰면 된다 --> 비주얼스튜디오 코드에서는 드래그 후, ctrl + / 를 누르면 자동주석처리가 된다
CSS 주석 : /* 여기에 쓰면된다 */ css의 주석은 c언어와 똑같으므로 c언어를 배운 사람한테는 친숙할 수 있다.
'프론트엔드 > HTML CSS' 카테고리의 다른 글
| 인턴 교육 시작 + <fieldset> , <table> 태그 정리 (0) | 2022.08.30 |
|---|---|
| css 기초 개념 정리 (0) | 2022.05.30 |
| [HTML/CSS] CSS 파일을 적용하는 방법 (3) | 2021.06.12 |
| [HTML/CSS] 기초 개념 ③ 클래스(class), 아이디(id) (0) | 2021.06.11 |
| [HTML/CSS] 기초 개념 ② 링크 넣는법 <a> , 이미지 넣고 가운데 정렬.. (1) | 2021.06.02 |