본문 바로가기

전체 글

[CSS] position-sticky(스티키)! 왼쪽 스크롤은 내려가고 오른쪽 이미지는 고정된다 이 기능으로 재밌는 css를 꾸며 볼 수 있다 position-sticky이다 HTML Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. L.. 더보기
[CSS] animation transform(트랜스폼)! CSS 애니메이션을 줄 수 있는 방법 transform 먼저 transform의 주요 기능들 transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: tran.. 더보기
[CSS] 효율적인 CSS코드 양 줄이기 CSS가 많아지면 코드가 길게 이어지기 마련 그럴 때 좀 효과적으로 코드량을 줄일 수 있다 빠르고 쉽게 CSS .btn-green { color: green; width: 100px; height: 100px; padding: 20px; } .btn-red { color: red; width: 100px; height: 100px; padding: 20px; } .btn-blue { color: blue; width: 100px; height: 100px; padding: 20px; } 이런 박스를 만든 css 코드가 있다 중복되는 width, height, padding 이런 거를 .btn-blue, .btn-red, .btn-green { width: 100px; height: 100px; paddi.. 더보기
[CSS] bootstrap(부트스트랩)과 css같이 사용하기 프론트엔드를 준비하시는 분이라면 한번쯤은 들어봤을 bootstrap이다 css를 특히 반응형을 만들때 아주 효과 적이고 시간을 획기적으로 단축시켜 주는 일종의 라이브러리이다 이 Bootstrap은 링크를 불러옴 쉽게 말하면 bootstrap에 저장되어 있는 고유 디자인 툴을 나의 css로 불러오는 것 여기서 bootstrap 클래스를 사용하게 되는데 Card title Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere 코드를 보면 class= card 또는 class= card-img-top 등 지정된 클래스를 사용해야 부트스트랩을 쓸 수 있다 여기서 내가 css.. 더보기
[CSS] box-sizing : border-box 박스를 이리저리 옮기고 위드랑 하이트 값을 이리저리 만들어 줘도 클론 코딩을 할 때, 혼자 만들어 볼 때, 따라서 코드만 쳐볼 때 등등 분명 똑같이 했는데 나는 다른 box크기가 나오면 당황하게 된다 예를 들어 이미지 첫번째는 원래 애니메이션을 줘 정사각형의 모양으로 좁혀 들어가는 효과를 줘야 한다 그런데 오른쪽으로 박스가 좀 더 나와 라이트와 바텀이 안 보이는 것을 볼 수 있다 이럴 때 box-sizing: border-box; 한 번 줘보자 이 코드가 이렇게 이렇게 어떤 원리로 돌아간다! 자세하게 설명 할 순 없지만 box-sizing을 주지 않으면 이런 식 이 아닐까 싶다 부모 컨테이너 여백에 자식을 포함시키지 않기 때문인 거 같다 box-sizing을 준 상태 결과 잘 나오는 애니메이션! 그래서 .. 더보기
[CSS] flex-box(플렉스)로 쉽게 정렬하기 내가 배운 css의 flex에 대해 알아보고자 한다 어떻게 사용하는지 바로 보자 이렇게 생긴 red 박스와 blue 박스 여기서 display: flex; 를 주면 가로가 되고 여기서 flex라고 하는 부모 태그에 width를 주고 .flex { padding: 20px; display: flex; width: 1000px; justify-content: space-between; background-color: gray; } justify-content: space-between; 을 주게 되면 width의 양쪽 끝에 달라붙는걸 볼 수 있다 쉽게 말해 두 박스가 줄다리기하듯 찢어져 붙은 것 이걸 잘 활용하면 box를 이리저리 옮기고 float을 쓰고 하지 않아도 쉽고 깔끔하게 정돈된 레이아웃을 만들 수.. 더보기
[CSS] mediaquery 반응형 레이아웃 웹사이트를 pc에서만 만드는 것은 아니다 요즘은 대부분 스마트폰, 태블릿pc와 같은 기기를 많이 사용하기에 html/css를 작성할때 호환성을 염두에 두고 만들어야 한다 그럴 때 사용하는것이 css mediaquery(미디어 쿼리) 반응형 레이아웃이다 일반적으로 만든 웹사이트 css 예를 들어 여기서 페이지 비율을 줄였다, 늘렸다 하게 되면 폰트 사이즈라던지 아이콘의 가로정렬 등 화면의 비율은 모바일인데 pc 비율을 계속 유지하다 보니 모양? 이 상당히 예쁘지 않다 그럴 때 미디어쿼리를 사용해 보자 코드 @media screen and (max-width: 1200px) { .main-title { font-size: 40px; } } 보통 css 제일 하단에 사용한다 그래야 말끔하게 작동할 수 있다 여.. 더보기
[HTML] Emmet (div박스 여러 개 만들기) ! VS CODE를 기준으로 작성됨 우리는 보통 html에서 div태그를 여러 개 만들어 쓰는 경우가 많다 그럴 때 마구잡이 식으로 div태그를 필요할 때마다 만들거나 혹은 div태그를 복붙 복붙 해서 사용하곤 한다 그럴 때 유용하게 사용할 수 있는 것이 바로 Emmet이다. HTML div.wrap>div 이렇게 입력하고 엔터 혹은 탭키를 눌러보면 우리가 흔히 아는 div에 class="wrap"가 지정된 레이아웃을 만들 수 있다 여기서 > 표시는 바로 밑 자식 요소라는 뜻 HTML div.wrap>div.content*3 이런 것도 가능하다 대충 무슨 뜻일까? 그렇다 wrap이라는 클래스의 자식 요소들 content를 3개 추가해주었다 그냥 필요할 때마다 div를 만들어서 사용할 수 있지 않은가? 아.. 더보기

티스토리툴바