HTML CSS (30) 썸네일형 리스트형 CSS 가상 클래스 코드 좀 정리하고 first-child 를 썻기 때문에form 안에 있는 태그중 첫번째 span 이 그린색으로 바껴야함 음 잘 바뀜 그럼 마지막껀 last-child 쓰면 되겠넹 음 바뀐걸 알수 있다 그럼 nth-child(3) 을 써보자form 태그 기준으로 자식은 총 6개 있는걸 알수 있다 즉 비밀번호 스팬태그는 3번째 위치하니깐 3을 써주면 비밀번호 색깔이 바뀜 코드 좀정리하고 이러면 2 4 6 번째 태그는 빨간색으로 바뀌겠지?? 바뀌었당 근데 일일이 번호 주기 귀찮으면짝수만 바꾸고 싶다 2n을 쓰면 된다고 함 음 똑같군근데 이렇게 까지 할려나?? 라는게 내생각 홀수번째를 바꾸고 싶으면 odd 나 2n+1 을 하면 됨 이렇게 하면 됨3의 배우만 변화 주소 싶으면 3n 4의 .. CSS 선택자 결합자 일단 코드를 만들자 input 태그에 속성값 줘보기 잘 적용 된걸 알수 있다 근데 input 태그의 type 이 submit 인것만 바꾸고 싶음 어떻게 해야 될까? input [type="submit] {} 을 쓰면 제출하기 태그만 적용이 되는걸 알수 있다 a 태그도 써보자 됬당 결합자 div 안에 있는 span 태그 컬러 다 바껴야 되는데 안바꼇다 왜 그럴까? 일단 적용 순위에 대해서 알아 보자 !important 이게 제일 처음먼저 적용 된다고 한다 2번째 태그안에 자체에 style 적어주는 속성값이 적용된다고 한다 3번째는 뭐가 먼저 적용 될까?? 이메일 색이 퍼플색으로 바뀐걸 알수 있다 즉 CSS 선택자는 id class 태그 이름 순서대로 적용되는걸 알수 있음.. CSS 포지션 positon relative 는 요소가 있었던 위치를 기준으로 움직인다고 생각하면 됨 양수를 적는다면 경계를 기준으로 안쪽으로 움직이고음수를 적는다면 경계를 기준으로 바깥으로 움직임 음수로 적어봄 양수로 적어봄 안쪽으로 움직이는거 알수 있음 대체 왜 이렇게 만들었는지 이해불가임 absoulate부모요소중에 relative 요소를 찾고 relative 부모를 기준으로 움직임부모 컨테이너중에 relative 가 하나도 없으면 body 기준으로 움직임 해보자 3번 컨테이너 사라짐 뭐지? 개발자 도구를 보니 2번 뒤에 3번 div 박스가 있당 그다음 top left 줘봅시다 부모 컨테이너인 position relative 가 없으니 body 기준으로 하게 됨 음수 값을 주니.. CSS flex box 블럭과 인라인블럭 옆에는 공간이 남아도 아무런 요소가 올수 없고 넓이와 높이를 가질수 잇음인라인 인라인 컨테츠 끼리는 옆에 올수 있고 컨텐츠의 길이에 따라 높이아 넓이가 결정 음 말대로 잘 됬당 그럼 여기 span 태그를 지우고 div 만 남겨준 상태에서 이 블록을 한줄로 배치 즉 놃이와 넓이를 가지는 블록 특성을 유지한체 인라인 옆으로 놓고 싶음 diplay : inline-block ; 을 써보자 오 한줄로 잘 배치됨 근데 잘 사용하지 않음왜 냐하면 사이 사이 공백이 생기기 때문 브라우저가 자동으로 준 값이라고함 그래서 마진으로 적절히 띄어보자margin 0 50px 오 적당희 띄어짐 근데 보는 화면따라 달라지기때문에 작으면 저 네모가 내려 갈꺼고 모니터가 크면 더 마진을 줘야 되기때.. CSS의 state 버튼 태그를 만들자 개발자 도구에 보니 hover 포커스 액티브 뭐 이상한거 많이 있다hover focus focus widthin active visited 가 있다고 함 마우스를 올렸을때 백 그라운드 컬러 빨간색 글자는 흰색이된걸 알수 있다 그럼 active 도 써보자 스샷은 못했지만 눌렀을대 빨갛게 바뀌는게 확인 되었다hover 는 올려 놓으면 바뀜 active 는 누르면 바뀜 클릭한적 있는 링큰입니다는 보라색? 으로 기본적으로 바뀐다 그럼 이걸 green 으로 바꿔보겟음visited 사용 바뀌는거 확인 focus 를 써보자 글자 쓸대 검은색이 뒤고 글자는 하얀색이 되는거 확인 focus widthin포커스 위드인이 자식요소에 포커스가 생겼을때 사용 가능 이렇게 빨간선 생기.. CSS id class 파란색이 div 태그임 높이와 넓이가 고정이 되어 있는 상태에서 padding 주니 빠져 나왔음 그럼 각 div 마다 다르게 주면 된다라는 결론이 나옴 특정한 한 div 만 바꾸고 싶으면 id 속성을 주면 됨 결과는? 잘 바뀐걸 알수 있당 코드 좀 정리하고class 를 써보자 오.. 하나만으로 두개 div 태그에 적용 되는걸 알수 있음 그럼 클래스 두개 적용도 가능하다고 한다 해보자 오 퍼플 적용됨 CSS margin padding 컨텐츠와 컨텐츠사이의 간격 조절 일단 코드 정리함 음 div 태그와 span 태그가 너무 딱 붙어 있음 한번 간격을 띄어보자 마진 10px 줌 결과는? 떨어지긴했는데 상하 좌우 다 10px 떨어진걸 알수 있음 근데 밑에어만10px 주고 싶음 음 잘됬음 스펜에도 마진을 줘보자 음 잘되어 있다 그러면 div 에 있는 마진 바텀을 지워주고 스팬에 마진 탑 30px 을 줘보자 똑같은 결과가 나오겠지? ????????????????????????????????????????????????????????????????????????????????????????????????뭐지?? 알아보니 위 아래로만 움직이는 마진은 블럭요소에만 적용된다고함 ;;아니;; 왜이렇게 햇갈리게 만들어놓은거야.. CSS border inline block 관계없이 모든 요소는 border 를 가질수 있음 border 3px(선크기) solid(직선) red(색깔) 결과는?? 빨간선 나옴 dotted 로 바꿔봄 ............. 으로 바뀜 double 로 해봄 ㅇㅎ 선 2개 나오네 근데 대부분의 경우 solid 만 쓴다고함 background-color: blue; /* display: inline; */ border-width: 3px; border-style: solid; border-color: red; 아까 border 3px(선크기) solid(직선) red(색깔)랑 똑같은 뜻 밑에만 선주는것도 가능 모든 요소는 보더를 가질수 있음 그럼 와일.. 이전 1 2 3 4 다음
