# figure!
JSP - eclipse
업로드를 실행시켜줄 파일들 이미지 담을 가상의 폴더 Fileupload1 form 필수추가 cos.jar/method=post/enctype="multipart/form-data" 는 업로드 도우미 역할로 필요한 파일 pc에 있는 다른 이미지를 가져와서 업로드 하는 것 / enctype은 fileupload에서 필수 action 경로 save파일에는 업로드 되지 않고 실제 업로드 되는 경로 /Users/sunghyunchoi/Desktop/sist0615/work/jspwork/.metad

홈페이지 클론 코딩 과제 230728
10일차 오늘 드디어 제출했다. https://kdt0-parkeunyeong-lush.netlify.app/ 배포 주소는 여기. (다만, js는 최소화하고 html과 css를 최대한 활용해야 했기에 구현하지 못한 부분이 많다.) 다행스럽게도, 어제까지 해결하지 못한 문제들은 오늘은 해결 할 수 있어 모두 적어볼 예정이다. 1. swiper 미작동 이부분에서 오른쪽 swiper가 움직이지 않은 이유는 js내에 적은 코드에서 오타가 있었기 때문.. slidesPerView: 'auto',에서 auto에 ''를
[HTML]<figure> , <figurecaption > - 독립컨텐츠,와 설명
` 과 ` > - `` 요소는 독립적인 콘텐츠를 표현한다. `` 요소를 사용해 설명을 붙일 수 있다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조된다. `태그는 보통 `태그와 함께 쓰인다. 왜냐하면 독립적인 콘텐츠 = 이미지 `태그의 내용 이기 때문에 `이 없으면 굳이? 사용을 왜하나 보통 이미지 - 설명 글 - 글쓴이 이렇게 연관이 있는 것을 ` 태그로 감싸주고 `으로 설명한다. ``처럼 들여쓰기가 되어진 상태로 보여진다. !codepen[jeong-dagyeong/embed/ExQpggW?default-tab=html%2Cresult]

[220718] 오늘의 배움(TIL) - 웹 접근성 / HTML / CSS
🔸 WCAG > * 웹 접근성 준수 가이드라인을 해석하는 바람직한 방법은 무엇인가? > > : 단편적으로 사례 등을 통해서만 가이드라인을 파악하면 안 됨 > : 실질적으로 맥락과 사용자를 고려하고 개선하기 위한 노력이 필요함 > : 구체적으로는 성공 기준의 이유, 설명, 달성 기법, 타이틀 등을 고려해야 함 > * 대체 텍스트 작성을 고려할 때 논점이 될 수 있는 기준에는 어떤 것이 있는가? > > : 이미지를 얼마나 정확하게 표현할 것인가? > : 이미지의 기획 의도를 전달할 것인가? 🔸 HTML > * figure, figcaption 태그는 무엇이고, 어떻게 사용하는가? > > : 다른 부분으로 이동해도 문제 없는 이미지 등의 독립적인 콘텐츠를 포함할 수 있는 요소 > : 첫 번째나 마지막 자식 요소로 figcaption 태그를 사용하여 설명을 덧붙일 수 있음 > * HTML4.01

semantic semantic image [ 또는 섹셔닝 콘텐츠(article, aside, nav, section) 반드시 필요한 요소는 아니지만 이런 의미일 때 di
Matplotlib에서 Figure와 Axes 이해하기 (Basic)
Matplotlib이란? python에서 가장 보편화된, 기본적인 시각화 자료를 그릴 수 있게 도와주는 라이브러리 기본적으로 와 라이브러리를 베이스로 합니다. 덕분에 다른 라이브러리와 호환성이 매우 좋습니다. (범용성 최고) Figure & Axes 개요 Figure: 흔히들 그림을 그리기전 액자의 모양을 정하는 것이라고 합니다. 그림은 Figure(액자)에 바로 그려지는 것이 아닌, Ax(캔버스)에 그리게 됩니다. 이 캔버스가 들어갈 크기를 미리 정하는 겁니다. Ax: 액자의 크기가 정해졌으면, 이제 해당 액자 안에 캔버스가 몇 개들어가고, 어떻게 배치할지 정하면 됩니다. 실제로 우리가 표현하고자 하는 자료가 그려지는 장소입니다. 실습 먼저 라이브러리와 가장 많이 사용되는 모듈인 pyplot 모듈을 임포트해줍니다. fi
HTML5, 그로부터 X년 후 (feat. 시맨틱 태그)
운동이 끝나고 닭가슴살을 먹으며 Youtube를 보려다가, 유명한 사이트는 어떻게 만들어졌는지 살펴나보자 싶어서, Nike 사이트를 접속했습니다. 개발자 도구를 켜자 Chrome의 확장프로그램 중 Vue.js devtools이 활성화되는 것이 너무 반가웠습니다. 잠시 반가운 마음은 뒤로 하고 구조를 살펴보았습니다. 📌 태그 중첩된 session들이 보이고 생소한 태그인 figure를 발견했습니다. 검색해보니 MDN 페이지에서는 아래와 같이 figure 태그를 설명하고 있습니다. > HTML 요소는 독립적인 콘텐츠를 표현합니다. 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다 "왜 굳이 생

[HTML] HTML의 꽃, 'Tag'
Text Contents 🔘Entity , ", ', &, 같은 특수기호들은 &+이름 으로 써줘야 한다. |이름|모양| |-|-| |lt;| |꺽쇠 |nbsp;| 공백| ' ' (1칸 space) 공백 |amp;| &| 앰퍼센드 |quot;| " |큰따옴표 mailto 🟠Heading Tag 제목을 표현할 수 있는 tag. <h1> ~ <h6>까지 존재한다. 🟡<p> tag 하나의 문단을 나타내는 태그, 시각적 매체에서 문단은 보통 블록 사이의 여백과 첫 줄의 들여쓰기로 구분하지만, 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이든 될 수 있다. ⚪<a> Tag hyper link를 추가할 수 있도록 하는 tag. <a href="이동할 링크"></a>의 형태로 사용한다. 이동할 링크 부분에 mailto:emiail-adress를 하면 이메일을
Figure Workflow
Colab에서 Matplotlib으로 정확하게 그리기. 논문에서 피겨는 일반적으로 큰 공간을 사용하기 어렵다. 그래서 figsize는 작게, (작업할 때 보기 좋으라고) dpi는 높게 설정해준다. fig = plt.figure(figsize=(3,3), dpi=180) svg 포맷으로 저장하고 다운로드하기 -- 픽셀맵같은 경우는 png로 저장함 plt.savefig("figure.svg") 다운로드한 피겨는 Figma 파일 안에 프레임을 만들고 그 안에 넣어준다. 라벨 등 필요한 정보를 추가한다. 논문 안에 들어가는 이미지의 width를 고려해서 프레임을 만들면, 논문 안에 들어가는 피겨 속의 텍스트들의 크기를 일정하게 만들 수 있다. 또한 논문속에 들어가는 최종 이미지의 선 두께도 일관되게 맞출 수 있다. 그림 오브젝트마다 이름을 설정하는데 /를 사용하면 자동으로 폴더안에 집어넣을 수 있다. study1\result 면 study1이라는 폴더

LaTeX Figure and Table Cheat Sheet
Introduction 논문 작성 과정에서 다양한 형태의 Figure 와 Table 을 작성하게 됩니다. LaTeX 을 이용해서 논문을 작성하면 편리한 점이 많지만, 단순하게 drag & drop 을 이용하여 Figure 를 삽입하지 않기 때문에 매번 원하는 Figure 의 형태를 생각하고, 이에 맞춰 코드를 작성해야 합니다. 다양한 샘플 Figure Type 들을 정리해 두면, 해당 상황에 가장 적합한 형태를 생각하기도 쉽고 코드를 그대로 가져다 쓰면 편리하기 때문에 시간을 내어 몇 가지 대표적인 형태를 정리합니다. Figure single-column one-figure single-column two-figures horizontal single-column two-figures vertical wide two-column three-figures wide two-column
html 요소(5)_멀티미디어
img 이미지를 삽입 src - 속성과 alt 속성은 필수 alt - 속성은 이미지가 제대로 출력되지 않을 경우에 대체 텍스트를 보여줌 이미지는 width height로 사이즈 조절 가능함 ( 가로 너비나 세로 길이 중 하나를 지정하면 이미지의 비율을 유지하면서 사이즈 변경됨 ) audio 오디오 컨텐츠를 삽입 👇🏼 다양한 속성들 src - 컨텐츠의 URL autoplay - 페이지가 로드되자마자 재생됨 controls - 정지 / 재생 / 음량 등의 제어 도구 사용 loop - 재생 끝나면 다시 처음부터 재생 muted - 음소거 preload - 페이지가 로드될 때 파일을 로드할지 설정 video 동영상 컨텐츠를 삽입 👇🏼 다양한 속성들 `sr
2nd Project 기억하고 싶은 코드 (1) : 요소 벽돌 쌓기 🚛
화요일 다섯 시간을 허비 공부했던 이미지 요소 벽돌쌓기! 1. Display: grid 요소의 크기가 일치한다면 Grid를 이용 시 아주아주 쉽고 차곡차곡 예쁘게 쌓을 수 있다! 일정한 높이의 요소들에 Grid를 적용하고 싶다면 여기를 참고하면 좋을 것 같다. 아주 친절하게 설명되어 있다. 하지만 요소의 크기가 다른 경우😢 grid를 사용하면 같은 열에 놓인 셀의 높이가 동일해지기 때문에 높이가 낮은 요소 아래에는 여백이 생긴다. ( 아래 예시는 B 요소의 높이만 다르지만 모든 요소의 높이가 달라지면 더 지저분해진다. )![](https://images.velog.io/images/i01029407043/post/