$$config title: ?웹 코딩 keywords: - 선택자 - 정렬 - nbsp - hover $$ 붙여넣기 시 탭 활성화 안될 때 잘라내기 붙여넣기 후 다시 탭 -------- # 웹 코딩 ## 선택자 후손/자식 선택자 ` ` : 후손선택자 ` > ` : 자식선택자 ` + ` : 인접 동생선택자 선택자가 길면 우선순위가 높다 - `>` : 자식 선택자 ``` 예) div>section*2>nav[tab키 입력] = div section nav /nav /section section nav /nav /section /div ``` - `+` : 인접 동생선택자 ``` 예) div+section[tab키 입력] ``` ## 정렬 - text-align: 글자 정렬 - text-align:left; - text-align:center; - text-align:right; - 공백 또한 한 글자로 취급한다. - 엔터를 하거나 또는 글자를 아무리 띄워도 한 글자로 취급한다. /절대로 자신을 정렬하는게 아니라. 자신이 가지고 있는 텍!스!트!를 정렬한다./ 글자가 아닌 엘리먼트도 정렬할 수 있을까? = 힌트 : display:inline-block 하면 엘리먼트가 `텍스트 화` 된다.
기본 엘리멘트의 display 속성은 block a의 display 속성은 inline-block -> div안에 a가 있다면 a는 `텍스트 화` 되어 한 글자로 취급 inline 요소와 text align 속성을 함께 주면 의미 없는 이유 너비가 이미 최소화 되어 있는 상태에 정렬할 공간 자체가 없기 때문 block 요소끼리도 마찬가지 최대의 안에서 최대가 정렬 될 공간이 없기 때문에 의미가 없다. ## 공백 문자 - - 공백 문자 ( 공백 한 칸을 의미 ) - 두칸 이상 띄울 때 ## 텍스트 속성 - text-decoration:none; 텍스트의 여러 효과를 설정 또는 제거 ## hover - 마우스 올림을 받은 div ``` 예) a:hover { background-color:black; } ``` ## css - border:~px solid 색상; = 테두리 상자 - margin / padding = border경계로 나뉨 - margin = 바깥 쪽 여백 - padding = 안 쪽 여백