CSS 썸네일형 리스트형 [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 제일 하단에 사용한다 그래야 말끔하게 작동할 수 있다 여.. 더보기 [CSS] pseudo-class hover(호버), focus(포커스), active(액티브) 우리가 버튼을 만들어 봤다고 하자 그렇게 버튼을 만들고 CSS로 버튼을 디자인 하면 예쁜 버튼을 만들 수 있다 하지만 버튼을 클릭해도 클릭하는 별 효과가 없다는 것! 그럴 때 쓸 수 있는 것이 css의 hover, focus, active 알아보자 이렇게 예쁘게 만들어 놓은 버튼(button)이 있다 HTML 구매하기 CSS .btn { padding: 15px; font-size: 20px; border: none; border-radius: 10px; background-color: coral; color: white; cursor: pointer; } 이것을 마우스를 가져다 놓거나 클릭 했을 때 나올 수 있는 효과를 줘보자 hover : 커서를 가져다 놓을 때 active : 클릭 했을 때 focu.. 더보기 [CSS] link로 관리하기 수월하게 하기 html문서에 css를 작성하다 보면 코드도 길어지고 영 못 생겨지기 마련 그럴 때 css파일과 html을 따로 관리하면 훨씬 편하고 보기도 좋다 head태그 안에 넣어주고 ...안에 경로만 지정해주면 끝 예를 들면 styles폴더 안 project.css 파일을 불러와라 이런 뜻 !! 꼭!! html 파일과 css파일이 같은 경로에 있어야 한다 더보기 [CSS] a tag(태그) style(스타일) 효과 없애기 html에서 태그를 쓰다보면 밑줄과 클릭했을때 나오는 보라색이 매우 거슬린다 이럴때 사용하면 좋은 효과를 없애줄 수 있는 방법이다. 코드 a { text-decoration: none; // a태그의 밑줄을 없애준다 color: white; 또는 black; //a태그의 색상을 지정해 보라색이 되는것을 없애준다 } ex 이렇게 하면 클릭을 해도 깔끔해진 a태그를 만나 볼 수 있다. 끝 출처 - 코딩애플 더보기 [CSS] 배경(backgroundimage)에 검은색 틴트 주기 웹 사이트를 만들다 보면 화면의 전체가 이미지를 덮고 있고 그 안에 텍스트를 넣고 싶을 때가 많이 있다 하지만 그렇게 하면 배경의 이미지가 너무 쨍해? 텍스트가 잘 안 보일 경우가 있기 때문에 배경 이미지에 검은색 블라인드 처리를 하여 텍스트가 강조되게 할 수 있는 방법을 알아보자 블라인드(틴트)를 주기 전 텍스트가 배경 이미지의 밝음 때문에 잘 보이지 않는다. 코드 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../background1.jpg); css에 linear-gradient를 줘보자! 블라인드(틴트) 후 이렇게 텍스트는 잘 보이고 뒤에 배경 이미지는 어두워 진 것을 확인 할 수 있다 끝 출처 - 코.. 더보기 이전 1 2 다음
