html12 [HTML&CSS] 14강 CSS 적용 우선 순위 CSS의 특성상 중복이 되어 설정될 수 있다이럴 때 해결을 하기 위해서는 우선순위를 알면 좋을 것 같다! 순서는 아래와 같다 !important를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id로 지정한 속성 클래스 : 가상 클래스로 지정한 속성 아래 순서를 우선으로 스타일이 적용된다 2025. 3. 20. [HTML&CSS] 13강 Media Query 1. Media Query: 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS 속성 중 하나: 웹 디자인에서는 미디어 쿼리를 사용해 적용하는 스타일을 기기마다 전환할 수 있음 2. 기본적 문법@media [only | not] [미디어 유형] [and | ,] (조건문) {실행문}1) only :미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드2) not : not 다음에 따라오는 조건을 부정하는 키워드.ex) not print -> print를 제외한 모든 미디어 유형에만 적용됨 3. 미디어 유형: 미디어 쿼리는 미디어 별로 적용할 CSS를 따로 작성하는 것으로 @media 속성 다음에 미디어 유형을 알려줄 수 있음: 미디어 유형은 생략.. 2025. 3. 19. [HTML&CSS] 12강 Z-index 1. z-index: 앞과 뒤에 나타나는 요소를 결정함 - 기본 z-index는 0- z-index가 더 높은 요소는 더 낮은 요소 앞에 나타남 (음수도 가능)- 순서 값이 없을 경우 코드상 순서에 따라 쌓임 - position: static스타일을 가진 요소는 항상 뒤에 나타남 (z-index 효과 X)- 부모에게 z-index값을 줄 경우 부모끼리 먼저 순위를 정한 뒤 자식이 적용됨 2. Z-index가 없는 경우의 쌓임 우선순위1) Root 엘리먼트의 배경과 테두리2) 자식 엘리먼트들은 HTML에서 등장하는 순서대로3) position이 지정된 자식 엘리먼트들은 HTMl에서 등장하는 순서대로 3. Z-index가 있는 경우 쌓임 DIV #1 position: abs.. 2025. 3. 18. [HTML&CSS] 11강 Position CSS 1. Position CSS: 요소를 어떻게 위치시킬 지를 정의함static기본값다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정 Xrelative요소를 자기 자신을 기준으로 배치 (원래 있던 위치를 기준으로 좌표 지정)absolute부모(조상)요소를 기준으로 배치(절대 좌표와 함께 위치 지정 가능)부모 요소가 static 외의 것 기준으로 배치static이 아닌 것이 없으면 body 기준으로 배치fixed스크롤과 상관없이 항상 문서 최 좌측 상단을 기준으로 좌표 고정(스크롤이 있을 때 스크롤을 내리면 해당요소도 같이 내려감)sticky스크롤 영역 기준으로 배치됨 2. absolute 와 relativeabsolute는 주로 relative를 가진 요소 안에 사용됨relative인 컨테이너.. 2025. 3. 17. [HTML&CSS] 10강 Grid CSS 1. Grid : 2차원 (행과 열)의 레이아웃 시스템을 제공flexbox는 단순한 1차원 레이아웃을 제공 (행과 열) 2. Grid CSS 속성들 - gap 3. grid-template-columns & grid-template-rows: 공백으로 구분된 값 목록으로 그리드의 열과 행을 정의 : 값은 트랙 크기를 나타내고 그 사이의 공간은 grid line 격자선을 나타냄 1) 값을 제시해줄 때.container { grid-template-columns : 40px 50px auto 50px 40px;}40px50pxauto50px40px 2) repeat.container { grid-template-columns : repeat(5, 10px)}10px10px10px10px10px남은 공간 3).. 2025. 3. 16. [HTML&CSS] 9강 Flexbox Item 총정리 이번에는 flex Item 속성들에 대해 설명해보겠습니다.Flex Container PropertiesFlex Items Propertiesflex-directionorderflex-wrapflex-growflex-flowflex-shrinkjustify-contentflex-basisalign-itemsalign-selfalign-content 1. order: 플렉스 컨테이너에 나타나는 순서를 제어: order의 기본 값은 0 ex) item-3 { order : -1} 이면 3이 맨 앞으로 오게 됨 2. flex-grow / flex-shrink : flex 박스 아이템의 기본 너비를 자동으로 늘어나거나 (flex-grow) 줄어들도록 (flex-shrink)해서 행 안에 적절한 너비로 배치되.. 2025. 3. 15. 이전 1 2 다음
