HTML,CSS (28) 썸네일형 리스트형 210711 물체를 화면 정 가운데에 두기 position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); 210709 a link text 위에 마우스 올렸을 때 천천히 색깔 변화하게 이번에는 메뉴에서 a link 내부 텍스트 글자 색을 hover 했을 때 바꾸는데 그 약간 천천히 바뀌는 그걸 하고 싶었다. 찾아보니 간단쓰 CSS #main li { color:#000; } #main li a:hover { color:#9a9a9a; transition: 0.3s } 210624 bootstrap carousel 이미지 슬라이드는 부트스트랩이 먹었나(?) 보다. 검색하니까 이것만 나오네. 예제 보니까 엄청 잘 되어 있기도 하다. 플러그인 삽입만 잘 해놓으면 따로 javascript 많이 쓸 필요 없이 그냥 html 코드 가져다 붙이는 걸로 거의 다 해결 된다. 근데 예제 보면서 써보려는데 엄청 엄청 안된다. 그래서 w3wschools.com 에 나와 있는 예제 보고 하나씩 하나씩 수정했다. 내 기준 안 되던 이유는 부트스트랩에서 다운로드 받아 업로드한 js 파일이랑 css 파일이 이상했다. 내가 파일을 잘못 찾아 업로드 했을 수도 있지만 여지껏 제작된 플러그인 사용하면서 이런 적 없었는데, 처음이다. 예제에 설명 되어 있는대로 같은 이름의 파일을 찾아서, bootstrap.min.css랑 bootstrap.min.. 210408 jquery CSS table tr td 부모 자식 요소 조건 따라 찾아서 스타일링 아따 써먹으려고 했는데 카페24 디테일 페이지는 넘 복잡하다. 일단 포기. 내용은 화면상의 table과 그 자식 tr을 찾는다. 찾아서 각각 확인한다. tr의 css 중 display가 none 으로 되어 있는지 아닌지. none 으로 되어 있으면 다시 반대로 올라간다. 첨엔 $(this).parent() 를 한 번만 했는데 안 되서 보니까 table, tbody, tr 순이었다. 그래서 parent() 를 한 번더 추가해줌. 그니까 tr의 부모 요소(=tbody)의 부모 요소(=table)를 숨김 처리한다. $(document).ready(function() { a = $('table tr'); a.each(function(i,e) { if ($(this).css('display')=='none') {.. 210407 원래 있는 속성 안의 이미지 주소 바꾸기 카페24 상품 상세 페이지 하면서 상품 옵션 선택하면 리스트가 착착 생기는데, 그 옆에 삭제 버튼의 X 박스가 너무 못생겼다. 구조는 a 링크 태그 안에 이미지 파일이 들어 있는 거라서 그 내부 이미지만 바꿔주면 될 거 같았다. content 라는 게 있네. CSS .delete {content: url('/img/x.png');width:12px;height:12px;padding:0 5px 61px 0;} 끝 210405 select box 콤보 박스 css! www.daleseo.com/css-selects/ CSS 콤보박스 스타일링 - Engineering Blog by Dale Seo www.daleseo.com 궁금한 내용 찾다보면 오히려 기본적인 내용 설명이 잘 안되어 있는데 여기는 기본적인 부분되게 정리를 잘해주셔서 아무것도 모르는데 도움이 된다. 아래는 옵션 박스 스타일링. 이거는 그냥 스타일시트에서는 안된다고. 자바스크립트를 써야 한다고 함ㅎ 내용을 보니까 셀렉트 박스의 옵션 자체에는 css가 적용이 안되는 게 참트루인 거 같고, 여기서 자바스크립트 쓰는 건 option 부분의 내용을 복사해서 select 태그와 option 태그를 div로 바꿔서 셀렉트 박스인것처럼 보이게 효과를 준다. 지금은 이렇게까지 해서 할 필요가 없지만 언젠가는 쓸 일이.. 210405 링크 책갈피 링크 클릭시 책갈피를 써봤는데 원하는 위치 위에 다 책갈피를 잡아도 계속 그 아래쪽 내용부터 뜨더라. 그래서 수정한 것. HTML 210404 상단 메뉴에서 로고를 수직 기준 가운데 정렬하기 방법 HTML 1. 그누보드에서는 이 방법이 100%로 잘 먹힌다. 근데 다른 데서 하면 안 됨. 아마도 그누보드에서 기본적으로 세팅해둔 css 에서 이 방법이 가능하도록 되어 있겠지?? CSS #head {position:relative;margin:0 auto;height:100px;margin:0 30px 0 30px;} #logo_wrap {float:left;height:100px;line-height:100px;width:120px;} 2. 그 외 다른 데서 작업할 때 사용. CSS #head {width:1000px;height:180px;} #logo_wrap {height:180px;display:flex;justify-content:center;align-items:center;} 210331 가운데 정렬된 ul에서 li 가운데 정렬 HTML CSS 원래 내가 알고 있어서 거의 항상 사용하던 방식은 ul 너비를 li 아이의 width*(li 개수)로 해서 ul 통째로 가운데 정렬하는 거였는데 확실히 이 방식은 쓰기 어려운 곳이 많다. 그래서 찾아보니 아래의 내용 중 ul class css의 끝 부분 display 부터 margin-right 부분까지가 키임. 그리고 li class의 width 지정도 하면 li 사이 간격 조절됨. overflow:hidden 은 float:left가 이 다음 요소(ul, li 다음)에 영향 주지 않게 하려고 넣은 것(일 것..) .menuCategory {height:120px;line-height:120px;overflow:hidden;padding:15px 0 70px 0;display:table.. 210315 text-align center not working in span text-align center가 안 될 때 뭔가 말이 안 되게 text-align:center가 안 먹는다 하면 아마도 그 겉에는 span 태그가 있을 것이다. 그 때는 display: inline-block; 를 같이 넣어주면 된다고 해서 해보니 된당 이전 1 2 3 다음
