html code

CSS code

          / px(정확하게 조절되기 때문에 많이 씀), 
          / rem(배수, 1rem 2rem ) |

| letter-spacing | 글자 자간 설정 | letter-spacing : px; | | line-height | 글자 행간 설정 | line-height : px; | | text-align | 글자 정렬 설정 | text-align : center / start / end / justify | | :hover | 마우스 올렸을 때 이벤트 발생 | div:hover{} / 대상에 이벤트 발생 div:hover>section{} / 마지막 인접 선택자에 이벤트를 발생 | | text-decoration | 텍스트 밑줄 설정, a 태그 노멀라이즈 할 때 주로 씀 | text-decoration : none; / underline / underline dotted / underline dotted red / green wavy underline | | margin | 바깥 여백 | margin : 10px 20px 30px 40px ( top부터 시계방향 적용) margin: 10px ( 전 범위) margin: 20px 10px (상하, 좌우 순으로 적용) | | padding | 안쪽 여백 | margin과 동일 | | :nth-child(n) | 몇 번째 자식 선택 | div:nth-child(n) n번째 자식 그리고 div 인 것(div 아니면 선택X) n번째는 연산 가능 ex> 2n / 2n+1 | | :nth-first-child | 첫 번째 자식 선택자 | 위와 동일 | | :nth-last-child | 마지막 자식 선택자 | 위와 동일 | | :nth-of-type(n) | 특정 엘리먼트 중 몇번째 | div:nth-of-type(n) / nth:child 와 비슷하지만 다르게 몇번째 자식 중 div 인 것이 아니라 div 중 몇번째 라는 의미이다. | | :only-child | 자식이 하나만 있는 것 선택자 | div>a:only-child / div 중 자식이 a 하나만 있는 엘리먼트 지정 | | not(:only-child) | 자식이 유일하지 않는 엘리먼트 선택 | div>a:not(:only-child) / div 중 자식이 a 가 유일하지 않은 엘리먼트 지정 | | border | 테두리 설정 | border: 5px**(테두리 두께)** soild**(테두리 종류)** red**(테두리 색) 테두리 종류 : soild / dashed / double / ridge** | | border-radius | 테두리 모서리 둥글게 | border-radius : % / px | | position | 엘리먼트의 상태 설정 | position : static (기본 값 사람) position : relative (사람, 유령의 집) position : absolute (유령, 유령의 집) position : fixed (유령, 유령의 집 / 스크롤바를 따라 다님) | | z-index | 겹쳐진 애들의 보여주는 우선순위를 정해줌 (레이아웃 같은 거임) | z-index:1 / 숫자 값은 절대적인 수치는 아니고 상대적으로 높은 숫자 순으로 앞으로 표시 | | transform | 중앙 정렬을 하기 위해 사용 하는데 꼭지점에 있는 기준 점을 변경 해준다. | transform : translateX(-50%); translateY(-50%) = translate(-50%, -50%) (동일하게 사용) | | white-space | 글자의 줄 바꿈 설정 | white-space:wrap → 기본 값 줄 바꿈을 하겠다. white-space:nowrap → 줄 바꿈을 안 하겠다. | | overflow | 밖으로 나가는 글씨에 대한 표시 설정 | overflow:hidden / 밖으로 나간 글씨 숨김 overflow:auto / 자동으로 스크롤 생성 (문장이 길지 않으면 생성X) overflow:scroll / 스크롤 생성 (길지 않아도 무조건 생성) text-overflow:ellipsis / 밖으로 나가는 글씨를 … 으로 표시 overflow:none / 밖으로 나가는 글씨 자름 | | border-collapse-collapse | 테이블에 걸어서 공백을 제거 | border-collapse:collapse | | width | 너비 설정 | width : 10px; min-width : 10px; / 최소로 줄어도 10px 보다 줄지 않겠다. max-width : 10px; / 최대로 늘어나도 10px 넘지 않겠다 | | height | 높이 설정 | height : 10px; min-height : 10px; / 최소로 줄어도 10px 보다 줄지 않겠다. max-height : 10px; / 최대로 늘어나도 10px 넘지 않겠다 | | ::after | 글자 뒤에 추가 글자 | div::after{ content : “ text “ } 기본적으로 숨겨져 있으며 div의 자식으로 되어 있다 | | ::before | 글자 앞에 추가 글자 | div::before{ content : “ text “ } 기본적으로 숨겨져 있으며 div의 자식으로 되어 있다 | | transition | hover 로 변화되는 것 지연 설정 | transition : width(변화 변수) 3s(지연시간) 3s(시작 대기시간) | | opacity | 투명도 조절 | opacity: 0~1; (0.5=.5 이렇게도 표시한다) | | box-sizing | 박스 사이즈 설정 | box-sizing : content-box / 기본 값 → 박스 내부를 내가 설정한 너비만큼 박스를 만들겠다. box-sizing : border-box / 테두리 여백 등 다 포함해서 내가 설정한 너비만큼 박스를 만들겠다 | | display:flex | 오토레이아웃 설정 | display:flex /중요해서 별도로 적음 | | flex-wrap | flex 내부 자식들이 줄 바꿈을 하게 해주는 기능 | flex 는 블럭과 유사하게 한 줄을 차지하는데 안에 있는 자식들은 한줄의 영역에서 절대 줄 바꿈이 없이 공간을 나누어서 차지함, 거기서 줄바꿈을 하게 해줌 flex-wrap : nowrap / 기본 값 flex-wrap : wrap / 줄 바꿈 가능 | | flex-direction | 정렬 방향 | flex-direction : row / 세로정렬 flex-direction : column / 가로정렬 | | justify-content | 가로축 정렬 방법 | justify-content : center / flex start / flex end etc. space-between → 개체 사이의 간격을 벌린다. space-around → 개체 주변의 간격을 벌린다. | | align-itmes | 세로축 정렬 방법 | align-itmes : center /flex start / flex end etc. | | flex-grow | 남은 공간을 얼마나 차지할지 비율로 지정 | flex-grow : 1 ⇒ 숫자는 절대값X → 상대적인 비율 | | flex-shrink | 공간이 부족할 때 얼마나 줄어들지 설정 | flex-shrink : 1 ⇒ 숫자는 절대값X → 상대적인 비율, 기본 값이 0이며 0인 상태에서는 이기적이게 공간의 크기를 유지하겠다는 의미임 | | flex-basis | 기본 크기 지정 | flex-basis : px / % / auto ⇒ flex-direction 이 row 상태면 가로 크기(width), column 상태면 세로 크기(height)로 설정 됨 | | align-self | 해당 요소만 개별적으로 세로정렬 | align-self : center / flexstart /flexend | | | | |

js code