HTML 5

[Thymeleaf] 프로젝트에 사용한 타임리프 문법 정리

※ How to use multiple condition in if tag using thymeleaf ? 타임리프에서 이중 if 사용 타임리프에서 if and 'and' 사용 수정하기 session 에 저장된 role 값이 "user" 이고, item의 sellerId 값이 session 의 id 값과 동일하다면 '수정하기' 버튼을 보여줘라 ※ How to formate LocalDateTime in Thymeleaf ? 타임리프에서 LocalDateTime 타입 format temporals.format 사용 ${#temporals.format(LocalDateTime,'yyyy-MM-dd')} ※ How to formate number in Thymeleaf ? 1000단위 쉼표 찍기 numbers..

HTML 2022.08.19

[HTML] CSS 스타일속성 2

※ 위치속성 - 절대적 위치 좌표 : x, y좌표를 설정해 절대적 위치를 지정 - 상대적 위치 좌표 : 요소를 입력한 순서대로 상대적으로 위치를 지정 ▶ CSS에서 위치와 관련된 Positioning 방식 1. normal flow : (default) 사용자가 기본적으로 가지고 있는 positioning 2. absolute positioning : ★absolute/relative★ 3. float ▷ top, bottom, left, right - 위치지정 속성들은 절대, 상대 위치 지정과 함께 사용 ▶ ★position 관련 style 속성 ㄴ element 의 위치 지정방식, 흐름의 종류를 정함 ▷ static - default - 엘리먼트가 본래 가지고 있는 흐름을 가짐 - 태그가 위에서 아래..

HTML 2022.04.20

[HTML] CSS 스타일속성 1

※ CSS3 단위 ▶ CSS3 크기단위 ▷ % 백분율단위 - 초기 설정 크기 : 100% ▷ em 배수단위 - 1배 : 1em = 100% - 1.5배 : 1.5em = 150% ▷ px 픽셀 - p태그 기본 font-size : 16px ▶ CSS3 색상단위 ▷ HEX코드 : #000000 - 16진수로 RGB 색상 조합을 순서대로 입력함 ▷ RGB색상 : rgb(red, green, blue) ▷ HSL 색상 : 색상(Hue), 채도(Saturation), 명도(Lightness) ▶ CSS3 URL 단위 - url 함수 내부에 경로를 입력하면 됨 ▷ 현재 폴더의 Desert.jpg background-image: url('Desert.jpg'); ▷ 현재 폴더 내부의 Other 폴더의 Desert...

HTML 2022.04.20

[HTML] CSS, 선택자

※ 스타일시트 ▶ 사용방법 1. inline 방식 - 태그안에 style 바로 넣는 것 : 섞여있어서 별로 좋은코드가 아님 class 속성으로 select를 가지는 태그의 color 속성을 red 키워드로 적용 ▶ 속성 선택자 - 특정 속성을 가진 HTML 태그를 선택할 수 있다 ▷ 기본 속성 선택자 - 선택자[속성] : 특정한 속성이 있는 태그를 선택함 - 선택자[속성=값] - type 속성에 따라 서로 다른 스타일이 적용됨 input[type=text] { background: red; } = > input 태그 중에서 type 속성을 text로 갖는 태그의 background 속성에 red 키워드를 적용 input[type=password] { background: blue; } = > input ..

HTML 2022.04.19

[HTML] 태그

HTML - 구조잡기, 의미 CSS - 예쁘게 꾸미기, layout 잡기, 표현하기 Javascript - 동작 ※ HTML5 - 문서유형 // 문서유형지정 => 이제부터 document type html 이야 ! //언어지정=korean // 실제 화면에 보이는 문서 내용을 입력 ▶ 기본 태그 - 웹브라우저 : "HTMl5에 맞춰 문서를 해 석하면 되겠구나" - 언어지정 : 한글 - 언어 표기를 하지 않으면 검색사이트에서 언어를 제한해서 검색할 때 검색 되지 않을 것임 - 웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들은 모두 부분에 입력함 - 문서제목 - 문자 인코딩 및 문서 키워드, 요약 정보 - ctrl + shift + / ▶ 글자 태그 [1] 제목 - HTML5의 대표..

HTML 2022.04.19