[HTML/CSS] 특수한 글자 태그!! 일반적으로는 사용하지 않지만 특수한 경우 사용하게 되는 글자 태그를 다뤄 볼게요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 문서작성 기본태그!! [TIP/Blog] - [HTML/CSS] 폰트 사이즈 단위 아래 첨자 태그 태그 속성 속성값 비고 sub 보통 화학식 등에 사용됨 예) CO2 위 첨자 태그 태그 속성 속성값 비고 sup 제곱 등의 수학식에 사용됨 예) x2 일본어, 한자등의 표기 태그 속성 속성값 비고 ruby 루비문자 선언 rt 위에 쓰여질 작은 글자 rp ruby태그 의미 보강태그 rp태그는 HTML5에서 추가된 태그로 익스플로러9, 파이어 폭스, 오페라, 크롬, Safari에서 지원하며, 익스플로러8 이하에서는 지원하지 않을수도..
[HTML/CSS] 링크걸기 태그!! 흔히 하이퍼링크(Hyper link)라고 표현하며 직접 주소를 적지 않아도 클릭 만으로 이동 가능하도록 하는것으로 HTML에서는 태그를 사용해요. 태그는 Anchor의 약자로 배가 정박하기 위해 사용하는 닻이라는 뜻으로, HTML에서는 특정 위치로(닻을 내린 위치로) 쉽게 이동하기 위해 사용해요. 태그는 다른 페이지로 연결, 다른 페이지의 특정 위치, 현재 페이지의 특정 위치로 이동 할 수 있어요. 다른 페이지로 이동 태그 속성 속성값 비고 a href 파일명이나 URL 이동할 대상의 파일명이나 URL주소. href mailto:메일주소 메일을 받을 주소. target _self (기본값) _blank _top _parent 사용자지정 _self는 기본값이므로 생략해..
[HTML/CSS] ID속성, CLASS속성 CSS의 셀렉터를 효율적으로 활용하기 위해서 ID와 CLASS속성을 부여하는 방법은 반드시 알아야 해요. ID와 CLASS는 숫자만으로 이루어질수 없으며, 숫자로 시작할 수 없습니다. ID 속성 ID는 페이지 내에 있는 다른 요소들과 구분하기 위해 사용하는 고유의 이름. 한 페에지 내에 같은 ID를 사용하면 안되요. 예) 굵은 글씨 CLASS 속성 요소들을 묶어주기 위해 사용하는 이름. ID와 달리 같은 CLASS를 여러개 사용 할 수 있어요. 또한 띄어쓰기로 하나의 요소가 복수 CLASS를 사용할 수도 있어요. 예) 빨간색 예) 빨간 밑줄 w3스쿨js피들
[HTML/CSS] CSS란? CSS의 작성법 CSS란? 웹 문서의 스타일을 미리 정해둔 스타일시트로써 문서 전체를 일관성 있게 유지할 수 있으며 HTML을 그대로 둔체 CSS라는 옷을 입힘으로써 전혀 다른 페이지를 제공 할 수 있습니다. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 웹 문서의 개념 CSS의 작성법 CSS는 굉장히 단순한 구조를 가지고 있어서 초보자도 쉽게 코드를 작성 할 수 있어요. 다만 다양한 명령어가 있으니 그것들을 어떻게 조합 할 것인지는 본인의 역량에 따라 달라지겠죠? CSS는 간단히 셀렉터와, 선언 블록으로 구분되요. 앞서 CSS를 옷이라고 표현 했는데 "셀렉터(Selector)"는 누가 옷을 입을 것인지 대상을 선택하는 것이며, "선언 블록(Declaration..
[HTML/CSS] 폰트 사이즈 단위 앞서 기본 문서 작성에 필요한 태그들을 알아봤죠? 태그는 1~7까지의 글자 크기를 다루는데 매번 사이즈를 지정 해 줄수도 없고 좀더 세세한 사이즈가 필요로 하게됐죠. 그래서 폰트는 HTML보다 CSS에서 주로 사용하게 됩니다. 그런데 폰트 사이즈의 단위가 많다보니 헷갈릴 수도 있고, 어떠한 단위를 언제 써야 하는지 알아야겠죠? ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 문서작성 기본태그!! [TIP/Blog] - [HTML/CSS] HTML의 기본구조 [TIP/Blog] - [HTML/CSS] 웹 문서의 개념 HTML에서 속성을 style로 지정한것은 CSS로 아래 단위를 따라가게 됩니다. 티스토리 스킨처럼 HTML에 CSS를 함께 사용하는것이 아니라..
[HTML/CSS] 문서작성 기본태그!! 글을 쓸때 강조하기 위해 글씨를 굵게 하거나, 글자 색, 크기 등을 변경하죠? 흔히 블로그나, 카페 등에서는 문서작성의 편의를 위해 상단에 아이콘으로 제공하는 경우가 많아요. 그럼 상단의 메뉴에 대한 태그를 알아보도록 해요~ w3스쿨js피들 본문에는 사용방법에 대한 예시만 적어놨어요. 결과값들은 위에있는 html연습하는 링크를 타고 직접 작성해 보면 태그에 대한 이해가 훨씬 빠를거에요. 제목태그 태그 속성 속성값 비고 Hn align left 왼쪽 정렬 right 오른쪽 정렬 center 가운데 정렬 Hn에서 n에는 1~6까지의 숫자가 들어가요. 부터 큰 제목이며 는 가장 작은 제목이에요. Hn은 속성, 속성값을 생략하고 사용할 수 있습니다. 예) 이렇게 제목을 ..
[HTML/CSS] 주석달기! HTML의 태그가 많아지거나 다른사람과 함께 작업을 하게 될 경우 무엇인지 표기를 해줘야 헷갈리지 않고 수정할 수 있어요. 또한 테스트를 위해 태그를 일시적으로 사용하지 않게 할 때에도 주석을 사용할 수 있어요. w3스쿨js피들 이제 본격적으로 태그를 다루게 되는데 직접 연습 해 볼수 있도록 위에 링크를 걸어뒀어요. "w3스쿨"은 Try it Yourself를 누르면 연습할수 있도록 창이 열립니다. 여기는 HTML의 태그 종류에 대해서도 상세히(영어로ㅠㅠ) 쓰여있으니 참고해서 연습 하면 좋아요. "js피들"은 HTML과 CSS, JAVASCRIPT를 복합적으로 사용하여 결과물을 보여주므로 조금더 디테일하게 연습 하기에 좋아요. js피들은 안의 내용만 입력 하시면 되요. 와 ..
웹 문서의 개념 블로그를 제공해주는 많은 사이트가 있지만 제가 티스토리를 선택한 중요한 이유는 자유롭게 블로그를 꾸밀수 있다는 점이에요. 막상 티스토리를 시작해보니 마음대로 꾸미기가 마땅치 않음을 알게됐죠 ㅜㅜ 웹문서를 이루는 HTML을 다룰줄 알아야하죠. 조금더 다양하게 꾸미려면 CSS와 JAVA Script도 배워야해요~ 저는 전공자도 아니고 따로 배운적도 없기 때문에 제가 찾아보며 전문적이진 않지만 초보자도 따라 할 수 있도록 가능한 쉽게 설명을 해볼게요!! 웹 문서란? 출처 : http://blog.naver.com/dartplus/ 한눈에 이해하도록 디자인아트님 블로그에서 쉽게 설명을 해놨어요. HTML은 "바디" 즉 몸으로써 웹문서의 기준이 되며 CSS는 HTML의 폰트크기, 간격 등을 변경하..