본문 바로가기

전체 글

 (48)
[반응형 웹] 접기/펼치기 스크립트, 사이드 이펙트 몇 개(카드앞뒤회전, 앞뒤회전+굴러들어오는 원 안의 텍스트) 요렇게 접기/펼치기 스크립트를 할 것이야 a태그 .btn에 제이쿼리로 e.default어쩌고로 #기능을 깨준 후에 작업하는 것임 이렇게 해주면 맨위처럼 됨. 근데 이제 모바일에서는 토글되있는 nav메뉴가 사라지게 할 것인데 css에서 display:none; 설정은 했지만 우선순위땜에 안먹으니까 제이쿼리/자바스크립트로 이렇게 작업해줘야함 [마우스 오버하면 360도 회전(앞뒤반전)효과 - 아이콘으로 하는 버전] 여기까지 작업해두면 기본 HTML, CSS작업은 끝남 이제 hover작업을 해주며 ㄴ댐 .side .back에 transform -50%, -50%와 font-size만 조정해주면 댐 [이미지 두개로 앞뒤 회전효과 - 앞에거랑 똑가은데 translateZ값을 이용해 작업한 차이. ] perspect..
[반응형 웹] - webstoryboy IR기법, clearfix, 이미지 슬라이드, 라이트박스, 사이드컨텐츠, footer [IR 기법, clearfix] [이미지 슬라이드] HTML작업과 slick.js 을 이용하여 연결해준 상황 반응형 이미지에도 100%작업을 해줌 여기까지 CSS로 스타일링 한 것. slick의 옵션이 오토플레이다. 오토플레이가 진행되며 생기는 active를 활용해서 애니메이션도 ㄱㄴ em과 span부분이 동시에 트랜지션되면 티가 덜 나기때문에 span의 transition에 0.2s를 추가했다(딜레이) 그럼 오토플레이되는 슬라이드에서 글씨가 슬라이드 이미지보다 조금 늦게 나오면서 고급진느낌이 난다 288번 active했을때 액티브된 버튼에 색상을 더진하게하기 prev버튼의 글씨를 text-indent로 없애고 \f053은 폰트어썸으로 꺽쇠를 넣어준 것. 이런식으로 슬라이더의 도트와 버튼에도 스타일을 주..
[반응형 웹] - webstoryboy main,section,arcitcle 등 컨텐츠영역 + 해상도에 따라 이미지를 다르게 표현하기 footer까지 HTML작업부터 완료된 상태 여기서 화면 크기를 줄여도 왼쪽 가운데는 가만있고 오른쪽 컨덴츠만 줄어드는 반응형을 만들 것이기 때문에 %단위는 사용하면 안됨 레이아웃 작업 완 min-height는 임시작업같은 개념임 나중에 컨덴츠넣으면 빼면 됨 여기서 col3,6,9에는 border:none;으로해줘야함(아래 예시는 none주기 전임) 3단->2단->1단으로 변신 모양잡기까지 완. transition에 background와 box-shadow를 all로 주지 않고 따로 주는 것은 반응형이기때문이다. all로 하면 모양바뀌는거까지 트랜지션이 걸려벌임 반응형 작업 완. [해상도에 따라 다른 이미지 출력하기] https://www.webkit.org/demos/srcset Image srcset..
[반응형 웹] - webstoryboy nav, header + CSS btn꾸미는 거 몇 개 container는 가운데 정렬을 위한 클래스로 사용하고, row는 좌우 패딩을 주기 위한 클래스로 따로 사용하면 작업하기 편함 이런식으로 사용! 블록요소는 한줄을 다 차지해! 그래서 중앙정렬을 위한 text-align:center, 이런거 안먹어 그래서 가로배치하려면 inline-block을 하는거야! 예를 들어, , , 과 같은 요소가 블록 레벨 요소입니다.! 반대로 inline요소는 상하마진적용불가능! 좌우마진은가능! 패딩은 4방향 다 가능! 구만 헷갈리쟝~~ㅠㅠㅠ 웹스토리보이 css애니메이션 이런거 보고 버튼모양으로 ㅎ ㅏ면되겟네 (코드는 자기자신의 색깔 차오르는거 한줄만써도되고 두줄다써도되고 써보기 , 9em -9em 일케도 써봐 더이쁘게됨. inset은 안쪽으로 준다는 뜻 ) 말풍선효과 주는 ..
반응형2 유노코딩 -> 너비를 기기의 너비기준으로 초기화하겠다는 뜻 절대값을 쓰면 안됨. 반응형은 가변성이 가장 중요함. 부모너비의 100%중에 전송버튼 크기를 100px로 고정하고 싶을때 이러케 한거당 가변성쌉가~ %는 브라우저 전체의 %가 아니라 부모요소의 %임을 잊지말자 max-width는 이것보다는 커질 수 없다는 뜻이다 (max-width: 100% = 부모요소 100%보다 너비가 커질 순 없다 width 100% = 부모요소의 크기를 그대로 가겠다. 이거 두개를 같이쓸수잇음) @미디어쿼리는 스타일바꾸는거고 가변성 코드는 내가 짜는 개념이엇쟈나 이 빡대갈아 정신차려이각박한세상속에서 ㅜㅜㅜㅜ0ㅜㅜㅜㅜ 이미지만 바꿀때 쓰기 좋은 태그 해상도별로 이미지를 바꾸고 싶을 때 사용한다(비율같은거 바꾸고싶을대) 왼쪽에 고정된..
[clip-path] rock's easyweb CSS 121강 clip-rect는 이제 안씀. 즐찾-이미지편집/아이콘-clip-path maker에서 쉽게 좌표잡기 가능 px는 상단부터 시계방향기준(이미지의 크기를 기준으로 좌표값 계산하면댐) (0 0, 100px 0, )~~ x축 y축 순서
[tailwindCSS] 기본사용법 rock's easyweb CSS 114강~115강 tailwindCSS 장점 : CSS파일이 필요없음 단점: 클래스명마다 일일이 스타일을 줘야함 [cdn] docs에서 필요한 구성 하나하나 찾아서 class명에 붙여넣는 방식임 정해진 클래스말고 따로 커스터마이징하고싶을때 복붙하는 거 webfont loader js [js로 웹 폰트 로드하는법 ] + class명에 쓰기 폰트 두가지 굵기로 쓰고 싶을때 script에 이렇게 설정한 후에 class에는 font-semibold 등을 쓰면 됨 side menu에 fixed로 포지션고정시키고 w1/5로 5분의1만큼 width차지하게 하고 top:50 left:5값으로 위치 조정. section에는 w-4/5를 줘서 나머지부분을 차지하게 함 li에 hover시 ..
[css] shape-outside [모양에 맞춰 텍스트 배치하기] - 모든 이미지 파일은 사각형이다. 동그랗게 자른 png 파일도 어쨌든 사각형임을 기억해야함. - 이미지 바깥으로 아예 나가버리면 적용안됨 - img에 클래스 줘서 직접 걸어야함 shape-outside: 모양(크기 at 중심점좌표(위치)) float: left 등으로 일단 글씨가 달려들게해야함! ex) circle(50px at 50% 50%); : 50px 크기에 해당 이미지의 x축 중앙, y축 중앙(50%)에 있는 정 원(%대신 px등 사용가능) 모양에 넣을 수 있는 것 : circle, ellipse(타원형, 수치 2개 필요), inset(이미지의 안에서, 수치 4개필요), polygon 이미지모양대로 흐르게 : 반드시 png여야함. 사방 투명은 안되고 텍스트가 채..

티스토리툴바