반응형
1.HTML 기본 태그
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <!-- html 5 사용시 적용 --> <title>My First Website</title> <!-- <title> : 페이지의 제목/브라우저 탭, 방문 기록 제목 --> <meta charset="utf-8"> <!-- 한글파일 깨질 시 사용 --> <h1>My First Page</h1> <h2>I love HTML!</h2> <!-- <h1>~<h6> : heading[n] / 머리말 / h1부터 순서대로 작아짐 --> <p>Lorem ipsum dolor sitempor incididunt ut labore et dolore magna aliqua.</p> <!-- <p> : paragraph / 기본 위, 아래 여백 존재 --> #시각적 html 태그 Hello <b>World</b>! <!-- <b> : bold /텍스트 굵게 --> Hello <i>World</i>! <!-- <i> : italics / 텍스트 기울게 --> #Phrase Tags 태그 (시각 + 의미 ) Hello <strong>World</strong>! <!-- <strong> : 텍스트 굵게 + 태그 텍스트 중요 --> Hello <em>World</em>! <!-- <em> : 텍스트 기울게 + 태그 텍스트 강조 --> | cs |
2. CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <<기본 형식>> <!--여기에 html 코드 --> <style> /* 여기에 css 코드 */ </style> <<예시>> <h2>Heading 2</h2> <style> h2 { font-size: 72px; /*px : 폰트 크기 단위*/ text-align: right; /*text-align : 글 왼쪽, 가운데, 오른쪽 정렬*/ color: hotpink; /*color : 텍스트 색 지정*/ margin-bottom: 80px; /*margin : 요소 사이 여백 설정 / 여백 크기 : px*/ margin-left: 50px; } </style> | cs |
3. head, body , html
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <<html> <head> <!-- 제목, css, js등 내용 외적인 부분 삽입 --> <title></title> </head> <body> <!-- 내용적인 부분 --> </body> </html> <!-- 이 안에있는 모든 것이 html이다 --> =>옵셔널 태그라 불리는 <html> , <head>, <body> 는 의견이 분분함 =>굳이 안써도 되지만 파일의 구조가 눈에 더 잘 들어옴 | cs |
4. 링크 :하이퍼링크(Anchor) -> <a>태그
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | ##링크나 이미지 모두 수정하고 있는 현재 html의 위치에 따라 주소 변경 하이퍼링크(Anchor) -> <a>태그 #외부 사이트 이동 <a href(속성) = "가고싶은 주소(속성값)" target="_blank" (새로운 탭에서 열림)>내용</a> #내부 사이트 이동 <a href="folder1/page2.html">page2</a> <!-- 같은 폴더 내 html 이동 --> <a href="../index.html">page3</a> <!-- 상위폴더 html 이동 --> 이미지 : <img> 태그 <img src="사진 주소" width(너비)="300" height(높이)="300"> <img src="images/ice_cream.jpg"><!-- 같은 폴더 내 이미지 사용 시 주소 지정 --> <img src="../images/ice_cream.jpg"><!-- 상위 폴더 내 이미지 사용 --> ##이미지 가운데 정렬 방법 <style> img{ display: block; margin-left: auto; margin-right: auto; } </style> | cs |
5. 사이즈 설정
##폰트 크기 px : 폰트의 세로 길이
##퍼센트 % : 길이 설정 (총 브라우저 크기에 배율 맞춤)
반응형
'Web > HTML & CSS' 카테고리의 다른 글
| 6. CSS 활용 (0) | 2019.03.12 |
|---|---|
| 5. BOX Model -(2) (0) | 2019.03.12 |
| 5. BOX Model -(1) (0) | 2019.03.03 |
| 4. text 스타일링 (0) | 2019.02.27 |
| 2. class & id & div (0) | 2019.02.27 |