비전공자 IT 코딩독학 #7 : HTML 기초 1편 기본 태그

안녕하세요 길잃은 문돌이이예요.

오늘부터 HTML 강의를 들으면서 끄적끄적 글을 작성해볼까 합니다. 그래서 약간 문맥이 안맞거나 그러한 부분이 있는데, 너그러이 이해해 주시길 바랄께요. 저의 경우 , 인프런에 있는 생활코딩이라는 곳에서 HTML 강의를 듣고 있구요.

물론 유튜브에서도 또는 생활코딩 사이트에서도 들을 수 있습니다. 직장인 비전공자 IT 코딩독학 , 시작해보죠!

---

비전공자 IT 코딩독학 HTML 태그편

 

 

저는 HTML 강의는 생활코딩으로 듣고 CSS는 Seoul Wiz라는 강사분이 만든 CSS 강의를 들을 예정입니다. 

우선 HTML #1 부터 하나하나 글을 작성하면서 공부해볼께요!

 

1. HTML 기본 문법과 기본태그

 

HTML은 하이퍼텍스트 마크업이다.

마크업언어는 태그와 밀접한 관계가 있는 언어이다.

 

<태그>  :  시작태그 

</태그> :  닫힘태그

* HTML은 뛰어쓰기, 단락을 에디터에서 표시할 수 없다 (태그로만 가능하다)

>> <h1,2,3> 태그

>> <p> 태그

>> <br> 태그

 

오늘 배우는 것들

 

1. strong 태그

2. h 태그

3. a 태그

4. li 태그 (ol, ul)

1) <strong> 길잃은 문돌이 </strong>

→ strong 태그는 강조 표시, 진하게 표시

 

2) <h1> 길잃은 문돌이 </h1>

→ h1, h2 등 태그는 제목의 표시 +  줄바꿈까지 가능하다. 

그리고 h1이 가장 크며, h6이 가장 작다.

 

3) <a href = " "> 긿잃은 문돌이 </a>

→ a 태그는 하이퍼 링크를 표시 해주는 태그이며, 

 

속성 :

href = " "  : url을 지정해주어 해당 사이트로 접속이 가능

target = " _blank" : 클릭시, 새로운 탭이 열림. (생략시, 현재 창이 바뀜)

title = " " : 마우스 오버 형태로 이름을 표시.

 

4) <li> 길잃은 </li>

    <li> 문돌이 </li>

→ ㆍ형태로 구분으로 표시를 해주는 시각적으로 구별하는 태그

 

<ul> 

  <li> 길잃은 </li>

  <li> 문돌이 </li>

</ul>

 

→ul 태그는 unorder list로서, ㆍ형태로 구분하는 li랑 비슷하지만, 서로간의 구분이 가능하다 

<ol>

</ol>

 → ol태그는 order list로서,  1,2,3,4형태로 구분이 가능하다.

*li 태그는 단독으로는 그룹핑을 할 수 없다 . ( 띄어쓰기, 줄바꿈이 불가능하다)

 

 

 

오늘 겨우 시간이 1시간 밖에없어서, 1시간만이라도 오늘 한것들을 하나하나 기록해서

비전공자 IT 코딩독학 시리즈를 다시 한번 만들어볼까합니다. 물론, 진도가 직장인이다보니 매우매우 느리게 나가겠지만

하나하나 배움에 익숙해지고자 하는 심리도 있기에, 꾸준히 해봅시다! 아자아자! 

 

그럼 다음편도 HTML 오늘 하루 배운것들을 하나하나 배울 수 있도록 하겠습니다. 사실, HTML이 간단하게 하루 날잡고 보면 다 볼 수 있을듯하지만 제가 여러개의 블로그를 한번에 운영을 하다보니.. 확실히 글을 작성하면서 실습을 한다 생각하니 조금 더디긴 하지만 더 많은 배움이 있는거 같네요.

 

 

비전공자 IT코딩독학 #6 : 인프런 파이썬 강의 리뷰 (PART1)