css30 [HTML #1] 태그 티스토리 블로그를 꾸미다 보니, 웹에 대한 매력에 빠져 좀 더 자세하고 깊게 배워보고 싶은 마음이 들어 HTML/CSS/JS 에 대한 지식을 정리하고 공유해 볼까 합니다. HTML HyperText Markup Language HTML은 웹 브라우저에 표시되는 기본적인 틀이라고 생각하면 됩니다. HyperText 하이퍼텍스트를 가장 중요한 특징으로 한다. 쉽게 말해 태그의 href 즉, 링크라고 생각하면 됩니다. Markup 마크업이라는 문법적인 형식을 가진 프로그래밍 언어 Language 컴퓨터 프로그래밍 언어 태그란? HTML은 확장자 로 시작해 로 마무리되어야 합니다. 서근 개발 노트 처음 등장하는 태그를 '시작 태그'라 칭하고, 슬래시가 있는 태그를 '닫히는 태그'라고 칭합니다. 그리고 그 태그 .. FRONT-END/HTML 2022. 7. 24. (CSS) display: flex에 여러 요소가 있을때 좌우 정렬 하는 방법 오늘은 HTML의 부모 클래스가 display: flex일 때, 자식 클래스를 좌우로 떨어뜨려 정렬하고 싶을 때 어떻게 하는지 알아보도록 하겠습니다. display flex 좌우 정렬 방법 우선, 부모 클래스가 display: flex이고 justify-content: flex-start로 우측에 정렬되어있다고 가정해보겠습니다. See the Pen Untitled by 서근 (@seogun95) on CodePen. 그럼 위와같이 이미지가 우측으로 딱 달라붙어 정렬되게 됩니다. 이때, left-img 요소를 좌측으로 정렬하려면 .left-img에 margin-right: auto; 만 넣어주게 되면 완벽하게 좌측으로 붙는 것을 확인할 수 있습니다. 마진을 오른쪽에 줘서 왼쪽으로 붙게 하는 방식이라고 .. FRONT-END/CSS 2022. 7. 7. (Icomoon) 티스토리에 CSS 아이콘 넣는 방법 티스토리에 CSS 아이콘 넣기 티스토리에 아이콘을 넣는 방법은 여러 가지가 있는데, 대표적으로 Font Awesome이라는 라이브러리를 사용하는 것입니다. 이것에 대해서는 저번 포스팅에 작성했기 때문에 궁금하신 분들은 아래 포스팅을 참고해주세요. Font Awesome 5 Pro 사용 방법 및 다운로드 Font Awesome 5 Pro (v1.15.4) 제 블로그에서 다양한 곳에 많이 사용된 폰트 라이브러리 중에 하나인 Font Awesome 5 Pro 버전에 대한 다운로드 방법과 사용방법에 대해 알아보려고 합니다. 현재 Font Awesome Pr.. seons-dev.tistory.com 이번에는 Font Awesome이 아닌 Icomoon을 사용해서 직접 아이콘을 만들어서 넣기까지 해 보도록 하려고.. TIP/CSS & Tistory 2022. 7. 4. (CSS) background-size에 hover transition animation 적용 안될때 해결방법 오늘은 background image를 hover시 확대되는 효과와 자연스러운 transition 애니메이션 효과를 간단하게 해결해보도록 하겠습니다. background-size transition animation CSS에서 background 이미지에 마우스를 올려 hover 효과를 주고 싶을 때가 있습니다. 보통은 transform: scale(1.1)처럼 사용하게 되면 transition효과가 적용되어 자연스럽게 커지는 효과를 받을 수 있지만, transform scale이 적용되지 않은 경우가 종종 있습니다. 먼저, 효과는 아래처럼 적용해주려고 합니다. 컨텐츠 요소에 마우스를 hover 시키면 이미지가 확대되는 형식인데, background-size를 사용한 방법입니다. 우선 이미지의 backg.. FRONT-END/CSS 2022. 7. 3. 폰트 용량 경량화 방법 및 TTF to WOFF 확장자 변경 폰트 용량 경량화 및 TTF to WoFF 블로그 스킨을 꾸미다 보면 페이지를 로딩하는 시간이 폰트 용량에 의해 느려지는 경우가 종종 있습니다. 보통 웹폰트를 CSS에서 그대로 사용하거나, TTF 폰트를 다운로드하여 가져오는 경우가 대부분인데, TTF 파일 안에는 한글 / 영문 / 특수문자 외에 글리프가 포함되어 있고 심지어 압축률까지 떨어지는 TTF 확장자를 사용하기 때문입니다. 그래서 이번에는 폰트 용량 경량화하는 방법 및 TTF에서 WOFF확장자를 변경하는 방법에 대해 알아보겠습니다. 폰트 경량화 방법 첫 번째로 글리프를 제거해주는 프로그램을 설치해주셔야 합니다. 일본에서 만든 サブセットフォントメーカー 이라는 프로그램인데, 아쉽게도 한국어는 지원하지 않습니다. 하지만 맥북과 윈도우 사용자 모두 지원.. TIP/Etc Tip 2022. 6. 30. (Javascript) HTML SVG파일에 원하는 색상 적용하는 방법 HTML SVG파일 색상 변경 코드 Html에서 Img 태그에 SVG파일을 업로드하고 난 후, 색상을 변경하고 싶을 때가 있는데, 그때 CSS Filter 효과를 통해 원하는 색상을 입혀줄 수 있습니다. 먼저, 원하는 HEX 코드가 필요합니다. HEX 코드는 다양한 경로를 통해 알 수 있는데 아래 사이트에서 Color Picker를 통해 알아내거나, 원하는 이미지를 업로드해서 HEX코드를 따올 수 있습니다. 👍 Color Picker online | HEX Color Picker | HTML Color Picker Color Picker:Color Picker: With this online tool you can upload an image or provide a website URL and get t.. FRONT-END/JAVASCRIPT 2022. 6. 30. 사파리에서 SVG가 나타나지 않을때 해결방법 사파리에서 SVG가 나타나지 않을 때 해결방법 티스토리 스킨을 꾸미면서 SVG를 사용하는 경우가 종종 있는데, SVG형식의 요소가 iPhone, iPad, MacBook 등 크롬, 사파리를 막론하고 SVG가 나타나지 않은 현상을 발견했습니다. 우선, 맥북에서 크로미움 브라우저로 접속하면 아래와 같이 정상적으로 출력되는것을 확인했지만, 이상하게도 iPhone 또는 iPad에서는 SVG가 나타나지 않았습니다. 그래서 MacBook을 통해 사파리로 접속후, 개발자 도구를 열어 확인해 보았습니다. ?! 애니메이션을 멈추고 보니 컨테이너를 완전히 벗어난 width 497px, height 497px로 되어 컨테이너에 담기지 못한 것이었습니다. 사파리에서 종종 SVG를 인식하거나 지원하지 않은 경우가 있다고 했었.. TIP/Etc Tip 2022. 6. 28. (티스토리) 사이드바 배경음악 컨트롤박스 꾸미기 완료 오늘은 현제 제 블로그 사이드바에 있는 배경음악 컨트롤박스를 꾸며보았습니다. 미넴 스킨에 기본적으로 배경음악 컨트롤 박스가 있는데, 미루고 미루다 이번에 디자인을 변경했습니다. 사이드바 배경음악 컨트롤박스 꾸미기 원래 미넴 스킨에 있는 기본 디자인은 이랬습니다. 심플하고 이쁘지만, 제가 원하는 디자인과는 조금 거리가 멀었어요! 그래서 시작한 디자인 변경 프로젝트(?) 일단 원하는 큰 틀은 컨트롤 박스 위에 CD가 있고, 그게 돌아가면 좋겠다고 생각했고 바로 실행에 들어갔습니다. 전체적인 큰 틀을 완성시키고, 애매했던 볼륨 조절 버튼을 Adobe Illustrator로 만들어서 넣어줬습니다. 그리고 원래는 재생 유무에 상관없이 CD가 계속 Spin 했었습니다. 저는 이게 조금 걸리더라고요. 그래서 재생 버.. PLAY/잡담 2022. 6. 28. (티스토리) 스킨 편집 자바스크립트 및 CSS가 많을 때 한 파일로 몰아넣는 방법! 이번에는 티스토리의 스킨에서 HTML부분 자바스크립트 및 CSS가 너무 길 거나 많을 때, HTML 부분을 깔끔하게 한파일로 넣고 호출하는 방법까지 알아보도록 하겠습니다. HTML의 자바스크립트가 너무 많거나 중복되면 구글 SEO에 안 좋기 때문에 해당 방법을 사용하는 것을 추천드립니다. 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 스킨 편집 자바스크립트 및 CSS 정리 방법 파일 생성 HTML에서 자바스크립트를.. TIP/CSS & Tistory 2022. 3. 17. (티스토리) 스킨 편집 기초 상식 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스킨 편집 기초 상식 스킨 편집 경로 티스토리에서 스킨을 편집하기 위해서는 관리 페이지로 가야 합니다. 관리 페이지로 가는 방법은 다양한데 아래와 같이 할 수 있습니다. https://본인의 티스토리 주소.tistory.com/manage 본인의 티스토리에서 단축키 Q 블로그 상단 프로필 또는 적용된 스킨에서 '관리' 버튼 클릭 관리 페이지에 오셨다면, 왼쪽 박스에서 꾸미기 ➜ 스킨 편집 ➜ html 편집을 차례로 눌러줍니다. 그러면 HTML / CSS / 파일업로드 탭이 오른쪽에, 왼쪽에는 프리뷰 창이 나오게 됩니다. HTML HTML은 블.. TIP/CSS & Tistory 2022. 3. 15. (티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! 오늘은 사이드바 카테고리 접기 및 펼치기 기능을 구현하면서 어떻게 적용시키는지 알아보도록 하겠습니다. 사이드바 카테고리 접기 및 펼치기 버튼 구현 티스토리에서 기본적으로 제공하는 카테고리는 보통 펼쳐진 상태입니다. 만약 본인이 사용하는 스킨에 카테고리 접기 및 펼치기 스크립트 기능이 없다면 카테고리의 서브메뉴가 길어지면 길어질수록 가독성도 그렇고 상당히 보기 지저분해지는 경향이 있습니다. 만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.t.. TIP/CSS & Tistory 2022. 3. 15. (티스토리) 본문에 형광펜 효과 주는 방법 본문에 형광펜 효과 주기 HTML 태그 중에는 B, I, U, S 태그가 있습니다. 글씨를 굵게 / 기울임꼴 / 밑줄 / 취소선을 표현하는 태그입니다. 티스토리 블로그에서는 이 태그를 활용하여 특정 문구를 강조하는 형광펜 효과를 낼 수 있습니다. 태그명 우선 각자의 태그 명을 알아보도록 하겠습니다. 굵게 단축키 : (윈도우) 컨트롤 + B / (맥) 커멘드 + B .tt_article_useless_p_margin>p>b 기울임꼴 단축키 : (윈도우) 컨트롤 + i / (맥) 커멘드 + i .tt_article_useless_p_margin>p>i 밑줄 단축키 : (윈도우) 컨트롤 + U / (맥) 커멘드 + U .tt_article_useless_p_margin>p>u 취소선 단축키 : (윈도우) 컨트.. FRONT-END/CSS 2021. 4. 15. (티스토리) 본문에 TOC 목차 넣기 Toc toc 란 toc는 table of contents를 의미하고, markdown으로 작성한 글의 header를 모아서 보여주는 용도로 사용됩니다. 제가 적용한 toc는 tocbot이고, 기본 스타일도 깔끔하지만 제 블로그 스킨에 맞게 CSS를 건드려 봤습니다. toc code 적용 방법 당연히 tistory skin을 html로 수정을 해야하기 때문에 약간의 html, javascript개발에 대한 지식이 필요합니다. 아래 각 부분을 위치에 맞게만 넣고, javascript 부분만 조금 수정을 하면 크게 문제 없이 적용 가능할 것 같습니다. 이 외에도 toc에 제목을 넣어주기 위해 tistory 기본 스킨 부분을 수정한 것도 있고, 브라우저 개발자 도구로 하나씩 찾아가면서 뜯어 고친 부분도 몇 있.. FRONT-END/CSS 2021. 4. 14. (티스토리) 마우스 오버시 썸네일이 움직이는 애니메이션효과 이번에는 마우스를 이미지에 올리면 애니메이션 효과를 가지고 좌우로 움직이는 코드를 만들어 보겠습니다. 마우스 오버 시 애니메이션 효과 우선 제가 적용한 부분은 메인화면의 썸네일 부분입니다. TIP 사용자 스킨에 따라 썸네일의 class가 다르기 때문에 크롬에서 오른쪽 마우스 클릭 후 검사를 통해 정확한 위치를 파악하는 것이 좋습니다. 제 스킨의 경우는 thumbnail이네요. 여러분들도 정확한 위치를 찾으셨다면, 우선 애니메이션을 만들어주셔야 합니다. 적용 하기 CSS /*썸네일 애니메이션*/ @keyframes post-ani { 25% { transform: rotate(2deg) scale(1.01); } 50% { transform: rotate(0deg) scale(1); } 75% { tran.. FRONT-END/CSS 2021. 4. 14. (티스토리) 사용자 테마에 따라 다크모드 적용하기 이번에는 사용자가 다크모드인지 라이트모드인지에 따라 티스토리 블로그의 스킨을 변경해보려고 합니다. 우선 제가 꾸민 화면부터 보여드릴께요 :) 라이트모드 다크모드 다크모드로 지정하면 라이트와는 다르게 색이 다르게 보이게 됩니다 :) 저는 맥에서 낮에는 라이트모드, 밤에는 다크모드로 자동으로 설정되게 해놨는데 블로그도 이방법을 사용하면 자동으로 스킨이 변경되는 방식입니다. 이것을 적용하려면 CSS 를 이해하고 계셔야 합니다. 사용 방법 /* 다크 모드 */ @media (prefers-color-scheme: dark) { #main { background-color: #555; } ... } 위 코드는 CSS에서 운영체제가 선호하는 색상 테마가 다크모드인지 감지해 다크모드 일때만 해당 코드를 실행하는 구조.. FRONT-END/CSS 2021. 4. 14. 이전 1 2 다음 한국어 (기본) English Русский 日本語 👉🏻 잠깐만요! 이 글도 한 번 보고 가세요 이전글 다음글 티스토리툴바 서근 개발노트구독하기