[HTML&CSS] Day 1

42seoul이 끝난지 1개월... 함께 으쌰으쌰했던 언니들과 함께 앱 개발을 해보기로 했다. 하지만! 두둥탁!!! 지금까지 접해본 언어는 C언어 하나뿐이었기 때문에 앱개발을 위해 HTML, CSS, JavaScript를 새로 배워보기로 했다. 먼저 시작하는 것은 웹 문서를 만드는 언어인 HTML과 만든 웹 문서를 꾸미기 위한 CSS이다!
<Do it! HTML5 + CSS3 웹 표준의 정석>이라는 책을 발견해 이 책과 구글링을 통해 혼자 해보려고 한다.

편집기는 원래 사용하던 VS code를 사용할 예정이다.

HTML 문서의 기본 구조

<!doctype html>
<html>
	<head>  
    	<meta charset="utf-8">
        <title> HTML과 CSS </title>
    </head>
    <body>
    	<h1> Hello World </h1>
    </body>
</html>

<!doctypeㅤhtml>
먼저 가장 위에 쓰여있는 <!doctypeㅤhtml>은 현재 문서가 html로 쓰여진 웹 문서라는 뜻이다. 즉 문서 유형을 지정해 준다.
<html> ~ </html>
<html> 태그는 웹 문서의 시작을 알려주고, </html> 태그는 문서의 종료를 알려준다.
<head> ~ </head>
<head> 태그와 </head> 태그 사이에는 웹 브라우저에서 보이지 않지만 웹 브라우저가 알아야 할 정보를 담는다. 예를 들얼 <meta charset="utf-8">은 html의 문자들을 utf-8로 인코딩하라는 정보를 담고 있다. 이를 통해 우리가 문자를 깨지지 않고 볼 수 있게 된다.
<body> ~ </body>
<body> 태그와 </body> 태그 사이에는 실제 브라우저에 보여지는 내용을 담는다. 이 부분을 실제로 사용자가 보게 되는 것이다.

목록을 만드는 태그

순서 없는 목록 (unordered list)
<ul> ~ </ul> 순서가 필요하지 않은 목록임을 표시
<li> ~ </li> 각 항목을 표시

<ul>
  <li> 첫번째 내용 </li>
  <li> 두번째 내용 </li>
  <li> 세번째 내용 </li>
</ul>

첫번째 내용
두번째 내용
세번째 내용

순서 있는 목록(orderded list)
<ol> ~ </ol> 순서가 필요하지 않은 목록임을 표시
<li> ~ </li> 각 항목을 표시

<ol>
  <li> 첫번째 내용 </li>
  <li> 두번째 내용 </li>
  <li> 세번째 내용 </li>
</ol>

첫번째 내용
두번째 내용
세번째 내용

이 외에도 HTML에는 다양한 태그가 존재하지만 나는 이런 태그들을 다 외우지는 않을 것이다. 왜냐하면 우리는 필요한 태그가 있을때마다 검색을 하면 된다!

이 사이트에는 다양한 html 태그들이 많이 사용하는 순으로 정리되어 있다. https://www.advancedwebranking.com/seo/html-study/

Author And Source

이 문제에 관하여([HTML&CSS] Day 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gaeon/HTMLCSS

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다

[HTML&CSS] Day 1

HTML 문서의 기본 구조

텍스트 관련 태그 - (1)

텍스트 관련 태그 - (2)

목록을 만드는 태그

Author And Source

좋은 웹페이지 즐겨찾기