Java/UI구현 (18) 썸네일형 리스트형 2023.03.22 반응형 웹이란 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹사이트를 표시하는 방법 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는것 가로 모드에 맞춘 레이아웃 변경 가능 사이트 유지보수가 용이 반응형 웹 구현을 위한 기술 뷰포트 실제 내용이 표시되는 영역 뷰포트를 지정하면 기기화면에 맞춰 확대/축소해서 내용 표시 head태그 안에서 meta태그를 이용해 뷰포트 설정 미디어 쿼리 접속하는 장치(미디어)에 따라 특정한 css스타일을 사용하도록 함 기본 형태 : @media [only | not] 미디어유형 [and 조건] * [and 조건] only : 특정 웹브라우저(미디어 쿼리를 지원하는)에서만 조건을 인식하게 한다. not : 지정한 미디어유형은 제외하고 적용시킨.. 2023.03.21 시멘틱 태그 효율적인 레이아웃 작업을 위해 사용되는 태그들 태그의 이름만 보고도 어느부분에서 사용되는 태그인지 직관적으로 알 수 있다. header태그 - 머리말태그(상단) 사이트 전체의 제목부분이 될수도 있고, 본문의 제목부분이 될수도 있다. 주로 페이지 맨 위쪽에 삽입 ex: form태그를 사용해 검색창을 넣거나, nav태그를 사용해서 사이트 메뉴를 넣는다. nav태그 - 네비게이션 태그(상단메뉴) 같은 사이트안의 문서나 다른 사이트의 문서로 연결하는 링크를 나라냄 네비게이션 메뉴 뿐만 아니라 푸터에 있는 사이트 링크 모음 등 에도 사용됨 main태그 - 메인 태그(메인화면 표시) 메인 컨텐츠를 표시하는데 사용 하나의 문서에는 하나의 main요소만 존재해야함 article, aside, footer,.. 윈도우에서 자주 사용되는 단축키 윈도우 탐색기 실행 : 윈도우키 + e 화면캡처 : 윈도우키 + shift + s 텍스트 입력이 가능한 에디터 프로그램에서 사용하는 단축키 단어별 블록 지정 : 특정단어의 앞(혹은 뒤)에서 ctrl + shift + 오른쪽키(혹은 왼쪽키) 키보드로 블록 지정 : shift를 누른 상태로 방향키 조정 특정 단어부터 해당 라인(한줄) 블록 지정 : shift + end(home) 마우스와 키보드를 활용한 블록지정 : shift + 마우스 클릭 현재 페이지 전체 블록지정 : ctrl + a 2023.03.20 1. 로그인 박스 그림자 2. 버튼 테두리 x 3. 로그인 글자 굵게 4. 로그인 버튼 색상 어두운색으로 text-align : center; 글자 가운데정렬 - vertical-align: 수직방향에서 정렬할 때 주로 사용 display가 inline이나 inline-block 일때 적용 #id_pass, #login_btn { display: inline-block; vertical-align: top; 실제 로그인기능 구현시 method의 타입은 post로 한다. method가 get방식일때는 파라미터(서버측에 전달하는 데이터)가 주소(url)에 전부 보여지기 때문에 보안상 사용하지 않는다. 주로 사용되는 기능 : 단순 페이지 이동 시, 게시글 상세보기 등 method가 post방식일때는 파라미터가.. 2023.03.17 클래스 선택자는 보통 미리 만들어놓고 html에 적용하는 편이다. id 선택자는 따로 수정할때 많이 사용한다. background-color는 상속불가. 함수이름() -> 함수호출(함수사용) ex> url() -> url을 지정하는 함수라고 생각하면 됨. 배경을 꾸며주는 CSS속성들 background-color속성 : 웹 문서(HTML)의 요소(태그) 배경색을 지정할때 사용. background-image속성 : 배경 이미지를 파일로 지정 background-repeat속성 : background-image속성과 함께 사용. 배경 이미지 반복 여부 및 반복 방향 지정 background-size속성 : background-image속성과 함께 사용. 배경 이미지 사이즈를 조절 background-pos.. 2023.03.16 이미지 파일 src = 거의 대부분 상대경로 href는 절대경로.상대경로 다씀... 자기소개 : 첨부파일 : *2MB까지 가능 사용자가 웹사이트로 정보를 보내게 해주는 태그 : form태그 네트워크상에서 주고받는 데이터 : 파라미터(매개변수) 파라미터는 url의 끝부분에 ?뒤에 위치하게된다. 파라미터가 여러개일때는 &로 구분이 된다. 파라미터는 name값과 실제값(데이터) 의 쌍으로 이루어져있다. 서버상에서 발생하는 응답코드들 200 : 네트워크 상태가 성공적으로 이루어졌을때 400 : 파일이 없거나 주소가 없는경우(오타일 가능성이 크다.) 500 : 서버상에서 발생에러(오타일 가능성이 크다.) 첨부파일 : 서버 과부하 피해서 용량 제한함. 보통 게시판글 20~30메가. 아이디 : 비밀번호 : name:.. 2023.03.15 상대경로 : 파일이 어떤 폴더에 위치해있는지 생각잘하고 사용하기~ 비디오 video 태그는 src는 따로 source태그 , 속성은 video옆에 내부 스타일 시트 적용 : style태그 특정 태그를 선택할때는 태그이름 그대로 사용하면 된다. 단, 태그이름을 사용하여 style적용할때는 본 페이지에서 같은 태그를 사용할 때 전부다 같은 스타일이 적용된다. 활용 방법 : 태그이름{ 스타일1:값; 스타일2:값; } table,tr,td{ /* table, tr, td 태그에 스타일을 적용하겠다. */ border: solid 1px black; border-collapse: collapse; padding: 8px; } /* border : html요소에 테두리 설정하는 속성 border에서 주로 사용하는 .. vsCode에서 자주 사용하는 단축키 ------ 거의 대부분의 프로그래밍 에디터에서 지원하는 단축키 ------ 주석 : ctrl + / 들여쓰기 : tab키 혹은 스페이스 역들여쓰기 : shift + tab ------ vsCode에서만 사용되는 단축키 ------ 한줄 복사 : alt + shift + 화살표 아래(혹은 위) 한줄 삭제 : ctrl + shift + k 한줄 이동 : alt + 화살표 아래(혹은 위) 소스코드 자동 정렬 : alt + shift + f 이전 1 2 3 다음