안녕하세요, 성조입니다.프론트엔드를 개발하다 보면 흔하게 사용되는 CSS 프레임워크인 Tailwind CSS에 대해 포스팅하는 시간을 가져보려 해요.Tailwind CSS가 가독성 규칙이 좋지 못해서 추천받지 못하는 경우도 있지만, CSS감이 부족한 저에게는 많은 도움을 주고 있는 CSS 프레임워크입니다 😂 ※ 해당 포스트는 학습을 기록하기 위해 작성된 게시물로 다소 부족한 정보를 담고 있을 수 있습니다. 요즘 Nextjs에서는 Tailwind CSS 설치 및 설정을 초기 프로젝트 세팅에서 같이 설치하는 경우가 있다.만약 Tailwind CSS 패키지를 초기에 설치를 하지 않았다면 다음과 같이 프로젝트 폴더에서 Tailwind CSS를 설치할 수 있다. 1. Tailwind CSS 설치 및 설정# 프로..
안녕하세요. 성조입니다. 이번 포스팅은 HTML과 CSS를 활용해서 가볍게 하단에 고정된 메뉴바를 만들어보려고 해요. 만들게 된 이유는 티스토리에서 포스팅하다 보면 미리 보기, 맞춤법, 글감 검색, open source ~~ 임시저장 완료 같은 버튼이 있는 것을 보고 그냥 저런 기능도 가볍게 연습 삼아 만들면 좋겠다 싶어서 만들게 됐습니다. 예시 이미지 HTML 코드 메뉴 1 메뉴 2 메뉴 3 CSS 코드 .menu { background-color: #f2f2f2; padding: 10px; position: fixed; width: 100%; bottom: 0; left: 0; } .menu-details ul { list-style-type: none; margin: 0; padding: 0; te..
안녕하세요 성조입니다. 올바른 지식을 공유할 수 있도록 노력하고 있습니다. 혹여나, 잘못된 지식이 전달된다면 언제든지 댓글로 피드백 주시면 감사드리겠습니다! 시맨틱(Semantic) 태그란? 결론부터 말하면 웹 페이지의 의미론적 구조를 명시적으로 나타내는 것이다. 즉, HTML을 설계할 때 태그들이 무엇을 의미하는 것인지 브라우저 또는 봇에게 명확하게 알려주기 위해서 사용되는 것이다. 시맨틱 태그를 잘 활용하여 HTML을 설계하는 경우. 검색 엔진 최적화(SEO)에 도움 될 뿐 아니라, 웹 표준 규격을 준수하여 웹 접근성을 향상할 수 있다. 정리 정돈이 잘 되어있어서 스타일링 작업도 쉽게 할 수 있게 된다. 시맨틱(Semantic) 태그 정리 1. 태그 이 태그는 웹페이지의 헤더 부분을 정의하는데 로고,..
안녕하세요 성조입니다. 프로젝트를 진행할 때 프론트 백엔드 상관없이 모든 포지션에서 참여했지만 html을 작업할 때 작업 속도에서 버벅거림이 있었습니다. 생산성이 너무 비효율적이라 생각이 들어서 깊게 학습하지 못한 아쉬운 부분이 많았습니다. 그래서 "웹에 대한 지식을 더 단단하게 만들 필요가 있다."라는 생각에서 포스팅을 진행하게 됐습니다. HTML에는 태그는 다양한 태그가 존재합니다. 이번 포스팅에서는 작성에 관련된 태그를 다루지만 시맨틱 태그를 다루지 않으려 합니다. 향후 포스팅에서 다뤄보도록 하겠습니다! INDEX - 글 작성 관련 태그 [h, p, br, hr, pre] - 인용 태그 [abbr, address, bdo, blockquote, cite, q ] 글 작성 관련 태그 h 태그 Head..
안녕하세요 성조입니다. 평소에 CSS를 작업할 일이 생기면 필요한 태그들을 필요할 때 찾아서 사용하고 따로 복습하지 않아서 향후에 동일한 것들을 사용할 때 기억나지 않는 경우가 종종 있었습니다. 이번 포스팅을 시작으로 최대한 많은 기억을 남길 수 있도록 포스팅을 진행하면 좋을 것 같습니다. INDEX 1. CSS란? 2. CSS의 특징과 장단점 3. CSS구조 CSS란? "Cascading Style Sheets"의 약자로 CSS로 불린다. 이런 CSS는 HTML 또는 마크업 언어로 작성된 문서들이 웹상에 표현될 때 텍스트 색상, 글꼴, 스타일, 문단 간격, 크기, 배치 방법, 이미지, 레이아웃 설계 등 여러 가지를 제어하는데 사용되는 스타일 시트 언어이다. HTML로 웹 페이지의 뼈대와 같은 전체 설계..
안녕하세요 성조입니다. 클라이언트 사이드 Web API가 포함된 Javscript Code를 확인하기 위해서는 Vscode에서 터미널 환경이 아닌 브라우저의 환경에서 실행해야 됩니다. 다시 말하면 javscript의 경우 Node.js을 통해서 터미널로 코드의 실행을 확인할 수 있으나 html과 같은 파일을 작업하는 경우 확인하기가 불편합니다. 이런 경우를 위해서 Live Server 확장 플러그인을 설치하여 사용하면 실시간으로 확인하면서 수정할 수 있다는 장점이 있습니다. 바로 설치를 진행하겠습니다. Vscode로 진입합니다. 위와 같은 창이 실행됩니다. 좌측에 확장 버튼을 클릭합니다. 다음과 같이 좌측에 바로 나오는 경우도 있지만 Live Server가 없는 경우가 있을 수 있습니다. Live Ser..
안녕하세요 성조입니다! XML에 대해서 전공 수업으로 수강했고 배웠던 기억이 있는데 정리하지 못했던 부분들이 아쉬워서 포스팅으로 남겨보려 합니다. 학습한 내용에 대해서 주관적으로 이해한 부분을 작성한 포스팅이므로 100% 객관적인 정답이 아닙니다! 참고 자료로 사용해 주시면 감사드리겠습니다! XML(eXtensible Markup Language)이란? 위키백과 "W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다. XML은 SGML의 단순화된 부분집합으로, 다른 많은 종류의 데이터를 기술하는 데 사용할 수 있다. XML은 주로 다른 종류의 시스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 ..
안녕하세요 성조입니다. 지난 포스팅입니다. 2022.03.05 - [Web Basic/HTML & CSS] - [HTML] 3. 태그 [HTML] 3. 태그 2021.12.08 - [Web/HTML & CSS] - HTML) 2. HTML 기본 용어와 구조 HTML) 2. HTML 기본 용어와 구조 안녕하세요. 이번 포스팅은 다음과 같은 구성으로 진행하려 합니다. ① 웹 용어 정리 ② HTML 용어 기본 ③ HTM.. okeybox.tistory.com 이번 포스팅 영역에서는 본인이 학습한 것도 있지만 타인에게 설명할 수 있도록 최대한 초점을 맞추고 학습을 할 예정이므로 존대 위주의 표현을 사용할 예정입니다. INDEX ㆍ 요소(Elements)란? ㆍ 속성(Attributes)이란? ㆍ 주석 요소(El..
