독학하는 학생의 정리노트

독학하며 정리노트를 올리는 학생 공부 블로그입니다.

IT 프로그래밍/HTML & CSS

생활코딩, HTML 기초 - 1

공부 안 하는 학생 2020. 11. 4. 12:24

프로젝트를 해야하는데 주제가 할로윈인 웹페이지를 만드는 것이다. 언어는 javascript(자바스크립).. 일단 기초는 생활코딩에서 보자! 물론 귀찮아서 안했고 기간은 끝났다 (어렵지 않다고 하네요)

HTML = HypterText Markup Language

https://atom.io 에디터를 이용해 실습을 합니다. 일러가 넘 이쁘네요

 

폴더 디렉토리를 정하고 파일을 만들 떄, html에 확장자인 .html를 파일 이름에 써준다.

예 ) 1.html = 실제이름 : 1 , 파일 종류 : html

주소창에 주소를 입력하는 이유는,

A) 내 컴퓨터가 아닌 저 주소에 해당되는 다른 컴퓨터에 저장되어 있는 웹 페이지를 여러분이 읽고 싶을 때, 주소를 입력한다.

태그들 : 

***<> 태그를 쓰고 원하는 글 끝에 </>를 쓴다.***

  • 강조/진하게 하고 싶을 경우 원하는 글 앞에 <strong> 태그를 쓴다
  • 밑줄을 칠 때에는 <u> 태그를 쓴다.
  • 제목을 쓸때는 <h>를 사용한다 <h1>~<h6>까지 밖에 없고 숫자가 커질수록 글자 크기가 작아진다.
  • 줄바꿈을 원할 때에는 <br>을 쓴다. 이 태그는 열린/닫힌 태그가 따로 없다. 두번쓰면 여백에 줄이 생긴다.
  • 단락을 원할 때는 <p>를 쓴다. 이 태그는 열린/닫힌 태그가 있다. 문단을 나눌때에는 이 태그가 유용하다.

웹사이트에 사진을 넣고 싶다면 <img>를 쓴다.

<img src="" width=""> 뭔가 되게 복잡해보이는데 별거 없다. 태그가 태그만으론 부족할때 attribute 즉 속성이라는 것을 이용해 더 많은 정보를 넣어준다. src은 source에 줄임말이고 width은 말 그대로 크기를 의미한다.

예) <img src="coding.jpg" width="100%">

-----여기까지 강의 1~11-------

아..이 뒤에 썼던걸 저장을 안해서 날라갔네요 아.. 이상 공부 안 하는 학생이였습니다..

'IT 프로그래밍 > HTML & CSS' 카테고리의 다른 글

생활코딩, 기초 HTML - 2  (0) 2020.11.05