• HTML은 공식적으로 150여 개의 태그를 지원하고 있다. 모든 태그와 속성 정보를 알고 싶다면 www.w3.org
  • hn 태그 : 제목이나 주제를 나타내는 텍스트를 표현
    • <h1> Title </h1>
    • 1부터 6까지 있고 숫자는 중요도를 나타낸다 h1이 제일 중요하고 h6가 중요도가 낮다
    • 숫자 건너뛸 수 없다 (h1,h2,h3 가능 h1,h3,h4 불가능)
    • SEO 검색 엔진에서 상위에 랭크될 수 있도록 마크업을 작성하는 것, hn 태그로 작성된 텍스트는 검색 엔진에서 키워드로 인식 
  • p 태그 : paragraph를 작성할 때 사용
    • <p>내용</p>
  • br 태그 : 줄 바꿈 태그 
    • <br>
  • blockquote : 인용한 문단 단위의 텍스트를 작성할 때 사용
    • <blockquote cite="출처 URL">문단 단위 인용문</blockquote>
  • q 태그 : 텍스트 단의의 짧은 인용문을 작성할 때 사용
    • <q cite="출처 URL"> 인용문</q>
  • ins 태그 : 추가된 텍스트, 밑줄(하단 이미지)
    • <ins> 추가된 내용 </ins>
  • del 태그 : 삭제된 텍스트, 취소선(하단 이미지)
    • <del> 추가된 내용 </del>

  • sub 태그 : 아래첨자 (하단 이미지)
    • <sub> 아래 첨자 </sub>
  • sup 태그 : 위 첨자 (하단 이미지)
    • <sup> 위 첨자 </sup>

 

 

GROUP

  • div 태그 : 블록요소와 인라인 요소를 그룹으로 묶을 때 사용
    • <div> </div>
  • span 태그 : 인라인 요소를 그룹으로 묶을 때 사용
    • <span> </span>

LIST

  • ul 태그 : unordered list, 비순서형 목록, 글머리 기호

<ul> 추가된 내용

  <li>목록 내용</li>

  <li>목록 내용</li>

  <li>목록 내용</li>

</ul>

  • ol 태그 : ordered list, 순서형 목록, 번호가 붙는 리스트

<ol> 추가된 내용

  <li>목록 내용</li>

  <li>목록 내용</li>

  <li>목록 내용</li>

</ol>

  • dl 태그 : description list, 정의형 목록, 용어설명
  • dt : description term, dd : description detail

<dl> 

  <dt>용어</dt>

  <dd>용어 설명</dd>

</dl>

 

 

LINK

  • a 태그 : 내부나 외부 링크를 생성
    • <a herf="대상경로" target="링크연결방식" title="링크설명"> </a>
    • href : 대상경로의 주소(URL)이거나 내부 문서의 id 속성값
    • target : 새 창으로 열기인 _blank를 제외하고 거의 사용하지 않음, 생략가능
    • title : 생략가능

IMAGE

  • img 태그 : 이미지 객체를 삽입하고 싶은 경우
    • <img scr="이미지경로" alt="이미지설명"> 
    • src : source, 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준
    • ./ 현재폴더 ../ 상위폴더 ../../ 상위폴더의 상위폴더
    • alt : 이미지 객체를 설명할 수 있는 텍스트

IMAGE LINK

 

<a herf="대상경로">

  <img scr="이미지경로" alt="대체 텍스트"> 

</a>

 

img 태그 : 이미지 객체를 삽입하고 싶은 경우

 

  • strong 태그 : 이미지 객체를 삽입하고 싶은 경우
    • <strong>중요한 의미가 있는 텍스트</strong>
  • em 태그 : 기울어짐으로 강조하고 싶은 경우
    • <em>중요한 의미가 있는 텍스트</em>

 

 

링크를 만드는 거까지는 성공했는데 링크에서 왜 길벗홈페이지로 가지 않는 것인가.

 

 

블로그 글 쓰다가 알아차렸다. ;와 :를 구분 잘 합시다..

'Study > HTML+CSS' 카테고리의 다른 글

[코딩자율학습] 2장 HTML 문서 작성을 위한 기본 내용 살펴보기  (1) 2024.08.08
[코딩자율학습] 1장 Hello, HTML + CSS + 자바스크립트  (0) 2024.08.08
[길벗] 코딩 자율학습 HTML+CSS+자바스크립트  (0) 2024.03.10
  • 태그 Tag : HTML 문법을 이루는 가장 작은 단위. 텍스트, 이미지, 버튼 등의 웹 페이지 구성 요소를 정의하는 역할
    • <태그명>
  • 속성 : 태그를 의미나 기능적으로 보충하는 역할을 하며, 속성명과 속성값으로 구성
    • <태그명 속성명="속성값">
  • 문법 : 태그와 속성으로 구성. 속성은 태그를 도와주는 역할.
  • 주석 : 코드에 메모나 설명을 남기고 싶을 때 사용. 웹 브라우저 소스 보기에 노출되므로 보안이 필요한 내용 작성은 금물.
    • <!-- 주석 -->
  • HTML의 기본 구조

<!DOCTYPE html>

<html lang="ko">

  <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>문서의 제목</title>

  </head>

  <body>

  </body>

</html>

 

  • 블록요소와 인라인요소
    • 블록요소 : hn tag, p tag처럼 공간과 상관없이 항상 줄바꿈이 되는 태그로 작성한 코드
    • 인라인요소 ; a tag, span tag처럼 공간이 부족할 때문 줄바꿈이 되는 태그로 작성한 코드 
  • 부모, 자식, 형제 관계 : 태그 사용 위치에 따라 관계가 성립.
  • 줄바꿈과 들여쓰기  : 코드의 가독성을 위해 적절하게 사용.

 

아직은 무슨 말인지 하나도 모르겠네..

 

<!DOCTYPE html> 여기가 DTD(Document type Definition)

<html lang="ko"> 주 언어가 한국어로 이루어진 html 문서의 시작

  <head> 문서의 메타데이터를 정의하는 부분, 웹브라우저에 노출 안됨

    <meta charset="UTF-8"> 아직 무슨말인지 모르겠지만, 이렇게 쓴다고 함

    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 아직 무슨말인지 모르겠지만, 이렇게 쓴다고 함2

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 화면 사이즈라는데 뒤에 더 나온다고 함

    <title>문서의 제목</title> 문서의 제목은 겹치지 않게, 검색 엔진에서 신뢰성

  </head>

  <body> <<여기가 웹브라우저에 노출되는 내용

  </body>

</html> 주 언어가 한국어로 이루어진 html 문서 끝

 

 

'Study > HTML+CSS' 카테고리의 다른 글

[코딩자율학습] 3장 실무에서 자주 사용하는 HTML 필수 태그 다루기(3.1-3.5)  (0) 2024.08.08
[코딩자율학습] 1장 Hello, HTML + CSS + 자바스크립트  (0) 2024.08.08
[길벗] 코딩 자율학습 HTML+CSS+자바스크립트  (0) 2024.03.10
  • Microsoft Visual Studio Code 설치 완료
  • 추천 확장 프로그램 설치 완료
    • Live server
    • Auto Rename Tag
    • HTML to CSS autocompletion
    • HTML CSS Support
    • Code Runner
  • 첫번째 HTML 문서 만들기 완료

'Study > HTML+CSS' 카테고리의 다른 글

[코딩자율학습] 3장 실무에서 자주 사용하는 HTML 필수 태그 다루기(3.1-3.5)  (0) 2024.08.08
[코딩자율학습] 2장 HTML 문서 작성을 위한 기본 내용 살펴보기  (1) 2024.08.08
[길벗] 코딩 자율학습 HTML+CSS+자바스크립트  (0) 2024.03.10

 

더 이상 미룰 수 없다. 코딩 공부를 하기로 마음 먹었다. 

 

네이버에서 티스토리로 블로그를 옮기다가 HTML+CSS의 존재를 알게 되었다.

구현해보고 싶은 페이지가 있어 이것저것 유튜브를 보며 시도해보다가

제대로 공부해보기로 하고 집근처 도서관에서 관련 서적들을 빌려와 비교.

길벗 출판사의 코딩 자율학습 HTML+CSS+자바스크립트를 선택하고 예스24에서 구매했다.

 

파이선 관련 수업을 학부 교양 수업으로 듣고 책을 보면서 독학을 해보긴 했지만,

코딩에 대해서 어느 정도 수준이냐고 물어보면 초급도 아닌 입문자.

코딩 자율학습 HTML+CSS+자바스크립트는나 같은 입문자들에게 딱 맞는 책이다. 

도서관에서 빌려왔던 5권의 책들 중 4권인 기초적인 코딩에 관한 지식이 있어야 

따라갈 수 있어 보였으나 이 책은 기초부터 차근히 잘 설명되어 있었다.

매우 기초적인 부분부터 나와있다보니 두꺼운 두께가 이책의 유일한 단점.

 

 

파트1 HTML, 파트2 CSS, 파트3 자바스크립트로 이루어져 있고 

파트4에서 이를 총괄하여 프로젝트로 웹 개발 기초를 완성할 수 있다. 

 

 

한 눈에 중요한 부분이 잘 보이게 책 편집이 잘 되어 있다.

표와 도식으로 정리가 잘 되어있어 쉽게 읽힌다. 

폰트와 폰트 사이즈, 줄 간격도 보기 쉽게 되어있다. 

 

코딩을 시작해보고자 하는 입문자들에게 추천한다. 

출판사에서 자율학습단도 운영하고 있으니

독학으로 공부하려는 사람들에게 최고의 선택지다.

'Study > HTML+CSS' 카테고리의 다른 글

[코딩자율학습] 3장 실무에서 자주 사용하는 HTML 필수 태그 다루기(3.1-3.5)  (0) 2024.08.08
[코딩자율학습] 2장 HTML 문서 작성을 위한 기본 내용 살펴보기  (1) 2024.08.08
[코딩자율학습] 1장 Hello, HTML + CSS + 자바스크립트  (0) 2024.08.08

+ Recent posts

티스토리툴바