🔍CSS Box Model에 대해 정리! CSS Box Model HTML 요소를 감싸는 상자 요소, 패딩, 테두리, 마진으로 구성됨 요소: 텍스트, 사진 등 보여줄 대상 패딩: 요소 주변 영역을 감싼다. 테두리: 요소와 패딩을 감싸는 테두리 마진: 테두리 밖의 영역을 감싼다. CSS Box Model은 블록 박스에 적용되며, 인라인 박스는 일부 동작만 사용한다. inline 요소는 width, height, 상하 margin 값 적용 X width 요소의 너비 기본값은 콘텐츠 영역의 너비지만 box-sizing 속성을 사용하여 테두리 영역의 너비를 설정 auto: 기본값. 브라우저가 계산하여 지정 min-content: 최소 너비 max-content: 컨텐츠 내용의 선호 너비 fit-content: ..

블록 레벨 요소 🆚 인라인 레벨 요소 블록 레벨과 인라인 요소의 분류는 HTML 4.01까지 사용되었다. 현재 표준 HTML5에서는 콘텐츠 카테고리 집합으로 대체되었다. block 부모 요소의 전체 공간을 차지하여 블록을 만듬. 언제나 새로운 줄에서 시작, 좌우 양측으로 가능한 모든 너비를 차지한다. 앞뒤 요소 사이에 새로운 줄을 만든다. 이전 이후 요소 사이에 줄 바꿈이 일어남. 페이지의 구조적 요소를 나타낼 때 사용 블록요소는 인라인 요소 안에 중첩 될 수 없지만, 인라인 요소는 블록 요소 안에 중첩될 수 있다. width, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있다. div, p, li, nav, footer inline 항상 블록 레벨 ..

🔍CSS 선택자 중 가상 클래스와 가상 요소 선택자에 대해 정리! 가상 클래스 선택자 ( : ) pseudo selectors 선택한 요소가 특별한 상태여야 만족한다. :first-child 형제 요소 그룹 중 첫 번째 요소 :last-child 형제 요소 그룹 중 마지막 요소 :nth-child 형제 사이에서의 순서에 따라 요소 선택 가능 :nth-of-type 형제 그룹 안에서 위치를 기반으로 형제 요소 선택 :only-of-type 동일한 유형의 형제가 없는, 형제 요소 중 유일하게 사용된 태그 선택 :not 부정 선택자 :root html 전역 번수 선언할 때 사용 See the Pen Untitled by astinaus (@astinaus) on CodePen. 가상 요소 ( :: ) 선택자에..

🔍코드펜 사용법과 티스토리 게시글에 붙여넣는 법까지 간단하게 정리해보았다. 코드펜(CodePen)이란? 코드펜(CodePen)은 사용자가 만든 HTML, CSS, 자바스크립트 코드 조각을 테스트하고 시연하기 위한 온라인 커뮤니티이다. 출처 - 위키백과 CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 코드펜에서 자신이 만든 HTML, CSS, JS 코드를 테스트할 수 있고, 티스토리 같은 블로그에 공유할 수도 있다. 티스토리를..

✏️CSS에서 텍스트를 꾸미는 속성들을 정리해봅시다. color 폰트의 색상을 나타낸다. 폰트의 속성을 정의하지만 font- 가 앞에 붙지 않는다. 주의할 것! 키워드(red, blue) , HEX(# + 16진수 색상코드), rgb(), rgba(), hsl(), hsla()등 다양한 방법으로 표기할 수 있다. 보통 HEX표기를 많이 사용하며, 투명값을 위해 rgba도 많이 사용한다. transparent : 투명한 색 🧑‍🎨currentColor 부모에게 color값이 있다면 상속으로 처리된다. See the Pen Untitled by astinaus (@astinaus) on CodePen. font-family 폰트를 적용할 수 있다. 구글 폰트, 눈누 같은 사이트에서 쓰고자하는 폰트를 선택해 ..

🔍목록 관련 태그에 대해 정리해보자. ordered list의 약자. 순차적 목록을 뜻한다. 정렬된, 순서가 있는 보통 숫자 목록을 의미. type: 항목을 셀 때 사용할 카운터 유형 1: 숫자(기본값) a: 소문자 알파벳 A: 대문자 알파벳 i: 소문자 로마 숫자 I: 대문자 로마 숫자 start: 항목을 셀 때 시작할 수, 아라비아 숫자만 가능 reversed: 순서 역전 순서가 중요한 목록에 적용. ex) 레시피, 브레드크럼 🤔브레드크럼(BreadCrumbs) - 빵부스러기, 빵가루 사이트 구조와, 현재 페이지의 계층 구조를 링크 목록으로 나타낸 것. 사용자의 웹사이트의 탐색을 도와준다. See the Pen Untitled by astinaus (@astinaus) on CodePen. unord..