CSS17 [CSS] Pseudo Selectors Pseudo Selectors 📌 Pseudo Selectors : 세부적으로 요소를 선택. Pseudo Selectors - : 📌 : ① div : first-chid { } → div의 가장 처음에 있는 자식 요소. ② div : last-chid { } → div의 가장 마지막에 있는 자식 요소. ③ div : nth-child(n) { } → div의 n번째에 있는 자식 요소. 💡 even(= 2n) : 짝수, odd(= 2n + 1) : 홀수, 3n 등 사용 가능. 1 2 3 4 5 6 7 8 9 + 추가 설명 더보기 div { height: 50px; width: 50px; background-color: darkgray; color: white; } div:first-child{ backg.. 2022. 9. 14. [CSS] position position : fixed 📌 fixed : 위치 고정. 💡 스크롤해도 위치가 고정되어 있음. 처음 위치한 곳에 고정되며 위치 변경이 가능함. top, left, bottom, right 중 하나의 속성이라도 설정하면 위치가 변경됨. 💡 변경 전에는 같은 레이어 상에 위치하기 때문에 겹쳐서 그려지지 않음. 속성 설정을 한 경우, 가장 위에 위치한 레이어에 그려지기 때문에 겹쳐서 그려지게 됨. (top: 5px; 지우면 확인 가능) position : static 📌 static : 레이아웃이 박스를 처음 위치하는 곳에 두는 것. position : relative 📌 relative : 요소가 처음 위치한 곳에서 상, 하, 좌, 우로 이동. position : absolute 📌 absolute : .. 2022. 9. 14. [CSS] Flexbox Flexbox 📌 Flexbox : 자식 요소에는 아무것도 적지 않고, 부모 요소에만 적는다. 📌 부모에 ' display : flex; '를 명시. 부모가 자식을 조정할 수 있음. 📌 justify-content : 배치할 위치 설정. + 추가 설명 더보기 ① 'div'의 부모 요소인 'body'에 'diplay: flex;'가 명시되어 있으므로, 'div'는 부모 요소인 'body'에 따라 설정된다. ② 'body'의 'justify-content: center;'로 인해, 'div'는 주축(수평. 변경 가능.) 기준으로 중앙에 위치하게 된다. * justify-content는 주축(수평. 변경 가능.)에 적용되는 속성. Flexbox - main axis, cross axis 📌 main axis .. 2022. 9. 14. [CSS] block | inline | inline-block block 📌 block : 옆에 아무것도 오지 않는 것. 예. div 💡 div에 display: inline을 하면 아무것도 보이지 않음. (inline은 width와 height를 가질 수 없기 때문.) inline 📌 inline : width와 height를 가질 수 없음. inline-block 📌 inline-block : block으로 인식. width, height, margin을 가질 수 있음. 바로 옆에 다른 요소가 올 수 있음 📌 단점 ① 알 수 없는 공간들이 생김. ② 정해진 형식이 없음. → 화면 크기에 따라 보여지는 게 다를 수 있음. 2022. 9. 14. [CSS] class class 📌 class : 여러 요소가 같이 사용할 수 있음 한 요소는 여러 클래스를 가질 수 있음 .(클래스명) { } 예시 class class class class class class 2022. 9. 13. [CSS] box - margin, border, padding box - margin 📌 margin : box의 border(경계)의 바깥에 있는 공간. 📌 입력한 값의 개수에 따라 값 적용됨. margin : 상하좌우 margin : 상하, 좌우 margin : 상, 우, 하, 좌 💡 collapsing margins : box의 경계가 같으면 하나로 취급됨. 위, 아래에서만 일어남. → 경계가 닿으면 합쳐짐. box - border 📌 border : box의 경계. https://developer.mozilla.org/ko/docs/Web/CSS/border-style border-style - CSS: Cascading Style Sheets | MDN **border-style **CSS 단축 속성은 요소 테두리 네 면의 스타일을 지정합니다. develo.. 2022. 9. 13. [CSS] box box 📌 box : 구성 요소. 📌 box의 구성 ① content : 내용. ② margin : box의 border(경계)의 바깥에 있는 공간. ③ border : box의 경계. ④ padding : box의 border(경계)의 안쪽에 있는 공간. https://codingrecord2209.tistory.com/24 [CSS] box - margin, border, padding box - margin : box의 border(경계)의 바깥에 있는 공간. - 입력한 값의 개수에 따라 값 적용됨. margin : 상하좌우 margin : 상하, 좌우 margin : 상, 우, 하, 좌 * collapsing margins : box의 경계가 같으면.. codingrecord2209.tistory.. 2022. 9. 13. [CSS] CSS 기본 설명 CSS 코드 구성 📌 CSS 코드 구성 - selector : html 코드 안의 태그를 가리키는 것. - property : 속성. 색, 크기 등. (속성) : (값) ; - { } : 중괄호(curly bracket). selector의 여러 속성을 묶음. CSS 코드 실행 과정 📌 CSS 코드 실행 과정 CSS : Cascading Style Sheet(Cascading : 위에서 아래로 흐르는). 위에서 아래로 실행됨. 따라서, 같은 것을 수정했을 때 아래에 위치한 코드가 적용됨. Inline CSS vs External CSS 📌 Inline CSS vs External CSS Inline CSS : HTML 파일 안에 있는 CSS 코드. External CSS : CSS 파일이 따로 존재하는 .. 2022. 9. 13. 이전 1 2 3 다음
