🍓𝗪𝗲𝗯/𝖢𝖲𝖲
-
[CSS3] nth-child(), nth-of-type()🍓𝗪𝗲𝗯/𝖢𝖲𝖲 2021. 7. 15. 12:52
nth-child() E:nth-child(n) 부모의 n번째 자식인, E요소 nth-of-type() E:nth-of-type(n) 같은 유형의 n번째 형제인, E요소 n값에는 키워드, 정수, 공식이 들어갈 수 있다. 키워드 : even(짝수), odd(홀수) 정수 : 양수, 음수, 또는 0 공식 : an+b 1. 나는 p 2. 나는 span 3. 나는 p 4. 나는 span 5. 나는 p 위의 상태에서 아래와 같은 css를 적용하면?! p:nth-child(3) { color: red; } p:nth-of-type(3) { color: blue; } span:nth-child(1) { color: green; } 2번째 경우에서 p:nth-of-type(3)이기 때문에, p의 형제 중 3번째이므로 5..
-
[한솔홈데코] HTML5 + CSS3를 이용한 헤더 영역 개발🍓𝗪𝗲𝗯/𝖢𝖲𝖲 2021. 7. 6. 21:47
1. 목표 2. 설계 1. block요소에만 text-align을 적용할 수 있고, 정렬되는 것은 block 안의 inline요소만 가능하다! - gnb(대메뉴)에서도 display: inline-block;을 통해 inline요소처럼 취급되었기 때문에 가로로 정렬될 수 있었다. 2. 로고 이미지 넣을 때 width와 height를 지정하고 싶으면 display: block;으로 지정한다. - position: absolute; left: 50px; 을 줘서 왼쪽 기준으로 오른쪽으로 50px만큼 이동하여 위치하게 한다. 3. 활성화될 때 글자바로 밑에 줄이 생기게 하기 위해서 태그를 추가하고 position: relative;로 설정한다. - 그리고 링크에 hover될 때, 줄을 그어준다. - 줄은 po..
-
[CSS] display, visibility🍓𝗪𝗲𝗯/𝖢𝖲𝖲 2021. 7. 5. 21:37
inline 요소 : , , , 와 같이 줄 속에 끼워 넣는 요소 block 요소 : , , , , 과 같이 해당 요소가 속한 줄은 가로 화면 전체 100%를 차지하며 앞뒤로 줄 바꿈이 된다. display는 요소를 어떻게 표시할지 선택하는 속성이다. 1. display: inline - 기본값, 앞뒤로 줄바꿈 되지 않는다. 2. display: block - 요소를 block요소처럼 표시한다. - 요소 앞뒤로 줄바꿈 된다. 3. display: none - 박스가 생성되지 않는다. - 공간을 차지하지 않는다. - 스크린리더기에 읽히지 않아, 웹 접근성에 좋지 않다. 4. display: inline-block - 요소는 inline인데, 내부는 block처럼 표시함 - 박스모양이 inline처럼 옆으로..