티스토리 뷰
1.태그
1) 콘텐츠(내용)가 있는 태그 ex) <div> <p> <span>
요소: <div>내용</div> // 오픈 태그와 클로즈 태그가 항상 같아야 한다.
2) 콘텐츠가 없는 태그 ex) <br> , 빈 태그
2. 기본 구조와 속성
1> <!DCOTYPE html> : html 버전을 의미
2> html의 문서의 시작: <html> <html lang="eg">
3> <태그명 속성="속성값"> //속성: 태그를 의미나 기능적으로 보조해주는 역할 = lang, charset, name, content 등등...
4> html 문서의 정보를 작성하는 영역 <head>
5> 웹 브라우저에 표시되는 영역 <body> 실제로 사용자에게 보여지는 태그는
<body> 태그에 작성한다.
3. 주요 태그들 h(n)
- <h1> <h2> ... <h6> 콘텐츠의 대제목, 중제목, 소제목에 사용됨
- n의 숫자가 커질수록 폰트 크기, 굵기가 작아진다.
- <h1> 태그가 가장 중요한 의미를 가진다.
** 주의사항
<h1>태그는 하나의 문서에서 한번만 사용해야 한다 > 문서의 중요한 점을 파악하기 어렵기 때문
<h1> 태그부터 순차적으로 사용해주기
4. <p> paragraph
- <p>lorem 입력후 tab을 하면 임의의 텍스트 덩어리가 생성됨
- 연속적으로 사용했을 때 단락 사이가 띄어져 출력된다.
- 공백은 웹 브라우저에서 최대 한 칸, 공백을 만들고 싶으면 를 여러번 사용
- 줄바꿈을 하려면 <br> 사용
- 하나의 단락을 표현할 때 <p> 를 사용해 나누면 안되고 <br>을 사용해 줘야함.
5. <a> anchor
- 웹페이지에서 링크를 연결할 때 사용
- a 태그는 내부 링크 방법과 외부 링크 방법이 있다.
- 내부 링크는 <a href> 를 사용해 클릭했을 때 이동시키고 싶은 속성을 입력시켜 준다.
- 내부 링크는 보통 목차에 많이 사용된다.
- target="blank" : target 속성에 blank 라는 값을 할당해주면 새 탭이 만들어지며 링크가 열린다.
6. <img> image
- 내부, 외부 리소스 이미지 방법으로 나뉜다.
- <img> 는 빈태그이다.
- ./images/bridge.jpg 로도 사용 가능, 경로의 기준은 html 파일로 한다.
- 이미지가 정상적으로 보이지 않는다면 src 속성으로 적은 경로가 틀리지 않는지 확인해야 한다.
- alt="내용" 속성을 사용해 이미지가 보이지 않는 경우를 대비할 수 있다.
- width=" " , height=" " 를 사용해 이미지의 크기를 조절해 줄 수 있다.(px 단위는 적지 않아야 함)
- 외부 리소스 이미지 방법에서 <img>를 <a> 로 감싸고 경로를 지정해주면 이미지를 눌렀을 때 페이지 이동이 일어난다.
7. 텍스트 강조
- <strong> 중요한 텍스트를 표현할 때 사용하는 반면 <b>는 단순히 글자를 굵게만 해준다.
* <b>는 문법적으로 강조의 의미가 없음.
- <em> 강조하고 싶은 텍스트를 나타내고 <i>는 시각적 스타일용 태그.
- 위 두 가지 태그는 서로 중첩해서 사용할 수 있다. ex) <p><strong>중요하면서 <em>강조</em></strong><p>
8. 목록
- <ul> unordered list: 비순서형 목록, 들여쓰기와 기호가 함께 출력된다.
- <ol> ordered list: 순서가 있는 목록을 출력하므로 목록에 숫자가 지정돼 출력된다. type으로 속성값을 바꿔주면 다른 종류의 숫자를 붙일 수 있다.
- <dl> definition list
