프로그래밍/HTML13 HTML이란 무엇인가?? 우리가 흔히 보는 웹페이지를 구성하고 있는 것이 HTML(Hypertext Markup Language,하이퍼텍스트 마크업 언어)입니다. 웹페이지를 통해서 보는 이미지, 텍스트, 링크 등 모든 것이 이 HTML을 통해 프로그래밍됩니다. HTML은 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 것이죠. 예를들어 한 페이지의 내용이 문단의 집합, 또는 목차로 이루어진 리스트인지, 이미지나 단어들을 강조하거나 크기를 변경하는 등 개발자가 의도한 바를 프로그래밍 하여 브라우저에 표현할 수 있도록 해줍니다. 여러분을 환영합니다!! 여러분을 환영합니다!! 2021. 11. 23. HTML_Tag : 11 <button> 버튼 태그, 버튼을 추가해보자!! 태그를 사용해 웹페이지에 버튼을 추가해봅시다. 버튼을 추가합시다!! 클릭! 2021. 11. 22. HTML_Tag : 10 List <ul><ol><li> 리스트, 목록을 표현할 때 사용하는 태그가 태그입니다. Html CSS JAVA Html CSS JAVA 은 unorder List로 순서가 없는 리스트입니다. 위 예제처럼 순서표현없이 나열만 하는 것입니다. Html CSS JAVA > Html CSS JAVA 은 Ordered List로 순서 표현과 함께 나열하는 것입니다. Html CSS JAVA Html CSS JAVA 2021. 11. 19. HTML_Tag 9 : <b>, <i> 태그 태그는 텍스트의 굵기를 굵게 만들어 글씨를 강조합니다. 안녕하세요 어서오세요 반갑습니다 안녕하세요 어서오세요 반갑습니다 태그는 텍스트의 각도를 기울입니다. Bold Italic Normal Bold Italic Normal 2021. 11. 18. HTML_Tag 8 : <pre></pre> 태그는 문서에 입력한 문장 형태 그대로 브라우저에 표현하는 태그입니다. 줄바꿈이나 공백, 탭 등 다른 태그를 쓰지 않고도 그대로 표현이 됩니다. 다만 정해진 고정폭 글꼴로 표현됩니다. pre태그는 줄바꿈 그리고 공백탭 등 다른 태그를 사용하지 않고도 입력한 내용이 그대로 표시됩니다. pre 태그는 줄바꿈 그리고 공백 탭 등 다른 태그를 사용하지 않고도 입력한 내용이 그대로 표시됩니다. 위 예제처럼 표현이 됩니다. 그래서 보통 독특한 텍스트나 프로그래밍 코드를 표현하는 곳에 쓰이곤 합니다. 2021. 11. 17. HTML_Tag 7 : <p></p> 문단 태그 문단을 나누는 태그입니다. 별다른 설명이 필요없죠. 사이에 문단에 포함될 내용들을 삽입하시면 됩니다. 2021. 11. 16. HTML_Tag 6: <img> 이미지 태그 태그는 웹페이지에 이미지를 삽일할 수 있는 태그입니다. 다른 설명은 딱히 필요없겠죠? 이 태그에 함께 쓰이는 요소들도 알아보도록 하겠습니다. src : 이미지의 경로 alt : 이미지의 경로가 잘못되었거나 찾을 수 없을 때 출력될 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지의 로딩 방식 loading의 경우 기본적으로 eager방식으로 문서에 포함되어 있는 모든 이미지를 불러옵니다. 반면 lazy방식의 경우 접속 시 모든 이미지를 불러오는 것이 아니라 화면 영역에 따라 이미지를 불러오는 방식입니다. 우리가 마우스를 드래그하여 아래로 화면을 이동하면 일정거리안에 있는 이미지들을 불러옵니다. 이는 필요에 따라 이미지를 불러옴으로써 웹 페이지의 속도를 올.. 2021. 11. 15. HTML_Tag 5 : <h1>~<h6> html 문서에서 텍스트의 크기나 글꼴 등을 따로 설정하지 않으면 기본 설정값으로 표현됩니다. 그래서 문서의 제목이나 중요한 내용에 사용하는 것이 바로 이 태그입니다. ~까지 있으며 숫자에 따라 텍스트의 사이즈가 달라집니다. 1이 가장 크며 숫자가 커질수록 작아집니다. 브라우저마다 크기가 약간의 차이가 있으니 참고하세요. 결과 빨강 주황 노랑 초록 파랑 남청 보라 결과에서 보다시피 태그는 태그를 사용하지 않아도 기본적으로 줄바꿈이 일어납니다. 2021. 11. 14. HTML_Tag 4 : <a> 하이퍼 링크 태그는 하이퍼 링크 태그입니다. 와 태그 사이에 이동할 링크를 추가하여 클릭시에 해당 웹페이지로 이동을 하게 됩니다. 유튜브로 시간때우러 고고 구글로 갈까?(새창으로 열기) href를 통해 마우스로 클릭 시 이동할 웹페이지의 주소를 추가합니다. 그리고 링크를 걸어둘 텍스트를 씁니다. target은 어떤 방식으로 해당 링크의 웹페이지를 열 것인지 설정하는 것입니다. 그 옵션들엔 아래와 같은 것들이 있습니다. _self: 현재창에서 연다(기본 설정) _blank: 새창으로 연다 _parent: 부모 페이지에서 연다. iframe 등이 사용된 환경에서 사용됩니다. _top: 최상위 페이지에서 연다. iframe 등이 사용된 환경에서 사용됩니다. 열고 싶은 프레임 이름. 프레임 이름을 직접 추가해서 해당 프레임.. 2021. 11. 13. HTML_Tag 3 : <br> 태그는 화면상에서 텍스트의 줄바꿈을 해주는 태그입니다. 이 태그가 아니라면 웹페이지의 가독성이 엄청 떨어지겠죠. 굉장히 굉장하게 간단하지만 그 쓰임은 이루말할 수 없는 태그입니다. 굉장히 고마운 녀석이죠. 2021. 11. 12. HTML_Tag 2 : <body> 태그는 태그의 쓰임처럼 문서의 몸을 표현합니다. 이 말인 즉슨 문서의 내용을 담당한다고 할 수 있습니다. 태그를 통해 브라우저 탭에 제목이 표시되듯 태그는 브라우저에 문서의 내용들이 보여집니다. 즉 텍스트나 다른 문서로의 하이퍼 링크, 이미지 등과 같은 모든 콘텐츠들이 태그 영역 내에 포함됩니다. 태그에는 아래와 같은 태그들이 포함됩니다. 다음 포스팅에서 위 태그들에 차례대로 알아보도록 하겠습니다. 2021. 11. 11. HTML_Tag 2 : <title> 오늘은 title 태그에 대해서 알아보도록 하겠습니다. title 태그는 말그대로 타이틀입니다. html 문서의 제목인것이죠. 지난 시간 배웠던 head 태그의 자식으로서 head태그 안에 title태그가 포함됩니다. html 문서가 어떤 걸 표현하고 있는지 또는 현재 웹사이트의 이름을 title 태그에 표기함으로써 브라우져 상단의 제목표시줄에 표시됩니다. 2021. 11. 10. 이전 1 2 다음 반응형
