프론트엔드 (38) 썸네일형 리스트형 [유노코딩 css 19강] 속성값을 물려받기 inheritance(상속) 상속되는 속성값들 color font-family font-size font-weight text-align curson 등 상속 안 되는 속성값들 background-color background-image background-repaet border display 등 https://www.w3.org/TR/CSS21/propidx.html inherited? yes no 여부 보고 속성값 물려받는지 안 받는지 여부 확인하면 될듯 [유노코딩 css 18강] p:: before,after before는 말그대로 body에 있는 p태그의 앞에다가 텍스트를 붙여주는 기능 예제 DOCTYPE html> Document p::before{ content:"앞에다가 추가할 텍스트"; } 내 앞에 글자 생겼나요? after는 말그대로 body에 있는 p태그 뒤에다가 텍스트 붙여주는 기능 예제 DOCTYPE html> Document p::after{ content:"뒤에다가 붙는 텍스트"; } 원래쓰인내용 [유노코딩 css 17강] hover,active,focus,disabled,nth-child() 의사클래스란 가상클래스로 선택자에 추가하는 키워드. hover는 입력필드에 커서를 갖다대면 변하는 클래스 일단 body에 박스하나 만들고 div 5개 박스를 띄엄띄엄 만든다. body{ disply: flex; justify-content: space-around; } hover [type="button"]:hover{ color: red; } 평상시 상태에서 마우스 포인터가 올려져 있으면 빨간색으로 변한다. active 버튼을 누르면 빨간색으로 변한다. [type="button"]:active{ color:red; } focus input type placeholder 창에 커서가 놓여지면 변하게 됨. disabled 바디 적용하는 값뒤에 넣으면 이 부분만 적용 안됨. nth-child() 괄호 안에 .. [유노코딩 css 16강] 특성선택자,자식선택자,형제선택자 클래스 속성 [class]{ } 클래스가 "item"인 요소 선택 [class="item"]{ } 특성선택자 2. 값 확인 [class *= "it"]{} *는 포함만 한다면 적용 [class ^= "it"]{} ^는 ~로 시작한다면 [class $= "it"]{} $는 ~로 끝난다면 적용 DOCTYPE html> Document [class*="t"]{ color: blue; } [id^="uni"]{ color: tomato; } 선택자 연습하기 1번문단 나야 나 그냥 p태그 나야 나 2번 문단 클래스 있다 3번 문단 유니크 4번 문단 클래스 있다 5번 문단 스판 있는태그 결합선택자 2.자손 결합자 > 한단계 아래 하위 요소 선택 body > p 바디 안에 p태그는 다 해당됨 3. 형제 결합자 ~ 뒤.. [유노코딩 css 14강] 레이아웃을 유연하게 flexbox flexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다. 행(row) → 열(column) ↓ 부모 방향말고 (행) 자기진행방향대로 요소를 배치함. style="display: flex;" 한다면? 행→방향으로 정렬함. 요소를 배치된 레이아웃이나 진행방향을 바꾸고 싶다면 flex container를 사용하면 됨. [유노코딩 css 15강] flexbox 주축,교차축 요소 배치 방법 css의 꽃 flexbox 유연한 박스 div 아이템들을 박스에 담으려면 div class="container" 박스 안에 또 박스를 넣으려면 div.container>div.item.tiem 레이아웃에 워낙 다양한 경우의 수가 있으니 (하위속성 공부하려면 정리 않고 직접 해보기!) 직접 체험하는게 체득하기 용이할 것임 연습량을 늘려가는 것이 flexbox에 익숙해지는 정답 justfy-content는 flexbox 주축에서의 요소 배치 방법 정의한다. align-items는 flexbox 교차축에서 요소 배치 방법 정의한다. align-self는 flexbox 내 개별 요소 교차축 배치 방법 정의한다. flex-wrap은 개별 요소들의 도합 크기가 컨테이너 주축 길이보다 커졌을 때의 처리 방법 및 방향.. [유노코딩 css 13강] position 속성 중 fixed,sticky position 이렇게 배치할게~ 기본값은 static top 윗면에서부터 얼마큼 떨어뜨린다 right 오른쪽기준 얼마큼 떨어뜨린다 bottom 아랫면에서부터 얼마큼 떨어뜨린다 left 왼쪽면에서 얼마큼 떨어뜨린다 이번에 배울 값들은 배경색으로 칠해놨음. static 기본값 relative 자기 원래 위치 값에 따라 오프셋 적용 absolute 상위 요소 (가장 가까운 포지션 지정 요소) 기준으로 어찌보면 상대적으로. 오프셋을 적용 fixed 지정한 위치 고정 스크롤 이동에도 꼼짝 않는다. sticky 스크롤 되는 가장 가까운 상위 요소에 오프셋 적용 fixed 속성을 쓰면 고정이 되어있어 div 값이 많아서 스크롤 되더라도 정해진 위치에 움직이지 않고 고정되어있음. top을 0px;로 준다면? 첫번째 .. [유노코딩 css 12강] position 속성값 중 relative,absolute position 이렇게 배치할게~ top 윗면에서부터 얼마큼 떨어뜨린다 right 오른쪽기준 얼마큼 떨어뜨린다 bottom 아랫면에서부터 얼마큼 떨어뜨린다 left 왼쪽면에서 얼마큼 떨어뜨린다 이번에 배울 값들은 배경색으로 칠해놨음. static 기본값 relative 자기 원래 위치 값에 따라 오프셋 적용 absolute 상위 요소 (가장 가까운 포지션 지정 요소) 기준으로 어찌보면 상대적으로. 오프셋을 적용 fixed 지정한 위치 고정 스크롤 이동에도 꼼짝 않는다. sticky 스크롤 되는 가장 가까운 상위 요소에 오프셋 적용 DOCTYPE html> Document div{ width:100px; height: 100px; background-color: red; position: relative;.. 이전 1 2 3 4 5 다음
