✨ UI 38

[HTML]이미지 img

폴더 위치src-webapp-resources-img   이미지 삽입  alt = "이미지를 설명. 이미지가 보이지 않을 경우, 이미지 설명 텍스트"src = "이미지 경로"title = "인용문(마우스 올리면 뜨는 거)"width : 가로 크기 지정.height : 세로 크기 지정.href를 넣어 하이퍼핑크를 거는 것도 가능하다. 🌟 이미지에서 하이퍼링크 걸 때 선택할 수 있는 범위 축소하기에 usemap="사용할  map 이름"추가.태그에 name="이름"을 적고 안 태그에 링크를 넣는다.coords="n, n, n, n"으로 클릭 범위를 지정한다.

✨ UI/💗 HTML 2024.12.22

[HTML]테이블 만들기 & 셀 병합

Table    : 태그 안에 만듭니다. : 테이블의 제목 : 컬럼 비율을 정합니다. : 컬럼갯수와 맞게 을 만들어 조절합니다. : 컬럼이 들어가는 부분 : 하나의 컬럼입니다. : 표 부분입니다. : 테이블 칸들을 한 줄에 모아놓습니다. : 실제 테이블 칸입니다. : table foot. 바닥란 입니다. 전체코드더보기 <caption>테이블 제목 <thead>컬럼 1 컬럼 2 컬럼 3 <td>1 2 ..

✨ UI/💗 HTML 2024.12.22

[HTML]목록태그 <ul> <ol> <dl>

: 앞에 ●를 달아줍니다.  지금 티스토리에서 사용하는 리스트가 바로 이것입니다.태그 안에 를 사용합니다. : 앞에 숫자를 달아줍니다.  마찬가지로 태그 안에 를 사용해 적어줍니다. 안에 이 있을 경우 들여쓰기를 해줍니다. 전체코드더보기 첫 번째 항목 두 번째 항목 세 번째 항목 네 번째 항목 다섯 번째 항목 여섯 번째 항목 첫 번째 항목 두 번째 항목 세 번째 항목 &lt;p>를 적었을 경우 index로 이동 : 앞에 뭐가 안 붙는 목록.   : 목록을 감싸기 제목 내용  전체코드더보기 ..

✨ UI/💗 HTML 2024.12.21

[HTML]태그 종류. 블록 & 인라인 요소

란에 사용하는 태그들에 대해 알아보겠습니다.  블록요소와 인라인 요소Block & Inline element 블록 요소줄 바꿈⭕안에 텍스트와 인라인 요소 포함 가능.안에 블록 요소 포함 가능(일부 불가).인라인 요소줄 바꿈 ❌ 안에 텍스트와 인라인 요소 포함 가능.안에 블록요소 포함 불가❌. 🌟 블록 요소는 말 그대로 🧱으로 묶어주는 역할 을 하는 태그들입니다.인라인 요소 안에 블록요소가 올 수 없기 때문에 정리를 해두지만 굳이 모두 외울 필요는 없습니다. 블록요소addressarticleasideaudioblockquotecanvasdddivdlfieldsetfigcaptionfiguerfooterh1h2h3h4h5h6headerhgrouphrnosciprtoloutputppresection tab..

✨ UI/💗 HTML 2024.12.21

[HTML]기본 구조, 폴더 위치, 주석

index.html: 프로젝트의 시작페이지  위치는 프로젝트 내 src-main폴더-webapp 또는  resource 폴더 안에 넣어둡니다. (프로젝트마다 다름)프로젝트를 시작하면 index.html에서부터 시작합니다.static은 정적인 페이지를 모아두고 (index.html 포함)templates 에는 jsp나 thymeleaf등 뷰 템플릿으로 만든 페이지들을 모아둡니다.보통 index.html로 시작하는 경우는 없고 다른 페이지로 포워딩해서 시작페이지로 사용합니다. 개발자 도구로 열면 보이는 css, html, script는 모두 webapp이나 resource폴더에 모아둡니다.데이터를 다루는 숨겨진 코드 java코드는 따로 모아 둡니다.   기본 구조     : 웹브라우저에 HTML5 문서..

✨ UI/💗 HTML 2024.12.20

[HTML]html이란?

HyperText Markup Language:온라인 상의 문서(page)를 만들기 위한 구조화 된 언어   Client가 Server에 요청(request : 인터넷주소www.naver.com 입력)하면HTTP(통신 규약)에 의해HTML 문서를, 정해진 모양으로 응답(response) 한다. ※Client가 보는 화면(view)은 서버가 보내준 모양대로 나타나게 된다.   💡태그안에 들어가는 단어들을 태그라고 부른다.  example) 은 html태그라고 부른다.  은 html태그 시작을 선언하는 것이고은 hml의 종료를 선언한다.이 html태그 안에 여러가지 태그를 넣어서 페이지를 만든다.

✨ UI/💗 HTML 2024.12.16

[JS]대칭연산 : 논리연산자를 이용한 초기화 Short Circuit Evaluation

JS에서 null이나 undefined는 false로 평가됩니다. 따라서 논리연산자 || 와 && 이용해서 초기화를 할 수 있습니다. || const nulll = null;const empty = ``;const exist = `exist`;let result;console.log(`nulll || empty : ${result = nulll || empty}`);console.log(`nulll || exist : ${result = nulll || exist}`);console.log(`empty || exist : ${result = empty || exist}`);console.log(`nulll || empty || exist : ${result = nulll || empty || exist}..

✨ UI/💛 JS 2023.07.30

[JS]Promise/async/await : 약속 삼총사

Promise : 약속한 내용  ※ 기본형태let promise = new Promise(function(resolve, reject){ });​ 익명함수(함수를 변수에 담은 형태) 입니다. 무슨 약속이었는 지 기억하려면 이름이 붙어야 겠죠.그래서 꼭 변수에 담아야 합니다. 아니면 약속을 해도 실행할 수 없어요.약속한 걸 실행 성공하면 resolve실패하면 reject 가 실행됩니다. Promise 구성 상태값 변화  Promise의 기본 상태값PromiseState : pendingPromiseResult : undefined성공한 경우 PromiseState : fulfilled PromiseResult에서는 resolve 에 담긴 값이 표기됩니다.실패한 경우 PromiseState : rej..

✨ UI/💛 JS 2023.06.29
반응형