Prologue
HTML과 CSS의 기본 개념을 빠르게 복습하기 위해 요약해서 정리했다. 시간을 단축하기 위해 짧게 적었으니 필요했던 내용은 살을 붙여나가자.
1. HTML
- 웹 페이지를 만들기 위한 언어
- 웹 페이지 구조를 잡을 수 있다.
- 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용 구성
- 파일명에
.html이 붙은 텍스트 파일
2. 브라우저
- html파일을 가지고 어떻게 화면에 출력되는지 파악한 후에 웹 페이지를 생성
- Chrome,Safari,IE 등 다양한 브라우저가 있다.
3. Tag
- 태그의 기본 개념
- html에서 image나 text를 그려주려면 그에 맞는 태그가 필요
- 대부분의 태그는 시작태그와 끝 태그로 구성되어있다.
- 예외로 img,br,input 등의 태그들은 끝태그 없이 사용이 가능
4. Elelment(요소)
5. attribut(속성)
- 속성은 시작 태그에 위치하며 한 태그에 여러 속성을 지정할 수 있다.
- 아래에서 div,a,img는 태그이고 class,href,src,alt는 속성이다.
6. HTML 파일의 기본 구조
7. DOCTYPE
- HTML 파일이라면 제일 첫 줄에 위치해야 하는 선언문
- 모습은 태그와 비슷하지만 정확히는 HTML 태그는 아니다.
- 해당 HTML파일이 무슨 버전을 사용했는지 브라우저에 알리는 역할
8. html 태그
- html elements(요소)들은 html태그로 감싸져 있다.
- 브라우저가 html태그를 만나면, html이 시작되었는지 인지하고 요소를 그릴 준비를 한다.
9. head 태그
- html태그 다음에는 항상 head태그가 위치한다.
- body태그와 다르게 웹 브라우저에 보이지 않는 부분이다.
- 사이트의 제목, 설명, 부가정보, 기술적 내용( 이 사이트는 주로 모바일용인지 아닌지)이 들어가는 부분
- 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야한다.
<meta charset="utf-8"> - 아래의 코드는 디바이스와 웹페이지의 가로 길이가 같다는 의미이다. 모바일에서 웹사이트를 사용하는 유저들을 위해 추가해야 하는 정보이다. 이 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타난다.
<meta name="viewport" content="width-device-width">- head태그 안에 있는 title태그는 브라우저 탭에 보이는 페이지의 이름이다.
10. body 태그
- body 태그는 항상 head 태그 다음에 위치한다.
- 화면에 보여져야할 레이아웃대로 각종 태그들이 존재
11. h1~h5 태그
- 제목과 같은 텍스트를 보여줄 때 사용하는 태그
- 1에서 5로 숫자가 올라갈 수록, 글씨 크기가 점점 작아진다.
12. span 태그
- span태그에는 주로 텍스트를 넣어준다.
- span태그는 line brake가 되지 않고, 한 줄에 이어서 나오게 된다.
- 이런 한 줄에 이어서 나오는 요소를 'inline-element'라고 한다.
13. p 태그
- p태그 또한 텍스트를 주로 넣어준다.
- paragraph의 줄임말로, 주로 문단을 통로에 넣을 떄 많이 사용
- 한 줄에 이어서 안나오고 단락이 나뉘는 요소인 block-element이다.
14. a 태그
- a태그는 링크를 걸어줄 때 사용
- href 속성에 이동해야 하는 주소를 써주면 해당 주소로 이동한다.
<a href="URL 주소" target="_blank"> 이동한다아아아 </a>- target 속성에 "_blank" 값은 content를 클릭하면 새창으로 뜨게 해주는 값이다. (더 많은 값들이 있으니 검색 하자~!!)
15. div 태그
- 웹 사이트에서 섹션을 나눌 때 사용
- a,p,img 등의 태그는 그 자체로 어떤 기능을 하는지 명확하지만 div는 특별한 기능이 없다.
- 그럼에도 div태그를 사용하는 이유는 비슷한 부분끼리 그룹, 디자인에 맞게 레이아웃을 분리, 각 div태그에 class나 id라는 attribute를 부여하고 css 스타일을 입혀줄 수 있기때문이다.
블로그 운영 x