잊기

margin - 요소의 외부 공간을 지정하는 단축속성 * 음수 ( - ) 값을 지정할 수 있음 * 단축속성 : 각각의 방향을 한번에 제어해 주는 속성 값의 갯수에 따라 적용값이 달라짐 (기본적으로 위~ 시계방향) 개수 : 1(전체), 2(위아래, 좌우), 3(위, 좌우, 아래), 4(위, 우, 아래, 좌) 0 : 여백없음 auto : 가운데정렬 단위 : px, em 등 지정 margin-top / bottom / right / left : 각각 지정 가능 padding - 요소의 내부 공간을 지정하는 단축속성, 요소의 크기가 커짐 0 : 여백없음 단위 : px, em 등 지정 % : 부모요소의 가로너비에 대한 비율로 지정

width auto : 기본값 (브라우저가 너비를 계산) 인라인요소 (span등) -> 컨텐츠 크기만큼 줄어듬 블록요소 (div등) -> 가로 : 부모 요소의 크기만큼 늘어남 / 세로 : 컨텐츠 크기만큼 줄어듬 max-width, max-height - 요소가 가질 수 있는 최대 너비, 높이를 제한 - 기본값(제한없음) : none min-width, min-height - 요소가 가질 수 있는 최소 너비, 높이를 제한 - 기본값(제한없음) : 0 단위 : px, em, vw 등 단위로 지정 px : 픽셀 % : 상대적 백분율 em : 요소의 글꼴 크기 ( 상대적인 값이므로 상속값에 따라 유동적일 수 있음 ) rem : 루트요소(html)의 글꼴크기 (기본값 : 16px; ) vw :뷰포트 가로 너비의 ..

내가 얼마나 알려나... 종류나 설명이나 기억 나는 대로 적어보는거라 틀릴 수 이뜸 정확한건 추후 강의 보면서 포스팅하는 글로 확인..; 박스 모델 - 가로, 세로, padding, margin 글꼴, 문자 - font, size, style(underline..) 배경 - background size, image, color 배치 - 명령어가 생각이 안나... 잘 사용하는 편은 아니지만 위(top), 좌(left)에서 얼마나 떨어져있게라던가 고정식으로 지정 가능 정렬 (플렉스) - 플렉스랑 그리드랑 헷갈린다아.. @.@ 전환 - 요소가 전 / 후로 변화할 때 자연스럽게 바뀌는 애니메이션 효과 부여 변환 - 요소를 회전하거나 이동, 크기를 조절해주는 효과 (회전문처럼? 평면상태의 요소가 좌우, 위아래 등..

같은 요소가 여러 선언의 대상이 된 경우 우선 순위를 결정하는 방법 1. 점수가 높은 선언이 우선 2. 점수가 같다면, 마지막에 해석된 선언이 우선 점수는?? !important > 인라인 선언 > id > class, 가상class ( :hover 등) > tag, 요소선택자 ( ::before) :not (부정선택자) 은 점수 계산을 하지 않음 인라인 선언, !important 사용시 (점수가 너무 높아져서) CSS에서 수정이 불가하므로 지양 예전에 했던건데 선택자 연습게임이 있다 은근 어려울 때도 있어서 그런 부분은 유툽 검색해서 해설달린거 보고 참고하면되고 재미뜸.. 'ㅅ' / https://flukeout.github.io/

상속되는 CSS 속성들 ( 글자, 문자 관련 속성들 이지만 모든 문자속성은 아님 ) font-style : 글자 기울기 font-weight : 글자 두께 font-size : 글자 크기 line-height : 줄 높이 font-family : 폰트 (서체) color : 글자 색상 text-align : 정렬 .. 강제 상속 기본적으로 자동으로 상속되지 않는 속성들에 inherit 이라는 값을 통해서 부모 요소가 가지고 있는 특정한 속성의 값을 상속시켜 적용할 수 있음 .parent { width: 300px; height: 200px; background-color: orange; } .child { width: 100px; height: inherit; // 강제 상속, 부모속성을 상속받겠다 지정..

딸기 수박 오렌지 망고 사과 가상 클래스 ABC:first-child ( ABC가 형제 중 첫째라면 선택 ) 예시) .fruits div:first-child => fruits 클래스의 첫번째 자식이 div라면 선택 .fruits p:first-child => 첫번째 자식이 p가 아니기 때문에 성립하지 않음 (선택 X) ABC:last-child ( ABC가 형제 중 첫째라면 선택 ) 예시) .fruits h3:last -child => fruits의 마지막 자식이 h3이라면 선택 => 사과 .fruits p:last -child => 마지막 자식이 p가 아니기 때문에 성립하지 않음 (선택 X) ABC:nth-child(n) ( ABC가 형제 중 n번째 라면 선택 ) 예시) .fruits *:nth-ch..

기본 전체 선택자 * 태그 선택자 : 태그 이름으로 선택 div, ul, li 등 클래스 선택자 : .class id 선택자 : #id 복합 일치선택자 (선택자 조건 여러가지를 동시에 만족하는 요소 선택) 예시) span.orange { color:red; } 자식선택자 (선택자A의 자식요소 선택, > 사용) 예시) ul>.orange { color:red; } => ul태그의 자식중 클래스가 orange인 요소 선택 하위선택자 (선택자A의 하위요소 선택, 띄어쓰기 사용) 예시) div .orange { color:red; } => div태그의 하위요소 중 클래스가 orange인 요소 선택| 인접 형제 선택자 (같은 부모요소를 공유하는 형제요소 중 다음 하나 선택, + 사용) 예시) .orange+li ..

선택자 { 속성 : 값; } 선택자 : 스타일을 적용할 대상 (select) 속성 : 스타일의 종류 (property) 값 : 스타일의 값 (value) 주석 ( ctrl = / ) /* 주석내용 */ CSS 선언방식 내장방식 : html의 에 작성 style시트 없이 작성이 가능하지만 양이 많아지면 관리가 어려움 인라인방식 : 요소의 스타일 속성에 직접 작성 (선택자 없음) 선택자 사용시 지나친 우선순위를 갖고 있어서 css파일에서 수정이 불가 (유지보수 어려움) 링크 방식 : 외부 css문서를 가져와서 연결하는 방식 (병렬연결) @import방식 : css문서 안에서 또다른 css 문서를 가져와 연결하는 방식 예 ) main.css 내에 @import url ( "./box.css"); 입력 (직렬연..