neda의 블로그

데이터 형식 설명 예시 정수 -1,0,1 십진수 0.1, -0.1, 10, 11 number에 단위가 있는 것 100px, 90deg, 상대적인 값 100% 에 있는 단위 중 하나 css에서 길이 값을 나타낸다. 글꼴(font) 기반 상대 길이 단위 설명 cap 요소의 대문자 높이 em font-size에 의한 글꼴 크기 ex font의 x-height를 나타냄. 일반적으로 소문자 높이 rem 루트 요소의 font-size에 의한 글꼴 크기 ch 글꼴에서 "0"의 사전적인 너비 측정값 lh 요소 줄 높이 rlh 루트 요소 줄 높이 뷰포트(viewport) 기반 상대 길이 뷰포트의 종류에는 4가지가 있다. Small - sv Large - lv Dynamic - dv Default 단위 설명 vh (vh,..

외부 디스플레이 유형 block 새로운 라인으로 넘어간다. 크기 속성 width, height 속성이 가능하다. padding, margin, border가 다른 요소에 영향을 준다. 일반적으로 100% 공간을 차지한다. inline 새로운 라인으로 넘어가지 않는다. 크기 속성이 적용 되지 않는다. 수직 padding, margin, border가 적용은 되나 다른 요소에 영향을 주지 않는다. 수평 padding, margin, border가 다른 요소에 영향을 준다. 내부 디스플레이 유형 flex 외부 디스플레이 속성은 block를 유지 내부 자식 요소를 flex 항목으로 설정 flexbox 레이아웃 박스 영역 Content : 콘텐츠 표시 영역 Padding: 콘텐츠와 보더 사이의 공백 Border:..

자손 결합자 첫 번째 선택자의 아래에 존재하는 모든 두 번째 선택자 선택 단일 공백(" ")으로 표시 body div { background-color: red;} 자식 결합자 첫 번째 선택자의 바로 아래에 존재하는 모든 두 번째 선택자 선택 보다 큼 기호(>)로 표시 body > div { background-color: red;} 인접 형제 결합자 첫 번째 선택자의 바로 뒤에 오는 요소가 두 번째 선택자와 일치하면 선택 더하기 기호(+)로 표시 제목(h1) 바로 뒤에 오는 단락(p) 선택 h1 + p { color: #ccc;} 일반 형제 결합자 첫 번째 선택자의 형제 중 두 번째 선택자와 일치하면 선택 물결표(~)로 표시 제목(h1) 과 형제 관계인 모든 단락(p) 선택 h1 ~ p { color:..

Universal 선택기 - * * { color: black;} Type 선택자 - 타입명 {} p {color: red;} Class 선택기 - .클래스이름 .myClass { color: red;} Id 선택기 - #아이디이름 #myId { color: red;} attribute 선택기 - 타입[속성="속성값"] presence, value 선택기 선택자 예시 설명 [attr] a[href] 해당 요소에 해당 속성이 존재하는 경우 [attr=value] a[href="#"] 해당 요소에 해당 속성의 값이 일치하는 경우 [attr~=value] a[class~="myClass"] 해당 요소에 해당 속성의 값이 일치하거나 (공백으로 구분된) 값 목록에 포함되는 경우 (ex. class="myClass..

cascading의 사전적 의미로는 ' 종속, 상속, 폭포' 등이 있다. CSS는 이 세 가지가 핵심이라 할 수 있다. 종속(Cascade) 먼저 CSS는 동일한 규칙의 경우 나중에 적용되는 규칙이 적용된다. 아래를 보면 같은 태그에 대해 같은 속성을 사용한 규칙에서 늦게 정의된 blue color가 적용된다. what color? HTML 삽입 미리보기할 수 없는 소스 특이성(Specificity) 특이성은 다른 선택자를 통해 같은 요소를 지목하고 있을 때, 더 특이성이 높은 선택자에서 정의한 속성이 적용되는 것이다. 아래의 코드에서 보면 'p'라는 요소 선택자 보다는 '#red'라는 아이디 선택자가 더 구체적이기 때문에 더 특이성이 높다고 판단하여 먼저 정의되었음에도 불구하고 red color가 적용..

HTML 삽입 미리보기할 수 없는 소스

구문 property: calc(expression); 아래의 경우처럼 260/3을 할 경우 86.666...으로 나누어 떨어지지 않을 때 유용 속성 값을 직접 계산하지 않고 수식을 입력하면 알아보기 더 편하다. 86.666666px로 할 경우 므슨 뜻인지 한 눈에 알기 어렵다. 계산 가능한 연산자 + - * / HTML 삽입 미리보기할 수 없는 소스

CSS(Cascading Style Sheets)는 이름 처럼 웹 사이트의 스타일을 지정하기 위한 코드이다. Cascading 의 의미처럼 종속적이고 상위->하위로 폭포가 흐르듯이 스타일이 지정된다. 특정 요소의 스타일을 지정 뿐만 아니라 하위 요소에 대해서, 형제 요소에 대해서 지정할 수도 있다. 기본적으로 css는 head태그 내에 로 포함될 수 있으며, 독립적인 파일로서 style.css처럼 저장될 수도 있다.파일의 경우 내에서 태그를 통해 불러올 수 있다. p { color: red; } HTML 삽입 미리보기할 수 없는 소스 CSS의 구조 먼저 선택할 태그 이름 또는 id, class 이름 등을 selector로서 적고 속성과 속성값을 콜론(:)으로 구분하여 중괄호로 감싼다. 각 속성값 선언의 ..