목록web/HTML (7)
Practice makes perfect

- 문단 정렬 태그 (pre & xmp) 위의 내용과 같은 문단으로 정렬될 수 있도록 하겠습니다. 이용 약관 동의의 내용을 그대로 가져와서 동일하게 나타내고 싶을 때 를 통해서 같은 문단 정렬로 출력하게 만들어줍니다. 와 비교 했을 때 똑같이 출력되는 것으로 보입니다. 추가 적으로 태그를 넣을 때, pre는 속성을 적용시켜주고, xmp는 태그도 텍스트로 인지하고 출력합니다. 그래서 pre를 빠른 편집과 적용으로 인해 많이 사용됩니다. - 메타 태그 메타: 필요한 정보들에 대한 관리 (ex : 하둡의 namenode가 위치 정보를 관리하는데 이것을 meta정보를 관리한다고 합니다.) meta http-equiv= "Content-Type" content ="text" - 속성 meta http-equiv=..

은 줄 바꿈 하여 출력하여 주고, 는 줄 바꿈 하지 않고 출력합니다. inline 형식 : span태그 / a태그/ input 태그 / 글자 형식 태그 / 이미지. 오디오 태그 등 = 자신의 텍스트 까지가 자신의 영역으로 가지는 태그 block 형식 : div태그 / h1~h6태그 / p 태그 / 목록태그(ol, ul, li) / 테이블 태그 / form 태그 = 전체 폭을 자신의 영역으로 가지는 태그 줄 바꿈의 의미가 아니라, 태그가 가지고 있는 영역이 정의되어 있는 입니다. 눈으로 봤을 때는 줄 바꿈을 해주는 것과 같은 효과를 보여주는 것이다. H2가 자신의 영역을 가지고 있기 때문에 각각 줄이 나눠서 출력합니다. - block 형식으로 바꾸는 태그 : 레이아을 잡아줄 때, 많이 사용 됩니다. Div..

: 입력 양식의 폼 : 데이터 입력(form 안에서만 사용되며 , 단일 태그) - text : text 를 입력 할 수 있는 란을 생성. - button : 버튼 생성 - chekbox : 체크 박스는 그룹 아네서 여러 가지 선택이 가능합니다. - file : 파일을 선택을 통해서 원하는 파일을 가져올 수 있습니다. - password : 입력 시 , 특수 문자로 출력하여 노출 되지 않게 합니니다. - radio : 라디오 버튼은 그룹 주에 한개만 선택되도록 합니다. - reset : 초기화 버튼을 누르면 form 안에 있는 모든 입력 양식 태그가 초기화 됩니다. - submit : form 태그 안에 모든 입력 내용을 전달하는 역할을 합니다. (form 안에 submit이 반드시 존재 합니다. ex) ..

1) 테이블 생성 태그 숫자에 맞춰서 밖의 테두리의 두깨가 결정 됩니다. = 행 = 열 2) 테이블의 속성 border = "?" : 테두리 선 두깨 alian = "center" : 글자 가운데 맞춤 bgcolor = "color" : 배경 색 bordercolor = "color" : 테두리 색 cellpadding = " " : 칸 안쪽 여벡 cellspacing = " " : 칸과 칸 사이의 여백 3) 열 합치기 - 위의 테이블에 1행 1열과 1행 2열을 합쳐보도록 하겠습니다. 첫번째 열에는 합치고 싶은 개수를 적고, 뒤에 있는 합쳐지는 열은 주석 처리해줍니다. - colspan 의 속성을 이용해서 열을 합칠 수 있습니다. 4) 행 합치기 열을 합치는 것과 같은 방법으로 rowspan의 속성을 이..

톰캣의 태그를 이용한 글자의 효과 넣기 1) 글자가 흘러가듯 지나가게 만드는 태그 내용 - 오른쪽에서 왼쪽으로 반복해서 흘러가듯 지나갑니다. 2) 한번만 지나가고 멈추는 태그 슬라이드 문자열 3) 좌우로 이동하는 문자 태그 내용 4) marquee 를 이용한 추가 글자 효과 5) 목록 기본 태그 : ordered list = 번호가 있는 목록 태그 : list item = 목록 요소 : unordered list = 번호가 없는 목록 태그 6) 정의 목록 태그

앵커 태그 = 서로 다른 웹페이지 사이를 이동하거나, 웹페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그를 의미 합니다. 흔히 이야기 하는 하이퍼 텍스트가 앵커 태그를 의미합니다. 페이지에서 사전을 눌렀을 때 다음 페이지가 출력되게끔 만들져 있습니다. 이러한 모든 창들은 서버에서 가지고 있습니다. 위와 같이 앵클 테그를 만들어서 원하는 링크로 이동할 수 있도록 만들어보겠습니다. 내용 를 이용하여 앵커 태그를 만들어줍니다. 속석을 이용해서 이동해가고 싶은 주소를 넣어주면 이동하고 싶은 도메인으로 이동합니다. 네이버를 입려하여 누르면 네이버로 이동니다. 추가 적으로 앵커 태그를 넣으면 넣은 도메인을 출력할 수 있습니다. 다음을 누르면 다음으 출력됩니다. 앵커 태그 2 : 같은 페이지 안에서 특정 위치로..

브라우저에 들어가면 어떤 사이트이든 소스를 통해서 보기 좋게 우리에게 보여줍니다. 도메인의 맵핑을 통해서 입력한 도메인 서비스에 요청을 통해서 ip주소를 통해서 브라우저에 전달 받는 것입니다. 하나씩 그 코드를 알아가겠습니다. Html /html: 화면을 구성하는 뼈대를 만듭니다. head /head: 정보와 함께 title의 내용을 정리합니다. title /title: 도메인창 위의 이름이 나옵니다 Body /body: 화면 구성을 이룹니다. Meta: 설정, 구성요소의 정보 등을 이야기 합니다. - 파일에 대한 정보(UTF-8로 바꾼 이유: 한글폰트만 있다고 하면 전세계에 어디에 있던 간에 깨지지 않습니다.) 주석문을 사용할 때는 java와 동일한 버튼으로 ctrl + shift + / 를 눌러서 주..