전체 글
-
CSS 버튼에 커서 올려놓을때, 클릭할때 변화시키기front-end/HTMI CSS 2023. 6. 22. 23:32
1. hover 마우스를 올려놓을 때 색 변화 .btn:hover { background : chocolate; } 2. focus 클릭 후 계속 포커스 상태일때 색 변화 포커스 상태란 : 클릭 이후 다른 곳을 클릭 하지 않고 있는 상태 .btn:focus { background : red; } 3. active 클릭이 진행 중인 상태일때 색 변화 .btn:active { background : brown; } 4. 그외 :any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/ :playing /*동영상, 음성이 재생중일 때*/ :paused /*동영상, 음성이 정지시*/ :autofill /*input의 자동채우기 스타일*/ :disabled /*disabled된 요소 스타일*/ :check..
-
CSS nth-child 셀렉터 짝수&홀수 td만 스타일 주는 법front-end/HTMI CSS 2023. 6. 20. 23:30
- nth-child 셀렉터 원하는 n번째 요소만 스타일을 주고 싶으면 :nth-child(n) 사용 아래 코드는 cart-table 안에 있는 모든 td를 찾은 다음 2번째 나오는 td에만 color를 줍니다. .cart-table td:nth-child(2) { color: red; } 짝수로 등장하는 td에만 스타일 주는 법 .cart-table td:nth-child(even) { color: red; } 홀수에 등장하는 td에만 스타일 주는법 .cart-table td:nth-child(even) { color: red; } 3n + 1 이렇게 작성하면 (3의배수 +1) 번째 등장하는 요소에만 스타일 .cart-table td:nth-child(3n+1) { color: red; }
-
CSS Table 테두리 밑에만 색상 넣는법front-end/HTMI CSS 2023. 6. 20. 23:29
테두리 밑에만 색상 넣는법 td, th { border-bottom : 1px solid black; } - Table HTML 구성 table태그 내에 tr은 row, td는 column을 의미 원하는 만큼 row, column을 넣어주면 표가 완성 tbody, thead는 그냥 헤드부분 영역구분을 위해 사용 td 대신 th 태그를 사용하면 기본적으로 제목처럼 굵게 처리 내용 내용 - vertical-align 테이블 내에서의 상하정렬하는 속성 top, bottom, middle 사용가능 td, th { vertical-align : middle; } inline 요소 간 상하정렬 속성도 vertical-align top, middle, bottom 말고도 super, sub, px 단위로 사용가능 G..
-
CSS form과 input, 라벨 클릭시 체크카테고리 없음 2023. 6. 20. 21:20
1. from 태그 input태그는 닫지 않습니다. - input의 type 옵션 - input의 속성 placeholder 배경 글자 value 미리 입력된 값 name 인풋의 이름 - HTML의 속성으로 CSS셀렉터를 사용 input[type=email] { color : grey } - 전송버튼 form 태그 안에 있어야지 작동 전송 2. 라벨 클릭시 체크 되는 방법 - label 태그와 for 속성 label과 for 속성을 적절히 활용 input대신 label을 눌러도 input을 선택이 가능 input의 id == label의 for 속성 subscribe
-
CSS position과 좌표 레이아웃front-end/HTMI CSS 2023. 6. 19. 20:53
1. 좌표속성 top, left, bottom, right 라는 속성을 사용하면 요소의 상하좌우 위치를 변경할 수 있습니다. 하지만 이 좌표속성을 사용하려면 position 속성이 필요합니다. position 속성은 좌표속성을 적용할 기준점이 지정해주는 역할 .box { top : 20px; left : 30%; } 2. position 속성 static; : 기준이 없는 상태 relative; : 기준이 본인 원래 위치 absolute; : 기준이 부모 속성 fixed; : 기준이 브라우저창 브라우저 창에 고정된 위치(스크롤시 따라옴 ex) 다음페이지, 이전페이지, 위로 스크롤 버튼) .box { position : static; position : relative; position : absolute..
-
CSS 배경넣기, margin collapse effect 해결방법front-end/HTMI CSS 2023. 6. 18. 22:50
1. 배경 CSS 속성 background-size는 px, % 단위도 가능 cover는 배경으로 전체적으로 짤리지 않게 하는 속성 contain은 배경이 짤리지 않게 하는 속성 background-attachment는 웹사이트가 스크롤될 때 배경이 동작하는 속성 .main-background { background-image : url(../img/shoes.jpg); background-size : cover; background-repeat : no-repeat; background-position : center; background-attachment : fixed; } 2. 배경 2개 겹치기 .main-background { background-image : url(../img/shoes.jp..
-
CSS selector 활용, 링크 클릭 보라색 흔적 없애기front-end/HTMI CSS 2023. 6. 18. 21:03
1. selector 사용법 사용법 1. 공백 공백을 이용해 안에 있는 li 태그인 모든 자손을 선택할 수 있습니다. 스페이스바 다음에 tag 셀렉터 말고 class 셀렉터 id 셀렉터 자유롭게 사용가능 .class .class .class 이런 식으로 무한히 연달아 사용가능 .navbar li { display : inline-block; } 사용법 2. 꺾쇠괄호 > 기호를 이용해 .li-inline 바로 밑에있는 자식만 선택 .navbar>li { display : inline-block; } 사용법 3. 더욱 상세히 선택하고 싶다면 .navbar 안에 있는 모든 li, 그리고 그 안에 있는 모든 직계 자손 span 태그를 선택 안녕 .navbar li>span { color : red; } 사용법 ..
-
CSS 박스 만들기, float, inline-blockfront-end/HTMI CSS 2023. 6. 18. 19:13
1. 박스 만들기 .box { margin : 20px; padding : 30px; border : 1px solid black; border-radius : 5px; } margin은 바깥 여백 padding은 안쪽 여백 border는 테두리 (차례로 두께, 선의 종류, 색상) border-radius는 테두리 라운드 처리 - margin과 padding을 원하는 방향 .box { margin-top : 20px; padding-left : 30px; } top, left, bottom, right 중 원하는 곳에만 여백이 가능하다. margin은 음수도 가능합니다. margin : 5px 6px 7px 8px; 이렇게 띄어쓰기를 이용하면, 차례대로 상 우 하 좌 마진을 5,6,7,8px 이 가능합니..