짝수 행에만 배경 색상 적용해보자엑셀과 같은 여러가지 문서를 활용하다 보면 표를 삽입하였을때 자연스럽게 짝수 행에 색칠이 되어있는 것을 볼 수 있다.이렇게 데이터 테이블에서 행의 배경색을 교차로 설정하면 가독성이 좋아진다. 이를 구현하기 위한 핵심은 nth-child(even)이다. CSS의 nth-child(even) 선택자를 활용하면 짝수 행에만 배경색을 입힐 수 있다.만약 홀수 행에만 배경색을 입히고 싶다면 nth-child(odd)를 사용하면 된다.    코드 예제datatable이라는 클래스를 가진 테이블의 짝수 행에만 색을 적용해보자. HTML //데이터테이블 생성 이름 나이 직업 주지훈 25 판교 개발자 ..

자주 사용하는 tailwind class 이름을 정리해보자이 글에 없는 다른 className을 찾고 싶다면 다음 공식문서에서 확인 할 수 있다: https://tailwindcss.com/또한, 카카오 엔터 기술블로그에서도 tailwind css 사용기에 대해 정리해두었으니, 흥미가 있는 사람들은 한번 들어가서 보길 추천한다: https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/ Tailwind CSS 사용기 | 카카오엔터테인먼트 FE 기술블로그서종만(coze) 생산성을 높이는 일을 좋아합니다. 오늘 1분 걸린 작업이 내일 30초 걸리는 방법을 발견하면 기뻐합니다.fe-developers.kakaoent.com 레이아웃(Layout)contain..

HTML을 영단어 외우듯이 암기하고 있는 개발자는 없다. 항상 필요할 때 마다 검색을 해보고, 그때 그때 사용하는 편이다 이번 글에서는 진짜 자주 사용하는데, 정작 헷갈리는 태그들에 대해 정리해보자 반드시 다 외우라는 것이 아니다! 여러번 보면 자연스럽게 익숙해듯이, 이번 기회에 한번 더 보라는 취지의 글이다. CSS-Tricks 에서 제공한 자료에 따르면 가장 유명한(자주 쓰는) HTML 태그는 위와 같다 그럼 진짜 자주 쓰지만, 정작 헷갈릴 때가 많아 항상 검색해보는 태그들에 대해 알아보자 주석이다 가끔 // 나 /* 을 사용하는 경우가 있는데, 이건 Javasciprt 주석이다. 이걸 헷갈리는것 만큼이나 쪽팔린건 없으니까 꼭 기억하자 문서의 구획을 정의한다. 실제 프로젝트에서 CSS와 함께 활용할 ..

CSS 파일을 HTML 파일에 적용해보자 1. css 파일을 만든다 2. 태그 안에 아래 코드를 작성한다 아래처럼 head태그 안에 넣으면 된다 style.css 는 css 파일 명이다 ./은 파일 경로를 나타내며, 현재 나는 css 파일과 html파일을 동일한 폴더 안에 만들어서 동일한 폴더라는 의미로 ./라고 썼다 만약 동일한 폴더안에 있지 않으면 경로를 적어주면 된다 *예를 들어 html은 alpha폴더에 있고 css파일은 beta폴더의 test 폴더 안에 있다면 href="beta/test/style.css" 라고 작성한다 왜 body 태그 안에 넣으면 안 될까? 로딩 성능 및 렌더링 효율 때문이다. 브라우저는 HTML 문서의 부분을 먼저 처리하고 페이지의 레이아웃을 그리기 위해 스타일 정보를 기..

HTML을 처음 배울때 Atom을 설치하라고 배웠다 하지만! Atom은 2022년 말 서비스 종료가 되어서 더 이상 사용이 불가능하다 ㅠ.ㅠ 그래서 대체재를 찾다가 VSCode(Visual Studio Code)를 사용하는 방법이 있어서 소개해보려고 한다 방법은 총 3단계로 매우 간단하다 초보자라면 반드시! 꼭! 4번까지 읽어주세요.🎲 1. 비주얼 스튜디오 코드 설치하기https://code.visualstudio.com Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applicat..

🎲 1. HTML과 CSS HTML과 CSS는 웹 개발에서 중요한 역할을 수행하는 두 가지 언어로, 웹 페이지를 만들고 꾸미는 데에 필수적이다. HTML과 CSS는 서로 협력하여 웹 페이지를 완성시키는데, HTML은 정보의 구조를 결정하고, CSS는 그것을 디자인과 스타일링하여 보기 좋게 만들어준다. HTML이 건물의 구조라면 CSS는 건물의 외벽, 간판이다. 웹 개발자들은 이 두 가지 언어를 함께 사용하여 웹 사이트를 개발하고, 사용자 인터페이스를 디자인한다. 🎲 2. HTML HTML 은 웹문서를 만들 때 쓰는 마크업 언어이다. 홈페이지에 접속하여 이 버튼 저 버튼을 클릭하면 다른 페이지로 옮겨가곤 한다. 이렇게 텍스트 간 이동하는 것을 하이퍼텍스트 라고 한다. HTML은 하이퍼텍스트를 만들기 위해 ..