본문 바로가기

html 쉽게 배우기

16. id와 class _ 선택자 id와 class는 선택자입니다. 이름을 부여한다 생각하면 쉽습니다. 사람의 경우 이름으로 딱 그사람을 지칭합니다. 이것이 태그에서는 선택자입니다 선택자를 가지고 css를 입히거나 javascript로 동작을 제어합니다. id와 class는 태그에서 여는 부분에 넣어 줍니다. id id와 class 모두 선택자이지만 가장 큰 차이점은 사용 횟수 입니다. id는 html문서 안에서 딱 한번만 사용 가능합니다. 하나의 요소만 선택할 수 있지요. class class는 한 html문서에서 복수사용이 가능합니다. 고로 여러 요소들에게 동일한 무언가를 부여할때 사용할 수 있습니다. id, class 표기법 id와 class의 표기법에는 대표적으로 카멜 표기법과 스네이크 표기법이 있습니다. 생김새를 본따 지은 이름.. 더보기
15. block태그, inline태그 block태그는 쉽게말해 박스형식으로 차곡차곡 쌓는 태그, inline태그는 한줄로 쭉- 늘어놓은 태그입니다. 일단 block태그의 대표 div와 inline태그의 대표 span의 표시법을 봅시다. 여타 다른 태그들과 다를바 없는 짝궁을 달고 다니는 태그입니다. block태그 앞에서 말했듯이 block태그는 박스형태의 태그를 뜻합니다. 자신의 자리를 차지하고 나면 자신의 크기를 뺀 여백이 남는데 이 여백의 크기에 상관 없이 block태그는 무조건 줄이 바뀝니다. 한마디로 자동으로 단락이 나누어집니다. 또한 block태그는 크기지정이 가능합니다. 여백도 마음대로 지정가능합니다. block태그에는 div, h태그, p, form, list태그 등이 있습니다. 눈으로 확인하면 더 이해하기 쉽습니다. (뒤에 붙.. 더보기
14. select태그 _ 목록 선택 select는 목록을 선택하는 태그입니다. 자주 쓰이는 셀렉트바를 생성합니다. 우리가 흔히 태어난 년도를 선택할때나 살고있는 도시를 선택할때 쓰는 태그입니다. 기본형을 봅시다. 선택지1 선택지2 selected 앞에서 본 radio나 checkbox와 마찬가지로 처음부터 선택지를 기본값으로 선택이 가능합니다. 선택하고자 하는 option 뒤에 selected를 넣어줍니다. 똑같은 select에 selected를 넣었을때와 넣지 않았을때를 비교해 봅시다. 선택 딸기 바나나 선택 딸기 바나나 선택 딸기 바나나 선택 딸기 바나나 optgroup optgroup은 선택지를 구분해주는 역할입니다. 각각의 option들을 그룹지어야 할 경우 사용합니다. 선택 딸기 바나나 당근 오이 선택 딸기 바나나 당근 오이 mu.. 더보기
13. button태그 _ 버튼 생성 button태그는 버튼을 생성해 줍니다. input에서 button타입을 썼을때와 마찬가지로요. button태그는 input과는 달리 짝궁으로 열고 닫는 태그입니다. 생긴건 같아도 두개의 가장 큰 차이점은 여기에 있습니다. button은 과 사이에 텍스트를 넣을 수 있고 다른 태그도 넣을 수 있어서 다양하게 커스텀이 가능합니다. 한마디로 꾸미기 쉽습니다. button name type button에도 type이 있으므로 적어줘야 합니다. 일반적인 기능의 button은 type="button"을 넣어주는데요. 이 태그를 넣어주지 않으면 이 버튼은 기본값을 받아 type이 submit으로 나옵니다. 보기에는 차이가 없어 보입니다. 하지만 기능적으로 차이가 있으니 꼭 넣어 줍시다. 전 button이에요 전 s.. 더보기
12. input태그 _ form 요소 input태그는 사용자가 입력한 정보를 저장해서 보내주는 form을 이루는 요소중 하나입니다. form element는 단순하게 form태그 안에 들어가는 요소들이라고 보면 되는데요. input은 그 중 가장 다양한 폼을 가진 태그입니다. input은 상당히 단순한 형태이지만 type에 따라 여러가지 폼들이 나타납니다. 일단 기본형을 확인해볼까요. text input의 가장 기본 타입인 text입니다. 우리가 흔히보는 텍스트를 입력하는 폼이 이것입니다. 가끔 이 텍스트박스에 글자가 미리 입력되있는 경우가 있는데요. value와 palceholder로 나뉩니다. 간단히 보자면 value는 클릭후 글자 입력시 수동으로 글자를 지워야 하고 placeholder는 클릭후 글자를 입력하면 자동으로 글자가 사라집니.. 더보기
11. table태그 _ 표 태그 table태그는 표를 만들어주는 태그입니다. 옛날 테이블코딩 때문에 테이블 자체가 웹표준에 어긋난다고 알고 있는 분들이 간혹 있는데요. 표가 필요하면 table 써야죠. 어쩌겠어요. 웹표준에 맞게 쓰시면 됩니다. 알아봅시다. 제목1 제목2 제목3 내용1 내용2 내용3 tr, th, td tr태그는 행을 만들어 주는 태그입니다. tr들이 주르륵 모이면 열이 되지요. tr 안에는 th와 td로 채워져 있습니다. th는 제목을 나타내는 셀, td는 내용 셀입니다. caption caption은 표 전체의 제목 태그입니다. table태그를 열자마자 제일 위에 위치해야 합니다. 따로 값을 주지 않으면 가운데 정렬로 나타나지요 caption이 들어가면 어떻게 보이는지 확인해 봅시다. 참고로 table뒤에 붙는 bo.. 더보기
10. ul태그, ol태그, dl태그 _ 리스트태그 ul태그, ol태그, dl태그는 리스트 태그입니다. 줄줄이 비엔나로 생긴 애들을 만들어주는 태그에요 각각 조금씩 다른 특성이 있습니다. ol ol은 순서가 있는 리스트를 나타냅니다. 리스트 앞부분에 순서대로 번호가 매겨집니다. 예를 들면 인기 순위라던지 번호가 있는 안내문 같은데 쓰이겠네요. ol태그는 li태그를 넣고 다니는데 반드시 ol태그를 열고 난 바로 뒤에 li태그가 나옵니다. '리스트태그 > li태그 > 그외 태그 및 텍스트' 이런 순으로 써야하죠. 나는 리스트 태그야 순서가 있지 번호가 생겨 나는 리스트 태그야 순서가 있지 번호가 생겨 ul ul은 딱히 순서가 필요없는 리스트에 쓰입니다. 리스트 앞부분에 번호대신 글머리 기호가 나타납니다. 글머리 기호는 여러가지로 변경할 수 있는데 뒤에 css.. 더보기
09. a태그 _ Links a태그는 사이트나 특정 위치로 이동시켜주는 태그입니다. a태그는 이미지, 글자 어디든 걸어줄 수 있어요. 기본 형태는 아래와 같습니다. 링크를 걸어주세요! target url에는 지난번에 나온 절대경로, 상대경로 모두 넣어줄 수 있습니다. 별다른 코드를 넣지 않으면 현재 열린 창 내에서 이동하게 되는데요. 본래의 창을 유지한채로 새창을 띄우고 싶을때 쓰는 태그가 target입니다. target에 _blank를 써줌 됩니다. 새창으로 띄워주세요~ 이제 실제 예시를 들어볼까요. '네이버를 현재 창에서 열꺼야' 라는 글자를 클릭하면 현재 창에서 naver로 이동, '구글을 새창으로 열꺼야' 라는 글자를 클릭하면 새창띄우기로 google로 이동하도록 해보겠습니다. 네이버를 현재 창에서 열꺼야 구글을 새창으로 열.. 더보기
08. 파일경로 _ 절대경로, 상대경로 이미지를 불러오거나 페이지를 이동할때 필요한 경로에 관한 내용입니다. img태그에서 http://ododog12.com/img/img/img_tv.png 라는 파일경로를 사용했었는데 이는 흔히 쓰이는 절대경로입니다. 우리가 사이트에 접속할때 사용하는 경로로 익숙한 형태입니다. 이 경로 외에도 좀 더 간편하게 내 서버내에서 사용할 수 있는 경로가 상대경로입니다. 상대경로는 나 자신의 위치를 기준으로 움직입니다. 1. 같은 폴더 안 같은 위치에 있는 파일 file1처럼 나와 같은 선상에 동등하게 들어있는 파일의 경우 거치는 곳 없이 바로 파일명을 써주면 됩니다. 이 경우 경로는 그냥 'file.. 더보기
07.img태그 _ Images Img태그는 말그대로 이미지를 불러오는 태그입니다. 파일경로를 이용해 이미지를 화면에 출력합니다. 이 태그는 다른 태그들과 달리 혼자 닫는 태그입니다. 상당히 심플합니다. 다른 태그들은 내용 이렇게 생긴 반면에 img태그는 짝궁이 붙지 않고 혼자 /로 닫아줍니다. src 속성 이곳에 이미지의 경로를 넣어줍니다 경로에는 절대경로와 상대경로가 있는데 (이 다음번에 자세히 설명합니다.) 이 경로를 따라가 이미지를 출력합니다. 참고로 아래에 http://... 는 절대경로입니다. TV 입니다. alt 속성 alt에는 이미지의 설명을 넣어줍니다. alt는 이미지를 보지 못하는 경우에 이미지의 쓰임새 및 내용을 알려줍니다. alt태그는 웹표준을 지킬때 꼭 들어가야 하는 필수요소로 img태그와는 항상 같이 다니는 짝.. 더보기
06. strong태그, em태그 _ paragraph 구성요소 의미에 따라 사용하는 텍스트 요소입니다. 텍스트 요소들 중에는 의미를 부여하는 태그가 있는 반면, 외적인 요소만 바꿔주는 태그도 있습니다. 밑에 strong과 em은 외적인 부분도 바꿔주지만 의미도 부여하는 태그입니다. strong (vs b) strong 태그는 문장내에서 단어나 문장의 중요도를 나타내는 태그입니다. strong 태그를 사용하면 굵게 강조된 서체가 나오고 강조의 의미로 리더기에서도 강조해서 읽어줍니다. 반면 b를 사용하면 표면상으로는 똑같지만 강조의 의미가 없습니다. 아래서 strong태그와 b태그가 똑같이 표현되는걸 확인해 보세요. 의미있는 강조 태그에요! 야매로 모양만 바꿔줘요! 의미있는 강조 태그에요! 야매로 모양만 바꿔줘요! em (vs i) em태그도 강조태그 입니다. 대신 e.. 더보기
05. p태그 _ paragraphs p태그는 문단을 담는 태그로 p태그 하나당 하나의 챕터로 보시면 됩니다. 각각의 문단을 나눠주는 역할을 합니다. 일반적으로 설명이나 기사 등이 들어가는 부분에 사용합니다. 문단의 스타일을 구성하기 위해 br태그와 pre태그가 쓰이기도 합니다. p p태그는 따로 크기를 지정하지 않으면 블록으로 100%를 차지합니다. hello world! hello world! hello world! hello world! This is a paragraph hello world! hello world! hello world! hello world! This is a paragraph br html에서는 엔터를 아무리 많이쳐도 줄바뀜이 생기지 않습니다. 스페이스도 딱 한칸만 먹어요. 그럴때 사용하는게 br태그입니다. 줄을.. 더보기
04. h태그 _ headings h태그는 제목을 나타내는 태그입니다.h* - 1~6까지의 숫자가 쓰이며 숫자가 작을수록 상위 제목을 나타냅니다. This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 각 숫자에 따라 크기가 지정되어 있으며 bold처리 됩니다. (굵게) 크기는 블록으로 한줄을 통째로 차지합니다. 대부분 h1은 사이트의 로고나 네임으로 많이 사용합니다. 아래와 같이 출력됩니다. Ctrl + F11을 눌러 확인해 보세요. This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This.. 더보기
03. html의 기본구조 html의 기본구조는 다음과 같습니다. hello world! DOCTYPE Document Type Declaration란 뜻으로 약자로 DTD라고 합니다. 제일 상단에 위치해야 하고 이 문서가 어떤 종류인지 어떤 버전으로 작성되었는지를 알려줍니다. 작성한 버전에 맞게 문서를 해석하라는 뜻이지요. DOCTYPE을 지정하지 않으면 내가 의도한 바와 다르게 화면이 출력될 수 있습니다. 위 예시는 html5로 작성되었다는 표시 입니다. title 문서의 제목을 입력합니다. 브라우저 상단에 출력되는 제목을 설정해 주는 부분입니다. body 본격적으로 사이트의 컨텐츠가 들어가는 부분입니다. 앞으로 하게될 작업은 대부분 이곳에 작성됩니다. 이제 뒤에서 코드가 나오면 body사이에 요렇게 치면 됩니다. 태그문법 대.. 더보기
02. 에디터사용법 (aptana studio) 코딩 작업을 하려면 에디터가 필요합니다. 에디터를 사용하는 방법에 대해 알아봅시다. 많은 에디터들이 있지만 프리웨어에 자동완성 기능이 편리한 aptana studio를 깔아보겠습니다. 사실 저도 처음 배운게 이프로그램이라 그냥 이걸로 갑니다. 이 프로그램은 프리웨어로 안심하고 받으심 됩니다. 일단 http://www.aptana.com/ 에 접속해서 다운로드 해줍니다. 그리고 설치를 시작합니다. 01. 설치할 폴더를 선택해 줍니다. 설치는 따로 설명안하겠습니다. 02. 실행후 작업영역을 설정해줍니다. 작업파일을 저장할 영역을 설정합니다. 지정폴더에 설정이 저장되므로 기존 폴더보다는 새폴더를 만들고 설정해 주세요. 03. 폰트를 설정해 봅시다. window > preferences 로 들어갑니다. gene.. 더보기

티스토리툴바