목록컴퓨터 정보/css (24)

개발하는 루루언니

CSS : 가상 요소 선택자 정리 : before / after

See the Pen Untitled by tkrkr55 (@tkrkr55) on CodePen. 가상요소 선택자는 우리가 HTML 에서 만드는 것 이랑은 달리 CSS 에서 before / after 을 통해 가상으로 요소를 만들어 사용이 가능하다. html만든 box1을 기준으로 앞에는 before / 뒤에는 after을 사용할 수 있다.
컴퓨터 정보/css 2022. 12. 12. 22:50
CSS : 가상클래스 선택자 정리 (active / focus/ visited )

See the Pen Untitled by tkrkr55 (@tkrkr55) on CodePen. :active 버튼 등을 클릭해서 요소의 동작이 활성화되어있는 상태를 말합니다. 마우스를 버튼을 누르고 뗀 순간까지를 acrive 라고 한다. :focus = 입력 창 등의 요소를 선택하는 가상클래스 선택자 tab키를 이용해서 입력창 커서가 활성화 되어 있는상태 :visited = 사용자가 방문한 적 있는 링크를 선택하는 가상클래서 선택자 a 태그에서 발생/ 링크를 눌러서 해당 경로를 방문한 기록이 브러우저 상에 남아있는 링크 기본컬러 - 보라색
컴퓨터 정보/css 2022. 12. 12. 22:42
CSS : first-child / first-of-type

f first-child first-of-type last-child last-of-type nth-child(n) nth-of-type(n) 예시코드 ) 예시코드 입니다. 1번째 p 2번째 p 3번째 p p 태그의 첫번째에 blue라는 색상을 주었을때 어떻게 반응할까? 아무런 반응이 나타나지 않는다. 스타일을 first-of-type 으로하면? 반응한다. 그이유는 div안에 형제요소끼리만 반응을 하는데 p태그 맨위에 h1태그가 있어 first-child 에는 스타일이 적용이 되지 않는다. 반면 first-of-type 경우 p 태그를 찾아서 p태그값중 첫번째 아이를 찾아서 스타일을 변경시켜 주기때문에 변경이된다.
컴퓨터 정보/css 2022. 12. 12. 22:21
반응형 웹 : 가변이미지

가변이미지 : 이미지 요소에도 상대단위 em , vw, % 등 사용할 수 있습니다. 브라우저에서 이미지는 기본적으로 비율을 유지합니다. 이미지가 원본보다 커지면 이미지 품질이 떨어질 수 있습니다. max-width 속성은 요소의 최대 너비 제한을 정할 수 있는 속성 입니다. picture와 source 요소는 이미지를 미디어 조건에 맞게 선택적으로 불러올 수 있는 요소입니다. CSS의 max-width 속성은 너비의 최대값을 지정하여 요소의 너비가 그 이상 커지지 않게 합니다. img { max-width:200px } 이미지의 200px은 최대 200px임으로 그이상 커질수가 없습니다. img { max-width:100% } 퍼센트 단위로 지정하면 부모요소 크기에 따라 변하면서도 부모요소보다 커질수는..
컴퓨터 정보/css 2022. 12. 2. 14:38
이전 Prev 1 2 3 4 5 6 Next 다음