반응형 프로그래밍/HTML5 태그 를 뛰어넘어라13 (HTML/HTML5) 2.서식태그 글자 크기 <sub><sup>태그 10~11/39 직전 포스트 복습 글자 가운데 줄긋기 3개 - del태그 s태그 strike태그 글자 밑줄 4개 - ins태그 abbr태그 acronym태그 u태그 del태그는 ins 태그와 짝지어 사용 strike태그 와 acronym태그 이제 그만! 글자 줄긋기 태그 7개는 5개로 줄어든다. del태그 s태그 ins태그 abbr태그 u태그 이전의 강의를 간략하게 줄이면 위와 같다. 서식태그 글자 크기 태그에 대해서 알아보자. 글자-크기 태그는 서식태그39중에 4개가 있다. 아래 그림을 보면 간단히 알 수 있다. 1-1.html - 태그 정리 의미/역활 :글자 크기를 작게해서 보통 화학공식이나 수식에 사용된다. 사용법 : 와 사이에 넣어 주기만 하면 된다. 2-1.html - 태그 정리 의미/역활 :글자 크기를 크게 .. 2019. 4. 9. (HTML/HTML5) 2.서식태그 글자 줄긋기 <del><ins><s><strike><abbr><acronym> 태그 4~9/39 직전 포스트 복습 글자의 스타일을 변경해서 그 내용을 강조하는 방법 5가지 서식태그의 5가지 원형 글자 굵기, 글자에 줄긋기, 글자 크기, 글자서체 , 글자 배경색 글자 굵기 변경 태그는 b , strong , hn 태그 이전의 강의를 간략하게 줄이면 위와 같다. 서식태그 글자 줄긋기 태그에 대해서 알아보자. 글자-줄긋기 태그는 서식태그39중에 7개가 있다. 아래 그림을 보면 간단히 알 수 있다. 1-1.html - 태그 정리 의미/역활 :글자를 관통하는 줄긋기를 해서 취소 혹은 삭제의 느낌을 주고자 할 때 사용 사용법 : 와 사이에 넣어 주기만 하면 된다. 1-2.html - 태그 한 걸음 더 일반적으로 우리가 홈페이지나 싸이트를 구축할 때 거의 사용하지 않는다. 취소선 사용하느니 그냥 지우고 새로 텍.. 2019. 4. 6. (HTML/HTML5) 2.서식태그 원형5가지와 <b> , <strong> 태그 1~2/39 직전 포스트 복습 html을 시작하면서 가장 기본적인 태그 10개에 대해서 알아보았다. 이제 부터는 일명 서식태그에 대해서 알아보고자 한다. 전체 서식태그는 총 39개이다. 굉장히 많은 것 같지만 몇 가지 분류만 해보면 크게 어렵지 않다. 이번 포스트에서는 서식태그 기본원형에는 어떤 것들이 있는지 알아보자. 일종의 분류의 기준을 정한다고 생각하시면 된다. 기준 5가지는 1.글자 굵기 2.글자 에 줄긋기(밑줄,관통, 아쉽게도 윗줄이란건 없다.) 3.글자 크기 4.글자 서체 변형 5.글자 배경색 이렇게 기본형 5가지이다. 그럼 왜 이렇게 글자의 모양, 즉 스타일을 바꿀까? 목적은 당연히 강조의 의미다. 똑같은 것들이 반복되는 와중에 튀는거 한 두개 나오면 당연히 강조이지 않는가. 전체 39개 중에서 37개는.. 2019. 3. 28. (HTML/HTML5) 1.기본태그 <!-- ... --> 10/10 직전 포스트 복습 hr은 줄 바꿈 태그이다 CSS를 이용하여 좀 더 다양하고 멋지게 할 수는 있다. 그런데 많이 쓰일까? 기본적인 것 몇 가지만 알고 있자. 바로가기☞ (HTML/HTML5) 1.기본태그 hr 태그 이전의 강의를 간략하게 줄이면 위와 같다. 주석- 태그에 대해서 알아보자. 주석-태그는 기본태그 10개 중에서 10번째에 있다. 아래 그림을 보면 간단히 알 수 있다. 1.html태그 간단 정리 의미/역활 :코드설명 및 간단한 메모 사용법 : 사이에 적고 싶은 말을 넣어 주기만 하면 된다. 2.html태그 한걸음 더. 주석태그는 크게 어렵지 않다. 화면에 보이지 않는 간단한 메모라고 생각하면 된다. 혼자서 개발하거나 코드 길이가 짧을 때는 잘 적지 않는다. 왜? 보면 아니까! 그러나 내가 작성.. 2019. 3. 26. (HTML/HTML5) 1.기본태그 <hr> 9/10 직전 포스트 복습 br은 줄 바꿈 태그이다 바로가기☞(HTML/HTML5) 1.기본태그 br 태그 8/10 이전의 강의를 간략하게 줄이면 위와 같다. hr- 태그에 대해서 알아보자. hr-태그는 기본태그 10개 중에서 9번째에 있다. 아래 그림을 보면 간단히 알 수 있다. 1.html태그 간단 정리 의미/역활 :분기점 및 이전 주제와 새로운 주제를 구분 사용법 :수평구분선을 넣어주고 싶은 곳에 를 넣어 주기만 하면 된다. 2.html태그 한걸음 더. 주제를 구분하기 위하여 수평구분선으로 사용한다. 라고 끝내기엔 뭔가 아쉽다. 저 얇은 수평선을 두껍게 한번 해보자. 재미난 것을 볼수 있다. 수평선은 실제 얇은 한 줄이 아니라. 저렇게 2가지의 색상으로 감싸는 모양으로 디자인 되었다. 선을 감싸는 테두리 두.. 2019. 3. 26. (HTML/HTML5) 1.기본태그 <br/> 8/10 직전 포스트 복습 p 태그는 문단을 나타낸다. 웹문서를 구조화 할 수 있는 p 태그를 적극사용하자 이전 내용바로가기☞ (HTML/HTML5) 1.기본태그 p 태그 이전의 강의를 간략하게 줄이면 위와 같다. br- 태그에 대해서 알아보자. br-태그는 기본태그 10개 중에서 48번째에 있다. 아래 그림을 보면 간단히 알 수 있다. 1.html태그 간단 정리 의미/역활 :줄 바꿈 사용법 :줄 바꿈 해주고 싶은곳에 를 넣어 주기만 하면된다. 2.html태그 한걸음 더. 그냥 말 그대로다 줄 바꿔주는 태그이다. 고민 할 필요가 없다. 그냥 사용하면 된다. 괜히 br태그를 CSS에서 프로퍼티 변경해서 쓸려고 하지마시길. 물론 할 수 있으나 인력낭비다. 3.html태그 최종정리 br은 줄 바꿈 태그이다 다음챕터에서.. 2019. 3. 26. (HTML/HTML5) 1.기본태그 <p> 7/10 직전 포스트 복습 h1 ~ h6 태그는 제목을 나타낸다. 단순히 강조의 용도로 사용하지 말 것. h1 ~ h3 태그를 사용하여 검색순위를 높이자. (HTML/HTML5) 1. h1 ~ h6 기본태그 이전의 강의를 간략하게 줄이면 위와 같다. p- 태그에 대해서 알아보자. p-태그는 기본태그 10개 중에서 7번째에 있다. 아래 그림을 보면 간단히 알 수 있다. 1.html태그 간단 정리 의미/역활 : 문단을 나타낸다. 사용법 : 와 사이에 적힌 내용이 문단이 된다 2.html태그 한걸음 더. 낱말들이 모여서 구성된 문장들은 다시 하나의 소주제문을 중심으로 일종의 집합을 형성하게 되는데, 이러한 문장들의 집합을 단락 혹은 문단이라 부른다. 이러한 정의는 사람은 인식할 수 있으나 웹브라우져는 인식할 수 없다... 2019. 3. 25. (HTML/HTML5) 1.기본태그 <h1> ~ <h6> 6/10 직전 포스트 복습 body태그는 화면에 보이는 부분이다. 어떤 콘텐츠를 넣을지, 콘텐츠간의 포함관계를 결정 디자인에 관한 내용은 전부 CSS에서 결정함. 폰트크기,폰트종류,폰트기본색,배경색깔 정도를 작성함. (HTML/HTML5) 1.기본태그 body 5/10 바로가기 이전의 강의를 간략하게 줄이면 위와 같다. h1 ~ h6 태그에 대해서 알아보자. h1 ~ h6 -태그는 기본태그 10개 중에서 6번째에 있다. 아래 그림을 보면 간단히 알 수 있다. 1.html태그 ~ 간단 정리 의미/역활 :제목을 나타내는데 쓰인다. 사용법 : 와 사이에 적힌 내용이 제목으로 표시된다. 2.html태그 ~ 한걸음 더. h1 ~ h6 태그는 기본적으로 글자 굵기( bold ), 글자크기( font-size ) , 줄바꿈(.. 2019. 3. 25. (HTML/HTML5) 1.기본태그 <body> 5/10 직전 포스트 복습 1)head태그 안에 포함시킨다. 2)웹페이지의 제목이며 툴바에 표시된다. 3)검색사이트가 웹페이지를 찾기 위한 기본 중에 기본이다. 반드시 꼭 적을 것. 이전의 강의를 간략하게 줄이면 위와 같다. body- 태그에 대해서 알아보자. body- 태그는 기본태그 10개 중에서 5번째에 있다. 아래 그림을 보면 간단히 알 수 있다. 1.html태그 간단 정리 의미/역활 : 실제 눈에 보이는 작업공간이다. 사용자에게 보여주고 싶은 내용들을 이곳에 넣어두면 된다. 사용법 : 와 사이에 적힌 내용이 화면에 표시된다 2.html태그 한걸음 더. 이 공간에서 작업이 이루어진다. 라고 간단하게 설명했다. 마치 모든 것이 해결될 것 같은 느낌으로 말이다. 그러나 사용자에게 보여주고 싶은 내용 즉 컨텐츠.. 2019. 3. 25. (HTML/HTML5) 1.기본태그 <title> 4/10 직전 포스트 복습 1. 화면에 보이지 않는 정보들을 담는 바구니. 2. 바구니에 들어가는 태그는 7개 2-1） title 2-2） style 2-3） script 2-4） noscript 2-5） base 2-6） link 2-7） meta 이전의 강의를 간략하게 줄이면 위와 같다. head태그에 들어가는 title-태그에 대해서 알아보자. title-태그는 기본태그 10개 중에서 4번째에 있다. 아래 그림을 보면 간단히 알 수 있다. 1.html태그 간단 정리 의미/역활 : 말그대로 문서의 제목을 나타낸다. 사용법 : 밑에 포함시키면 된다. 와 사이에 적힌 내용이 툴바에 표시된다 2.html태그 한걸음 더. 우리가 작성한 웹페이지는 거의 대부분이 검색사이트를 통해서 발!견! 된다 해도 무리가 없다. 왜.. 2019. 3. 24. (HTML/HTML5) 1.기본태그 <head> 3/10 직전 포스트 복습 1. 태그는 웹페이지의 시작점이자 최상위 태그이다. 2. html 파일을 만들면 12345678910 cs 을 기본으로 넣어주자 3.사용법은 ctr+c ctr+v 이전포스트 바로가기 [프로그래밍/HTML5 태그 를 뛰어넘어라] - (HTML/HTML5) 1.기본태그 2/10 이전의 강의를 간략하게 줄이면 위와 같다. 이번에는 태그에 대해서 알아보자. 태그는 기본태그 10개 중에서 3번째에 있다. 아래 그림을 보면 간단히 알 수 있다. 1.html태그 간단 정리 의미/역활 : 화면에 보이지 않지만 문서전체에 영향을 미치는 정보를 에 담는다. 바구니 같은 역할이다. 사용법 : 아래처럼 사용하면 된다. 아래 그림에서 볼 수 있듯이 실제 문서전체에 영.. 2019. 3. 23. (HTML/HTML5) 1.기본태그 <html> 2/10 직전복습 는 문서의 유형을 웹브라우저에서 알려주는 역할을 한다. 작성자 : “웹브라우져야 이 문서는 html문서규칙에 따라 작성되었으니 준비해라!!!” 웹브라우져 : “네” 사용법은 ctr+c ctr+v 작성포스트 바로가기 이전의 강의를 간략하게 줄이면 위와 같다. 이번에는 태그에 대해서 알아보자. 태그는 기본태그 10개 중에서 2번째에 있다. 아래 그림을 보면 간단히 알 수 있다. 1.html태그 간단 정리 의미/역할 : 웹브라우저에게 “여기서부터 이제 시작한다.” 라고 시작점을 알려준다. 사용법 : 바로 밑에 적어주면 된다. 정말 쉽다.사용법 : 바로 밑에 적어주면 된다. 정말 쉽다. 참고로. lang속성은 이 문서의 내용이 한글로 작성되었다는 것을 알려준다. 안 적어도 무방하다. 그러나 검색사이트에.. 2019. 3. 23. (HTML/HTML5) 1.기본태그 <!DOCTYPE> 1/10 html태그에는 크게 131개의 태그가 있다. 처음으로 공부하려는 사람에게는 그자체가 상당한 압박이다. 갑자기 포기하고 싶어진다. 그러나 쪼끔만 더 들여다 보면 131개의 태그가 1.몇개의 그룹으로 묶을수 있고 2.몇몇개는 함께 사용해야 비로소 유의미 해지는 것도 있다. 3.심지어 사라진것도 있다.(솔직히는 대체 됨.ㅜㅜ) 그러니 차분하게만 따라간다면 모두 알아가는데 그리 오랜 시간이 걸리지 않을 것이다. 첫번재 그룹는 바로 기본태그 10개가 있다.(사람마다 혹은 책에 따라 그룹으로 묶는게 조금씩 다를수 있으나 거의 대부분은 비슷비슷하다.) 아래는 이미지는 기본태그 10개다. 큰그림을 보고 세부적으로 간다. 오늘부터 시작! html태그 간단 정리 의미 : 이 문서는(웹페이지는) html5의 규칙에 따라 .. 2019. 3. 15. 이전 1 다음 반응형
