코딩의 즐거움/HTML
-
[코딩4] html 제목 태그 <h1> ~<h6> & 문단태그 <p> & 줄바꿈 태그 <br>코딩의 즐거움/HTML 2020. 10. 9. 18:15
제목 태그 h1 ~ h6 h1 ~ h6까지가 제목을 나타내는 태그이다. body 태그 안에 내용 적고 적으면 아래와 같이 나타난다. h1에서 h6으로 갈수록 글자 크기가 점점 작아진다. 닫기 태그를 꼭 적어줘야 한다. 적었으면 뒤쪽에 슬러시를 넣어준 태그를 적어줘야 한다. 기본적으로 글자가 굵게 나타나며, 아래 한줄은 건너 띄고 다음 줄에 글자가 나타난다. h6까지 밖에 없으며 h7을 적으면 기본 글자크기로 나타난다. 문단 태그 이것도 마찬가지로 열리는 태그 뒤에 닫히는 태그도 있어야 한다. 내용 p태그는 paragraph 문단의 약자로 하나의 문단을 만들 때 쓰인다. 내용을 입력 후 저장한 다음 웹페이지를 열어보면 위와 같은 형태로 출력이 된다. p태그 다음에 나오는 글자는 한줄 띄고 그 아래에 나타난..
-
[코딩3] html 배경색 + 배경이미지 추가코딩의 즐거움/HTML 2020. 10. 7. 15:49
html 배경색 태그안에 bgcolor="색상이름" or bgcolor="색상코드"를 넣어주면 된다. 나는 red(색상이름) 컬러를 넣었다. 빨간색의 색상코드는 #ff0000 색상코드는 검색하면 쉽게 알 수 있다. 저장을 하고 웹페이지를 열어주면, bgcolor로 지정한 색상이 배경색으로 들어간 걸 확인할 수 있다. 색상코드 구성 맛보기 RRGGBB로 RED(빨간색) GREEN(초록색) BLUE(파란색)으로 구성 = RGB 각자리별로 16진수 사용 : 0~9 A~F 0에 가까울수록 어둡고 F에 가까울수록 밝아진다. ex) red(빨간색) -> #ff0000 white(흰색) -> #ffffff (f에 가까울수록 흰색이니 전체 f) black(검정색) -> #000000 (0에 가까울수록 어두우니 전체 0..
-
[코딩2] HTML 기본 구조 - title & body 실습코딩의 즐거움/HTML 2020. 10. 6. 11:33
위에 적힌 구조가 html의 기본 구조이다. 생략할 수 없고 늘 적어줘야 한다. 색깔별로 짝이다. 순서도 위와 같이 적어야 한다. 짝별로 잘 보면 아래쪽 글에 "/"가 들어가 있다. "/"가 들어가 있는 태그가 닫히는 태그이다. 저걸 빼먹으면 웹페이지가 이상하게 나타날 수 있으니, 꼭 신경써서 적어줘야 한다. 태그 안에 코딩의 즐거움이라는 글자를 입력했다. 에디트플러스나 아톰과 같은 html 편집기에 위 내용을 입력한 후 "구본구조.html"로 저장을 해준다. 파일이름은 달라도 되나 확장자 " .html " 틀리지말고 잘 적어준다. 저장한 파일을 더블클릭해서 열어준다. 나는 크롬으로 열었다. 웹페이지의 제목에 해당되는 부분에 입력한 내용이 나타나는 걸 볼 수 있다. 실습의 중요성. 정의를 읽는 것보다 실..
-
[코딩1] HTML 편집기 - 에디트플러스 EditPlus & 아톰 Atom코딩의 즐거움/HTML 2020. 10. 5. 14:58
코딩을 하기 위해서는 편집기가 필요하다. 메모장에다가 적어도 웹페이지 제작이 가능하나 편집기는 오타난 부분을 색으로 표시해주고 자동완성기능도 있기 때문에 작업하기가 훨씬 편하다 오늘은 내가 사용해본 편집기 두가지를 소개해보려고 한다. 먼저, 첫번째. 에디트플러스 EditPlus. 학원에서 사용하던 편집기 에디트플러스. 편집기에 스펠링을 쳐도 관련 언어가 자동으로 뜨지 않아서 공부하기에 좋다. 구글에 [에디트플러스]로 검색을해서 들어가면 아래와 같은 페이지가 나온다 주소는 www.editplus.com/kr/ 구입하기 아래의 편집기 5.3 다운로드나 최신 버그 패치 파일 5.3을 클릭해서 다운받으면 된다. 30일동안 평가판으로 이용이 가능하고 구매비용도 치킨한두마리가격으로 저렴한 편이다 코딩입문자라면 에디..