[HTML/CSS] 이미지 넣기 태그!! 이미지는 웹 문서를 한눈에 파악하기 쉽도록 해주는 가장 중요한 매체로 웹 페이지에서 텍스트와 함께 가장 많은 부분을 차지하기 때문에 반드시 알고 있어야해요. 이미지 삽입 태그 태그 속성 속성값 비고 img src 파일명이나 URL 이미지 파일의 경로와 파일명 혹은 URL alt 이미지 설명 이미지에 대한 대체 텍스트 border 테두리 지정 테두리선 두께 지정 align left / right 등 정렬 top/middle/bottom/left/right 지정 width 숫자 / % 등 너비 이미지의 가로크기 height 숫자 / % 등 높이 이미지의 세로크기 hspace 좌우 여백 숫자 이미지의 좌우여백 vspace 상하 여백 숫자 이미지의 상하여백 * alt 속..
[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] 수평선 긋기 태그!! 태그는 수평선을 그어주는 태그입니다. Horizontal Rules의 줄임말이며 속성을 통해 형태의 변화를 줄 수 있어요. 수평선 태그 태그 속성 속성값 비고 hr size 굵기 숫자로 표현함 width 길이 px, %등의 단위 align 정렬방식 left, right, center color 색상코드 red, FF0000 등의 색상코드 noshade 입체감 없는 수평선 태그는 종료태그 없이 사용되며 ... 이렇게 열고 닫지 않고 사용되요. hr태그는 무조껀 화면 끝까지 가기 때문에 정렬(align)을 하기 위해선 길이(width)를 조절해줘야 합니다. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 문서작성 기본태그!! w3스쿨js피들
[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피들은 안의 내용만 입력 하시면 되요. 와 ..
독타입 선언하기!! DOCTYPE은 Document Type의 줄임말로, 이 문서가 어떠한 HTML 버전을 사용하고 있는지를 인터넷 브라우저에게 알리며 해당 버전의 방식대로 해석하라는 선언문이에요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 웹 문서의 개념 [TIP/Blog] - [HTML/CSS] HTML의 기본구조 독타입의 위치 문서 내용 HTML의 기본구조에서 배웠던 보다 더욱 먼저 사용되어야할 태그가 독타입선언이에요. 독타입선언에 따라 웹문서의 형태가 달라질 수 있으니 웹표준을 지키기 위해서는 꼭 해야할 필수 조건이라고 볼수 있어요. 독타입의 종류는 크게 3가지 있으며, HTML5 / HTML4.1 / HTML1 버전별로 선언 방식도 달라요. 독타입의 종류 1. Strict 엄격모..