· FRONT-END(93)
-
[ CSS ] 인라인 스타일 이해(Inline Style)
환경 : Visual Studio Code [ 인라인 스타일(Inline Style) ] CSS( Cascading Style Sheets)에서 inline style은 HTML 요소에 직접 스타일 속성을 지정하는 방법이다. 모든 태그는 style 속성이 존재한다 작성한 태그에만 영향을 미친다 디자인을 여러 개 하고 싶은 경우 디자인을 여러 개 하고 싶은 경우 세미콜론(;)으로 구분해야 한다 (단점) 태그별로 디자인을 모두 해야한다 유지보수 측면에서 비효율적일 수 있음 └ 외부 CSS 파일이나 내부 태그를 사용하여 스타일을 정의하는 것이 권장 어떤 방식의 디자인보다도 우선순위가 높다(디자인 수정 시 사용) [ 인라인 스타일 적용 예 ] Hello CSS Design Hello CSS Design Hell..
2024.04.01 -
[ HTML ] !DOCTYPE html 이해 및 header, footer 구조
환경 : Spring Tool Suite4 은 HTML 문서의 첫 줄에 나타나는 것 └ 이 문서가 어떤 버전의 HTML로 작성되었는지 웹 브라우저에게 알려주는 역할 은 문서 유형 선언(Document Type Declaration)의 일부로 HTML 문서가 어떤 버전의 HTML로 작성되었는지 브라우저에게 알려주는 역할 html이라는 단어는 이 문서가 HTML5 버전으로 작성되었음을 나타냅니다.(현재 표준 HTML) 은 HTML 문서의 범위를 정하는 태그(자동 생성) 은 홈으로 제품관리 시스템 사원관리 시스템 메뉴관리 시스템 로그아웃 내정보 회원가입 로그인 (+) 상단 영역 : - 홈페이지에서 가장 많이 보이는 부분 - 로고, 검색창, 각종 메뉴들을 배치 (+) 태그는 투명한 영역 - home.jsp 환영..
2024.03.16 -
[ HTML ] 특수문자 코드표
환경 : DBeaver, Spring Tool Suite4 [ 예시 코드 ] html에서 일부 특수 기호는 특수 문자를 사용하여 표기해야한다. └ html에서 꺾쇠는 태그를 의미하여 사용할 수 없다 [ HTMl 특수 문자 코드표 ] 표현문자 숫자표현 문자표현 설명 space 수평탭 space 줄 삽입 space 여백 ! ! 느낌표 " " " 따옴표 # # 숫자기호 $ $ 달러 % % 백분율 기호 & & & Ampersand ' ' 작은 따옴표 ( ( 왼쪽 괄호 ) ) 오른쪽 괄호 * * asterisk + + 더하기 , , 쉼표 - - hyphen . . 마침표 / / solidus(slash) 0-9 0 -9 0부터 9까지 : : 콜론 ; ; 세미콜론 > > 오른쪽..
2024.03.13 -
[ HTML ] 목록, 검색 페이지에서 태그를 활용해보기
환경 : DBeaver, Spring Tool Suite4 (참고) 해당 실습에 사용된 데이터 베이스 코드 : https://ggingggang05.tistory.com/109 (참고) 해당 실습에 대한 Dto / Dao / Mapper 클래스 코드 및 기타 추가 설정 관련 : https://ggingggang05.tistory.com/110 [ 전체 코드 ] - ProductController.java @Controller @RequestMapping("/product") public class ProductController { @Autowired private ProductDao dao; //목록 및 검색 페이지 //@RequestMapping(value = "/list", method = Requ..
2024.03.10 -
[ HTML ] 표 만들기
환경 : Spring Tool Suite4 [ 테이블 태그 ] 이라는 태그로 표를 만들 것임을 명시 및 표의 영역 지정 , , 태그로 용도에 맞는 영역을 세부 생성(지정) └ 안쓰면 자동으로 가 생김 └ 범용성을 위해 세부 영역을 구분한다 태그로 줄 생성 , 태그로 칸 생성 └ 는 제목을 작성하는 칸, 굵은 글씨에 가운데 정렬을 제공 └ 는 내용을 작성하는 칸, 일반 글씨에 좌측 정렬을 제공 └ 표에 작성되는 모든 내용은 "칸"에만 작성 가능 [ 사용 예 ] - TableController.java @Controller @RequestMapping("/table") public class TableController { @RequestMapping("/test01") public String test01..
2024.03.09 -
[ JS / ajax ] 첨부파일 이미지에 대한 정보를 통해 이미지를 불러오기
환경 : Visual Studio Code / Spring Tools Suite4 첨부파일은 정보만 디비 실물은 하드디스크 회원가입 시 프로필 등록은 (1) 가입할 때 파일 고르고 (2) 마이페이지에서 파일 보여주고. (서버에서 가져 옴) => 이렇게 나눠서 진행되었던 것을 게시판에선 한 페이지 모든 동작이 이루어지게 한다. 게시판에서 사용자가 글을 작성할 때 이미지를 띄우려면, (1) 이미지의 주소를 알거나 (2) 이미지를 알거나 (2)번 방법처럼 이미지를 알게되면 이미지를 저장할 용량이 너무 커져서 디비에 들어가기에 무리가 있다. 따라서 이미지의 정보(주소, 크기 등)를 아는 것이 좋다. 이를 데이터베이스에 보관하는 것은 당연한거고.. 첨부한 이미지가 게시판의 글내용칸에 보여져야 함. => 이 효과를..
2024.03.07