전체 글(169)
-
<input> 태그 정리(HTML)
태그 - input 태그의 type이 같은 태그들이 여러개 있다. 예를들어 input type="text"인 태그가 여러개 있는데 각 input 태그를 구별하기 위해서 id 속성을 이용할 수 있다. id 속성을 이용해서 구별 뿐만 아니라 label태그를 이용해 캡션을 붙일 수도 있고 원하는 CSS도 적용할 수 있다. 라벨1 라벨2 라벨3 HTML 삽입 미리보기할 수 없는 소스 - input 태그에는 type을 뭐로 해주냐에 따라서 다양하게 정보들을 입력할 수 있다. type 속성의 각 값에 따른 설명을 보자 유형 설명 hidden 사용자에게는 화면에 보이지 않는 정보지만 서버로 데이터가 넘어간다. text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자이다. search 검색 상자를 넣는다. text와 ..
2023.10.02 -
FORM 관련 태그 정리(HTML)
태그 - 여러가지 속성을 통해 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길지 서버에서는 어떤 프로그램을 이용해 처리할지 지정한다. - method 속성은 사용자가 입력한 내용들을 서버쪽으로 어떻게 넘겨줄지 결정한다. get방식으로 하는 경우가 있고 post 방식으로 하는 경우도 있다. - get 방식은 256~ 4096byte 까지의 데이터를 서버로 넘길 수 있다. - post 방식은 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 url에 드러나지 않는다. - name 속성은 폼의 이름을 지정한다. 하나의 html 파일에 여러개의 form 태그가 존재할 수 있는데 각 태그를 구별할 때 name 속성으로 알 수 있다. - action 속성은 form 태그안에 내용들을 처리해 줄 서버 ..
2023.10.02 -
SVG 이미지
웹에서 사용 가능한 이미지는 gif, jpg, png 파일 형식이 있다. 그런데 최근에 svg파일 형식이 많이 사용된다. 보통 이미지 파일들을 엄청 확대해서 보면 테두리 부분이 울퉁불퉁해 보인다. svg파일 형식이 많이 사용되는 이유는 아무리 확대하거나 축소해도 원래의 깨끗한 상태로 화면에 나타난다. 이러한 이유 때문에 러고나 아이콘에서 많이 사용되고 있다. svg 이미지를 사용하는 방법은 우리가 가지고 있는 jpg나 png 이미지 파일을 svg로 전환하고 전환한 파일을 태그로 나타내면 된다. 1) https://www.adobe.com/kr/express/feature/image/convert/svg 에 접속 2)이미지 업로드 클 3) 이제 바꾸려는 이미지 파일을 업로드하고 변환이 완료되면 다운로드 하..
2023.10.01 -
링크 만들기(HTML)
링크는 클릭하면 다른 화면으로 이동하게 해준다. 이러한 기능을 할수있는 HTML 태그를 공부해보자 태그 - 태그에 href 속성으로 이동하려는 홈페이지 경로를 넣어주면 해당 태그를 클릭 시 href에 있는 페이지로 이동한다. - 태그 안에 텍스트나 이미지 같은것을 넣으면 텍스트나 이미지를 클릭시 href 페이지로 이동한다. - target 속성은 링크한 내용을 현재 창에 표시할지 새 창을 띄워서 표시할지 정한다. > _blank : 링크 내용이 새 창이나 새 탭에서 열린다. > _self : target 속성의 기본값으로 링크가 있는 화면에서 열린다. > _parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다. > _top : 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 ..
2023.10.01 -
이미지 태그(HTML)
웹에서는 이미지 파일이 크기가 크지 않아야하고 화질도 좋아야한다. 그래서 몇 가지 파일 형식만 사용가능하다. - GIF - JPG/JPEG - PNG 위의 이미지 파일들을 화면에 나타낼때 태그가 필요하다 태그 - src 속성에 이미지 파일이 있는 경로를 넣어야 화면에 이미지가 나타난다. 경로는 웹 문서 파일의 위치를 기준으로정해진다. 만약 이미지 파일이 웹 문서와 같은 경로에 있다면 이미지 파일 이름만 넣어주면 된다. 만약 웹 문서와 같이 있는곳에 images라는 하위폴더에 picture.png 이미지 파일이 있으면 /images/picture.png 경로를 src에 넣어면 된다. - alt 속성은 이미지를 설명하는 대체 텍스트로 넣을 때 사용한다. 화면 낭독기에서 대체 텍스트를 읽어 주기 때문에 장애이..
2023.09.29 -
표관련 태그(HTML)
, , , 태그 - 로 먼저 표 전체 형태를 잡은 후 row를 로 만들고 row안에서 각 셀을 로 만든다. 셀1 셀2 셀3 셀4 셀5 셀6 HTML 삽입 미리보기할 수 없는 소스 - 표의 첫번째 행에 각 열이 무엇을 나타내는지 제목을 넣는경우가 있다. 이때 태그를 사용한다. 태그와 같은데 차이점은 글을 중앙에 배치해주고 글씨도 긁게 나타내준다. 숫자 영어 한글 1 a 가 2 b 나 HTML 삽입 미리보기할 수 없는 소스 colspan, rowspan 속성 - 표를 가로로 합치고 싶을때 colspan을 이용한다. td나 th에 colspan속성으로 합칠 셀의 개수를 넣어주면 된다. 셀1 셀2 셀3 셀4 셀5 HTML 삽입 미리보기할 수 없는 소스 - rowspan은 세로로 표를 합칠때 사용한다. 셀1 셀2..
2023.09.28