본문 바로가기

✏️

(36)

[CSS] 선택자(selector) 정리 🔗 기본 선택자 태그명 태그 선택 .class명 class 선택 #id명 id 선택 🔗 전체 선택자 * 전체 선택 🔗 자식 선택자 > 자식(직계) 선택 🔗 동위 선택자 ~ 모든 뒤 동위 선택 + 바로 뒤 동위 선택 🔗 속성 선택자 [속성="값"] ex) ul li input[type='text']{} 🔗 속성값 일치 선택자 ~= 해당 단어 포함 선택 (띄어쓰기 기준) *= 해당 단어 포함 선택 ^= 해당 단어로 시작 선택 |= 해당 단어로 시작 선택 $= 해당 단어로 끝 선택 ex) h1[title*='제목']{} 🔗 상태 선택자 :checked 체크된 상태 :enabled 수정 가능 상태 :disabled 수정 불가능 상태 :focus 초점이 맞춰진 상태 🔗 child, of-type child => ..

[CSS] link (hover, active, visited, link) :link default 평상 시 :visited 방문한 적이 있는 상태 :hover 마우스 오버 상태 :active 마우스 오버 + 클릭 상태 (+) cursor: pointer; : 마우스 오버 상태일 때 커서 포인터로 💡 같이 보면 좋을 Post [CSS] 왕초보를 위한 font / background / border 속성 총정리 css에서 속성은 '시계 방향'으로 적용 4개일 때 : top right bottom left 2개일 때 : x축(top, bottom) y축(left, right) 1개일 때 : all 🔗 Font color : 텍스트 색상 font-size : 텍스트 사이즈 default : 16px.. devjindev.tistory.com

[CSS] display (inline, inline-block, block) / 차이점 🔗 CSS에서 display란? 요소를 어떻게 보여줄지 선택하는 CSS 속성이다. display: inline; => width, height 지정할 수 X 요소를 inline으로 표시한다. , , , , , , 등 display: inline-block; => width, height 지정할 수 O 요소는 inline이지만, 내부는 block으로 표시한다. display: block; => width, height 지정할 수 O / width 100% 요소를 block으로 표시한다. 따라서 요소 앞 뒤로 줄바꿈 된다. , , , , , , , , , , 등 💡 같이 보면 좋을 Post [CSS] 왕초보를 위한 font / background / border 속성 총정리 css에서 속성은 '시계 방향'으..

[CSS] float / 해제하는 방법 🔗 CSS에서 float란? 요소를 띄어서(끌어올려서) 배치하는 CSS 속성이다. 🔗 float 해제하는 방법 자식이 모두 float를 가지면 부모 높이가 '0'이 되므로, 이를 되찾기 위해 float를 해제해줘야 한다. : after{ content: ''; display: block; visibility: hidden; clear: both; } 💡 같이 보면 좋을 Post [CSS] 왕초보를 위한 font / background / border 속성 총정리 css에서 속성은 '시계 방향'으로 적용 4개일 때 : top right bottom left 2개일 때 : x축(top, bottom) y축(left, right) 1개일 때 : all 🔗 Font color : 텍스트 색상 font-size ..

[CSS] position (static, relative, absolute, fixed) 🔗 CSS에서 position이란? 요소의 위치를 배치하는 CSS 속성이다. position: static; default position: relative; : 부모에 선언 => 기준 position: absolute; : 자식에 선언 => relative를 기준으로 position(top, left) position: fixed; : 위치 고정 ▪ overflow-y : 부모를 넘어간 자식 공간 처리 · hidden · scroll ▪ 우선순위 (숫자 클수록 우선순위 높아짐) default : 먼저 짠 거 < 나중에 짠 거 z-index: 숫자; 💡 같이 보면 좋을 Post [CSS] 왕초보를 위한 font / background / border 속성 총정리 css에서 속성은 '시계 방향'으로 적용 ..

[CSS] margin, padding / 차이점 width = width + (padding*2) + (border*2) px 📌 padding vs margin padding, border => width에 관여 margin => width에 관여 X (공간들끼리 서로 밀어내는 것) margin: 0 auto; : 가운데 정렬 box-sizing: border-box; : border가 width에 영향 주지 않게 해준다. margin이 겹치면, 더 작은 margin이 상쇄된다. 자식 margin이 부모를 넘어가면 미적용된다. => 그러므로, 부모가 padding을 가지는 것 > 자식이 margin을 가지는 것 자식 margin과 부모 padding은 섞이지 않는다. +된다. , 태그 등은 기본적으로 margin 값을 가지고 있다. css에서 속성은..

[CSS] font / background / border 속성 정리 css에서 속성은 '시계 방향'으로 적용 4개일 때 : top right bottom left 2개일 때 : x축(top, bottom) y축(left, right) 1개일 때 : all 🔗 Font color : 텍스트 색상 font-size : 텍스트 사이즈 default : 16px font-weight : 텍스트 굵기 · 100 : thin · 300 : light · 400 : regular · 500 : medium · 700 : bold · 900 : extrabold letter-spacing : 자간 (글자 간격) word-spacing : 단간 (단어 간격) white-space · normal : width에 맞추어 자동으로 줄바꿈 default · nowrap : width에 상관없..

[GitHub] README.md에 이미지 추가하는 방법 🔽 리드미 작성법은 아래 포스트를 참고해주세요 🔽 [GitHub] 왕초보를 위한 README.md 작성법 총정리 🔽 GitHub 사용법은 아래 포스트를 참고해주세요 🔽 [GitHub] 왕초보를 위한 깃허브 사용법 총정리 0. Github(깃허브)란? 깃허브란 컴퓨터 소스를 공유하고 협업하여 개발할 수 있는 웹 호스팅 서비 devjindev.tistory.com ① 먼저 이미지를 업로드할 README.md의 Git Repositoty로 이동합니다. ② 'Issues' 클릭 ③ 'New issue' 클릭 ④ 맨 위 Title을 작성하고, 업로드할 이미지를 입력창에 드래그 앤 드랍 합니다. ![Uploading ~] 이 상태에서는 잠시 기다려야 해요! ⑤ 로딩이 완료됐으면, 해당 텍스트를 복사한 뒤 'Subm..

이전 1 2 3 4 5 다음

티스토리툴바