UI를 꾸밀때 참고하는 사이트 먼저 시작 하겠다

- W3Schools Css 

css에 대해서 간단히 배울 수 있는 사이트이다 , css 말고도 많다 .

https://www.w3schools.com/css/default.asp

- Google Material ✨✨

폰트와 아이콘이 필요할때는  구글이 제공하는걸 써보자

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:radio_button_checked:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=radio&icon.size=24&icon.color=%23e8eaed

- Bootstrap ✨✨

다음은 아주 유명한 부트스크랩이다 

미리 만들어진 샘플이 많아서 가져다 쓰기 편하고

실제 실무에서 퍼블리셔에게 받는 기분이 든다, 최근에 아주 잘 쓰고있다

조각을 가져다가 쓰는 느낌이 강하다, 커스텀에 좀 닫혀있다

https://getbootstrap.com/docs/5.3/getting-started/introduction/

- Tailwind Css ✨✨✨

요즘 제일 핫한 css 프레임 워크가 아닌 가 생각이 든다 

리액트 책을 공부하면서 접하게 되었다

여러 Front framework 뿐만 아니라 일반 html/css/js 환경에서도 지원한다

css 파일을 작성하지않고 미리 일반화 된 클래스명을 가지고 챸챸 적용하는 느낌이 강하다

부트스크랩보다 좀더 고수준이다, 커스텀에 좀더 열려있다

내 생각에는 부트스크랩 충분히 쓰고 이거 쓰면 될듯하다

https://flowbite.com/docs/getting-started/quickstart/

다음은 흑백 에디터가 되겠다 , 오픈소스인걸 여러개 조사했는데 
과연 어떤 에디터가 생존하게 될 것 인가 ? 두구 두구

내가 쓰던 에디터는 네이버 스마트 에디터를 썻는데 결국에 유료화가 되어서 

이전 무료 버전의 코드를 뜯어 고쳐서 강제로 썻다가 앞으로 쓸 만한 에디터를 정리해 봤다.

각 에디터 별로 사이트 링크와 간단한 캡쳐사진을 준비했다.

참고로 웹 에디터에서는 의존성으로 jquery를 사용하는게 많더라.

- CkEditor 에디터 (라이센스 확인필요) 

나는 잘 사용안했지만 제일 많이 사람들이 썻던것 중에 이게 제일 유명했다

최신 버전(아마 5버전) 부터는 html/css 방식이아닌 npm 에서 제공하는 것 같다 ,

리액트 같은 프론트 프레임워크를 사용하고 라이센스 확인 잘 한후에 사용해도 무난 할 것 같다

참고로 라이센스에 관련된 질문이 구글링에 많은걸 볼 수 있다

지금은 아마 5버전이 최신인것 같은데, 실무에는 보통 html/css 환경에서 사용하는 설치형 4 버전이 많다.

(아마 사용하려면 4버전 설치형을 구해다가 쓰는게 맘편할 것 같다

CDN 스타일이나 현재 제공하는 4버전을 공식 사이트에서 다운로드 받으면 버전 이슈로 인한

에디터에 알림같은게 생기니, 그걸 또 커스텀 해서 안나오게 설정하는 공수가 필요하다)

* 참고 - 버전 이슈 시

https://ckeditor.com/

-SummerNote 에디터  (오픈소스) ✨ ✨ ✨

결론 부터 말하면 난 이게 킥이다.

저는 어떤 환경에서도 사용할 수 있는지 여부를 굉장히 중요시 여기거등요

부트 스크랩 4,5 버전과 호환이 되는 버전과

부트 스크랩 없이 사용하는 lite 버전이 존재하며

다양한 언어도 지원한다

*특징으로 이미지 넣을때 바로 base64 형태로 인코딩해서 img 태그를 생성해서 에디터에 바로 그려지기 때문에

별도의 업로드 이벤트 등록없이 사용이 되더라(물론 공식사이트에는 관련 이벤트 핸들러는 존재한다)

난 이부분이 킥이다. 

https://summernote.org/

* 실 사용기

-Toast 에디터  (오픈소스)

이것 일반 사용자들 보다는  md 파일 처럼 문법을 이용해서 사용할 수 있는게 특징이다

사진을 보면 가이드 문서 만들거나 정리할때 좋을 것 같다.

https://ui.toast.com/tui-editor

-Quill 에디터 (오픈소스)

이것도 있다. 이것도 제법 느낌있다

https://quilljs.com/

-prosemirror 에디터 (오픈소스)

이건 제일 심플해 보인다..이게 제일 안이쁘다 쓰지말자

https://prosemirror.net/

결과는 다음과 같다.

반응 테스트 

마우스를 올려만보라, 클릭해보라 

ㅁㄴㅇ

안녕하신가.

지난번에 이어 음악을 재생할수있는 태그를 소개하려한다

audio 태그인데 사용법은 매우쉽다

웹 화면을 캡쳐한거니 견빈의 등장에 놀라말길바랍니당

우선 하단에 3개의 음악바가있다 코드를 바로보자

12~14번에 src에 주목하자 sounds폴더 밑에있는 1~3 mp3파일을 사용한다는것이며

controls 속성은 자동재생이아닌 클릭하여 재생하는 방식이다

이 블로그에는 파일자체를 넣을수 없으니 직접하길바란다

음원은 저작권없는 음원을 사용하였다.

그림을 HTML 페이지에 삽입할수있는 태그이다 (재밋겠다)

img태그의 주요 속성은

src : 이미지의 경로 지정

alt : 이미지가 없을때 나오는 글자지정

width : 이미지의 너비 지정

height : 이미지의 높이 지정

간단한 실습해보자

뜬금 견빈사진이지만 사실 이건 HTML 코드로 나타낸걸 웹에서 캡쳐뜬거다

HTML 폴더로 지정한곳에 images폴더를만들고 그안에 jindo.jpg 파일을 위치하였다.

코드를 보자

Nothing이라는 파일이 존재하지않아서 alt 속성이 적용되어 "그림이 없습니다" 라고 나왔습니다.

그리고 10번줄 내용은 웹 디자인할때 크기를 맞춰놓고 이미지가 준비되어있지 않을때 사용하는 태그이다

끝에 300x200, 200x150, 100x100등이 있다

이미지 > 오디오 > 동영상 순으로 소개하겠다 :)