HTML32 [HTML #3] 태그 중첩 조합 li, ul, ol HTML에서는 태그를 중첩해서 사용하는 경우도 빈번한데 이번에는 왜 태그를 중첩해서 사용해야 하는지 알아보도록 하겠습니다. HTML 중첩 태그 대표적으로 중첩 태그를 흔하게 사용하는 것은 바로 리스트입니다. 태그를 사용해 보면서 중첩 태그란 무엇인가에 대해 알아보죠. 리스트형식인 텍스트를 정렬하고 싶을 때는 태그를 사용하여 쉽게 정렬해줄 수 있습니다. 서근 미진 희진 유진 만약 섹션이 있는 리스트를 만들고 싶다면 태그를 중첩 사용해야 합니다. 예를 들어 아래와 같이 단순히 공백만 준다고 해도 HTML에서는 이를 인식하지 않고 그대로 나열된 상태로 출력하게 됩니다. 서근 미진 희진 유진 HTML CSS JS 이를 해결하기 위해서는 태그를 중첩 사용 하면 됩니다. See the Pen Untitled by .. FRONT-END/HTML 2022. 7. 24. [HTML #2] 속성 과 링크 a, href="" target="_blank" 이 번에는 HTML의 속성이라는 문법과 링크라는 가장 중요한 두 가지 기능을 어떤식으로 표현할 수 있는지 알아보도록 하겠습니다. HTML 속성 및 링크 하이퍼링크로 지정된 텍스트를 클릭하면 특정한 웹사이트로 이동하게 되는 속성을 사용하고 링크로 연결시킬 수 있습니다. 여기서 라는 태그를 먼저 알 아야 합니다. A는 Anchor이라는 약자입니다. 즉, 어떠한 문자가 링크에 Anchor(고정, 연결) 되어 있다는 의미로 사용된 것으로 보입니다. 그렇다면 이 태그를 어떻게 사용할 까요? Href See the Pen Untitled by 서근 (@seogun95) on CodePen. 전 게시글에서도 말했듯, 태그에 href 속성을 통해 링크를 페어링 시켜줄 수 있습니다. 태그만으로는 정보가 부족하다고 HTM.. FRONT-END/HTML 2022. 7. 24. [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. (티스토리) 태그 쉼표 제거 하는 방법 - Javascript 티스토리 스킨을 꾸미다 보면 태그 부분 뒤에 쉼표( , )가 나타나는 경우가 있는데, 오늘은 이 태그 쉼표를 제거하는 방법에 대해 알아보겠습니다. (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 태그 쉼표 제거 방법 태그 클래스 찾기 방법은 아주 간단합니다. 우선, 티스토리 스킨 편집 HTML 부분에서 찾기로 태그 클래스를 찾아줘야 합니다. 보통은 티스토리 태그 치환자인 를 찾아주신뒤, 해당 부분의 클래스가 있다면 그 클래스를 복사하시고, 클래스가 없다면 클래스명을 추가해주시면 됩니다. 제 스킨의 경우.. FRONT-END/JAVASCRIPT 2022. 7. 2. (Illustrator) 원하는 이미지를 아이콘 SVG파일로 만드는 방법 원하는 이미지를 아이콘 SVG파일로 만들기 오늘은 Adobe Illustrator으로 원하는 아이콘을 가져와서 SVG파일로 만들어주는 방법에 대해 알아보도록 하겠습니다. SVG 벡터 이미지 만드는 방법 먼저, 원하는 아이콘을 구글이나 다양한 경로를 통해 스크린샷해서 파일을 저장합니다. 그리고 Adobe Illustrator을 열어준 뒤에, 해당 스크린샷을 업로드해주겠습니다. 저는 Notion 아이콘을 예로 들어서 진행해볼까 합니다. 파일 업로드 Adobe Illustrator에 업로드합니다. Image Trace 활성화 파일을 업로드했다면, 상단 바에 Window - Image Trace를 차례로 눌러 활성화시켜줍니다. 그러면 아래와 같이 Image Trace 도구가 활성화되는데, 하단부 Preview에.. ADOBE/Illustrator 2022. 7. 1. (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. (티스토리) 날짜를 현재 중심적 시간표시 하는 방법 (며칠 전, 몇 개월전..) 오늘은 댓글에서 요청해주셨던 포스팅 또는 댓글 등의 날짜를 현재 중심적인 시간으로 동적 표시하는 방법에 대해 알아볼까 합니다. 이 스크립트를 사용하게 되면, 하루 전, 며칠 전, 몇 개월 전, 약 몇 년 전처럼 나타낼 수 있습니다. 날짜를 현재 중심적 시간 표시하는 방법 제 블로그에 적용되어있는 스크립트는 크게 두 가지입니다. 하나는 nubiz 님께서 만드신 스크립트와 또 하나는 timeago 플러그인입니다. 둘 다 각자의 장점이 있는 거 같아서 저는 둘 다 사용하고 있습니다. nubiz 스크립트 nubiz님께서 작성하신 스크립트는 아래 블로그에서 그대로 적용하면 되는데, 왜인지 모르게 옛날에 작성하신 스크립트인지 본문의 게시글에서는 적상적으로 표시가 되지 않는 오류가 있었습니다. 또, 1년이 넘어가면 .. TIP/CSS & Tistory 2022. 6. 28. (티스토리) 포스팅에 인라인 코드블럭(inline code block) 적용 방법 및 팁! 티스토리에서 블로깅을 하다 보면 다음과 같은 코드들을 볼 수 있는데, 이게 코드 블럭도 아니고 그렇다고 텍스트도 아닌 신기한 박스를 보신 적이 있으실 거예요. 이 박스가 바로 인라인 코드블럭(inline code block) 이라는 네이밍을 한 요소입니다. 오늘은 인라인 코드블럭을 티스토리에서 사용하는 방법에대해 알아보겠습니다. 인라인 코드블럭 사용방법 위와 같이 코드를 강조하는 방법인 인라인 코드블럭을 사용하기 위해서는 에디터의 기본모드가 아닌 마크다운 또는 HTML에서 사용해야만 합니다. 각각의 사용법과 편의성이 다르니 하나씩 알아보도록 하죠! HTML HTML 편집기에서는 원하는 텍스트 앞과 뒤에 와 로 감싸주면 인라인 코드블럭을 사용할 수 있습니다. inline codeblock 저는 주로 HTM.. TIP/CSS & Tistory 2022. 3. 22. (티스토리) 블로그 하단에 원하는 버튼 기능 만드는 방법! (플로팅 버튼) 이번에는 블로그 하단에 원하는 기능을 넣을 수 있는 버튼을 생성하는 방법에 대해 알아보도록 하겠습니다. 이 버튼은 최하단에 고정됩니다. 이곳에 홈버튼, 방명록 버튼, 최상단으로 이동, 카카오톡 1:1 채팅 바로가기 등.. 다양한 기능을 넣을 수 있습니다. 블로그에 플로팅 버튼 만드는 방법 이 기능을 사용하기 위해서는 약간의 스킨 변경 지식이 있어야 합니다. 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com HTML 사.. FRONT-END/CSS 2022. 3. 20. (티스토리) 스킨 편집 기초 상식 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스킨 편집 기초 상식 스킨 편집 경로 티스토리에서 스킨을 편집하기 위해서는 관리 페이지로 가야 합니다. 관리 페이지로 가는 방법은 다양한데 아래와 같이 할 수 있습니다. https://본인의 티스토리 주소.tistory.com/manage 본인의 티스토리에서 단축키 Q 블로그 상단 프로필 또는 적용된 스킨에서 '관리' 버튼 클릭 관리 페이지에 오셨다면, 왼쪽 박스에서 꾸미기 ➜ 스킨 편집 ➜ html 편집을 차례로 눌러줍니다. 그러면 HTML / CSS / 파일업로드 탭이 오른쪽에, 왼쪽에는 프리뷰 창이 나오게 됩니다. HTML HTML은 블.. 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. 이전 1 2 3 다음 한국어 (기본) English Русский 日本語 👉🏻 잠깐만요! 이 글도 한 번 보고 가세요 이전글 다음글 티스토리툴바 서근 개발노트구독하기