분류 전체보기 41

[HTML#07] HTML DIV태그, P태그

div 태그는 영역을 설정하는 태그이다. 기초공사와 같이 말이다. Java GUI에서 JPanel과 동일한 역할이다. 디자인에서 매우 중요한 역할을 수행한다. 정렬을 사용할 수 있다. 한 줄에 하나씩 나온다. 와 같이 사용하면된다. 옵션으로 align을 먼저 보자면, div태그 샘플 div태그 샘플 div태그 샘플 라고하면 div태그 샘플 div태그 샘플 div태그 샘플 이런식으로 미리보기창에 출력이 되는 것을 볼 수 있다. 만약 어떤 하이퍼링크 이미지 5개를 나열할때, 하면 가운데로 정렬된다. 하나의 브라우저엔 여러 레이아웃으로 나뉜다. 하지만 대부분 사이트는 레이아웃이 비슷하다. 홈페이지 상단엔 로고가 있고, 검색창이 있으며, 가운데는 메뉴가 있다. 메일, 뉴스, 지도, 등등 그 후 아래에는 뉴스나 ..

HTML 2020.12.04

[HTML#06] HTML A태그

A태그는 하이퍼링크(hyperlink)를 만드는 태그이다. 하이퍼링크는 어떤 버튼이나 무언가를 눌렀을때 링크를 따라 다른 페이지와 연결되어 들어가게 되는 것이다. 다른 페이지와 연결외어있고 누르면 이동이 가능하다. 와 같이 사용하며, 범위가 있는이유는 태그 사이에 글자가 한 개, 두 개, 몇 개가 들어갈지 모르기 때문이다. 자주 사용하는 옵션, 속성(attribute)으로는 href 이다. 누르면 이동할 주소를 작성하는 것이다. img태그 학습 페이지 와 같이 사용하면 출력창에는 "img태그 학습 페이지"글자가 있고, 그 글자를 누르면 원하는 주소로 이동하게 되어있다. 그 외에는 title이있다. title은 마우스를 올리면 표시될 글자이다. img태그 학습 페이지 하면 주소에 커서를 가져다가 대면 "안..

HTML 2020.12.04

[HTML#05] HTML IMG태그

img태그는 이미지를 표현할 수 있는 태그이다. 범위는 없으며 매우 다양한 옵션이 있다. 그리고 꼭 부여해야할 옵션이 두 가지 있는데, alt와 src옵션이다. alt : 이미지가 없을 때 나올 설명 [리더기에 읽히는 글씨]인터넷사용이 불편하신분, 장애인분들이 도움받을 수 있음 src : 이미지의 경로 (내 컴퓨터에 있는건 불가능, C:/, D:/ 이런거 안됌 보안상이유로) width : 너비(px, %) height : 높이(px, %) 그래서 만약 사용한다면 사이에 하면 넓이 200 높이 250의 찾은 이미지를 넣을 수 있다. +)동적인 것은 dynamic, 정적인 것은 static인데 무언가 창을 열고 창의 크기를 넓히고 줄였을때 그대로이면 정적인것이고, 움직이면 동적인 것이다. 동적인 것은 %로 ..

HTML 2020.12.04

[HTML#04] HTML FONT 태그

Font 태그는 글꼴 제어 태그이다. html은 태그가 없으면 아무런 효과가 없다. 만약 이 태그사이에 '가나다라마바사' '가나다라마바사' 라고 친다면, '가나다라마바사 가나다라마바사' 이렇게 입력된다. 마치 이클립스에서 print와 println 의 차이처럼 말이다. 두 '가나다라마바사'가 다른 글씨로 구분되도록 색깔을 빨간색과 파란색으로 나누어본다면, 가나다라마바사 가나다라마바사 이렇게 color라는 옵션을 넣어주면된다. 위와 같이 color=" " 사이에 색을 넣어주면 미리보기창에 빨간색과 파란색으로 구분된 '가나다라마바사'가 창에 출력된 것을 볼 수 있다. font는 글자에 관한 여러가지 제어 태그이기 때문에, 여러가지 기능은 어려울 수 있더라도 글꼴, 글자크기, 글자 색깔 등 몇 기능을 더 사용..

HTML 2020.12.04

[HTML#03]HTML 템플릿 만들기

자동완성을 만들기 위해선 다운로드를 받을 것이 있다. Brackets 상단 메뉴에 [파일] - [확장기능 관리자]를 눌러서 검색창에 'beautify'를 검색하여 두번째 아무 수식어 없는 Beautify 를 설치한다. 다음 'emmet'을 검색하여 두번째에 있는 Emmet을 설치한다. 다양한 것들이 나오지만 다운로드 100만회가 넘는 기능을 설치해주면 된다. 다운 받은 후 새 파일을 만들어서 !를 입력하고 Tab키를 누르면 이와같은 식이 자동완성되는 것을 볼 수 있다. 신세계다~,, 여기서 설명을 해보자면 charset은 문자를 세팅하는건데 UTF-8을 사용하겠다는 것이다. html태그에서 lang이라는 옵션을 주겠다는것이고, "en"은 영어를 쓰겠다는 것이고, 굳이 "ko"로 한글로 바꿀 필요는 없다...

HTML 2020.12.04

[HTML#03]HTML 템플릿 만들기

자동완성을 만들기 위해선 다운로드를 받을 것이 있다. Brackets 상단 메뉴에 [파일] - [확장기능 관리자]를 눌러서 검색창에 'beautify'를 검색하여 두번째 아무 수식어 없는 Beautify 를 설치한다. 다음 'emmet'을 검색하여 두번째에 있는 Emmet을 설치한다. 다양한 것들이 나오지만 다운로드 100만회가 넘는 기능을 설치해주면 된다. 다운 받은 후 새 파일을 만들어서 !를 입력하고 Tab키를 누르면 이와같은 식이 자동완성되는 것을 볼 수 있다. 신세계다~,, 여기서 설명을 해보자면 charset은 문자를 세팅하는건데 UTF-8을 사용하겠다는 것이다. html태그에서 lang이라는 옵션을 주겠다는것이고, "en"은 영어를 쓰겠다는 것이고, 굳이 "ko"로 한글로 바꿀 필요는 없다...

HTML 2020.12.04