HTML 기초 내용 정리 - 1

동아리에서 진행하는 프로젝트를 시작하게 되었다. 나는 웹이 처음이라서 이렇게 공부할 거리를 주셨는데 일요일까지라 슬슬 시작해보려 한다!

이렇게 할일을 주셔서..! 공부 시작이다

강의는 아래 링크에서 볼 수 있다.

https://opentutorials.org/course/3084

WEB1 - HTML & Internet - 생활코딩

실습환경을 준비하는 과정은 우선 atom을 까는 것으로 시작한다. 구글에 검색하면 쉽게 다운받을 수 있다.

강의에서는 file - open folder을 하니 옆에 폴더 창이 생기던데 나는 안생겨서 그냥 save as ..로 저장했다. (ctrl + s)로도 저장 가능하다!

 

이렇게 입력하고 저장하면

바로 웹 페이지에 반영이 된다.

 

그리고 태그에 관한 내용은 상당히 간단하다.

 

strong은 굵게, u는 underline 즉 밑줄을 그어준다.

<h1>태그는 글씨 크기를 바꿔준다. 1~6까지 설정 가능하다. 그리고 줄바꿈도 해준다.

 

줄바꿈만을 목적으로 사용하는 태그도 있다. <p>와 <br>태그이다. 두 태그의 차이점은 아래와 같다.

내용이 간단해서 위 사진만으로도 이해할 수 있을것이다.

이렇게 그림도 넣고~

만약 아래와 같이 목차를 만들고 싶은경우에는 두가지 방법이 있다.  바로 ul과 ol이다.

우선 아래 그림을 보자

위와 같이 코드를 작성하는 경우 오른쪽과 같이 웹페이지가 나온다. 우리는 1,2,3이 붙은 리스트와 league of legends를 다른 범주의 목록으로 작성하고 싶다. 이런 경우 사용하는 것이 ul과 ol이다. 사용법은 간단하다. 그냥 감싸주면 된다.

ol은 Ordered List, ul은 Unordered List의 약자이다.

 

최종적으로 코드의 형식은 위와 같이 되어야 한다.