태그>css(총 353개의 글)

'css' 관련 최근글이글루스 'css' 태그 최근글 이 태그에 글쓰기

  • a태그와 p 태그의 구분 / a태그에 크기 지정하기
    백업 이글루  by 백업자|2020/12/23 15:49

    화면 설계 작업하면서 아이디와 비밀번호를 입력하는 인풋 창이 텍스트 바로 옆이나 아래가 아니라 동일한 간격을 가지고 띄어 만들어져야 했다. 일일이 이걸 저장하려고 처음에는 p 태그를 썼는데, 알고보니 p태그는 자체로 한 줄(문단 > paragraph)을 차지하기 때문에 인..

    , 

  • CSS 면접 질문 정리.
    CSS 면접 질문 정리.
    링고파이  by 링고파이|2020/06/11 16:32

    1. CSS 캐스캐이딩 우선순위 (특정성) 인라인 >> ID >> class(개수중첩가능) >> Tag or 의사선택자 상위는 하위 갯수를 무시할 수 있다. ex) #sample >> .class1.class2.class..

    , , , , 

  • Do it Html + Css 서평단 신청
    Do it Html + Css 서평단 신청
    청춘의 꿈을 꾸는 블로그  by 테스트-1|2020/01/14 22:34

    일단 신청은 했는데 되려나 모르겠다. 되면 올 1월은 HTML + Css로 불타오를 것 같다 ㅎㅎ

    , , , , 

  • SASS - 믹스인
    링고파이  by 링고파이|2019/12/19 09:19

    기존 css는 재사용성이 매우 떨어졌다. 그러나 sass에서는 특정 부분을 컴포넌트 화 시켜 다른 파일에서 import 해서 사용할 수 있도록 하는데 이 기능을 mixin이라 한다. 1. 기본 mixin 1 2 3 4 5 6 7@mixin radius($rad1, $rad2, $rad3, $rad4){ border-radius: $rad..

    , , , , 

  • SASS - 변수 및 제어문
    링고파이  by 링고파이|2019/12/19 08:57

    sass는 기존 CSS에는 없는 변수와 각종 제어문 등이 있어 이를 통해 지정할 수 있다. 다만 이 제어문들은 실행환경(런타임)에서는 작동하지 않는걸 인지하고 있어야 한다. 1. 변수 1 2 3 4a { $textColor: orange; .photo-#{$textColor} { color: red;} color: $textC..

    , , , , 

  • SASS - 기본 문법
    링고파이  by 링고파이|2019/12/13 11:08

    sass는 기존 css에 약간의 기능을 더한 것이며, 컴파일 하여 CSS를 사용할 수 있게 하는 일종의 도구라고 볼 수 있다. 이 글에서는 기본적인 문법 및 컴파일 방법에 대해 알아보도록 한다. 1. 셀렉터 중첩 1 2 3 4 5 6 7.content { p { font-size: 7rem; } } .content p { font..

    , , , , 

  • CSS border-radius를 이용해서 사각형 형태의 사진을 원형 사진으로 만들기
    uknowapps  by uknowapps|2019/11/01 10:21

    border-radius를 이용해서 사각형 형태의 사진을 원형 사진으로 만들기 프로필 사진 등을 보여줄 때 사각형 형태로 보여주기도 하지만 원형 사진 형태로 보여주는 경우가 많다. 사진을 원형으로 보여주고 싶을 때 border-radius 속성을 이용하게 되는데 이미지의 좀 더 자연스럽..

    , , , 

  • 줄바꿈 처리 CSS 속성 word-wrap, word-break
    uknowapps  by uknowapps|2019/10/24 10:32

    textarea에서 글자를 입력할 때 영문의 경우 공백 없이 글자를 입력하고 입력한 글자를 HTML 태그에 표시할 때 아래와 같이 기본적으로 줄바꿈이 되지 않는다.영문 입력시 공백 없이 글자를 입력해서 표시할 때 자연스럽게 줄바꿈을 하려면 아래 명시한 CSS 속성을 이용할 수 있다..

    , , , 

  • 클릭하시면, 다른 썸네일을 보실 수 있습니다. 줄바꿈 처리 CSS 속성 word-wrap, word-break
    줄바꿈 처리 CSS 속성 word-wrap, word-break
    uknowapps  by uknowapps|2019/07/25 11:25

    textarea에서 글자를 입력할 때 영문의 경우 공백 없이 글자를 입력하고 입력한 글자를 HTML 태그에 표시할 때 아래와 같이 기본적으로 줄바꿈이 되지 않는다. 영문 입력시 공백 없이 글자를 입력해서 표시할 때..

    , , 

  • CSS table에서 첫번째 tr 고정 나머지 tr 스크롤 처리하기
    uknowapps  by uknowapps|2019/07/09 13:00

    table에서 첫번째 tr 고정 나머지 tr 스크롤 처리하기 table에서 첫번째 tr 고정 나머지 tr 스크롤되도록 처리하고 싶으면 첫번째 tr에 position: absolute를 주고 table를 div로 감싼다. table를 감싸고 있는 div에는 overflow-y: scroll를 지정한다. .main { padding-top:3..

    , 

  • CSS 글자색은 선명하고 배경색은 투명하게 처리하기
    uknowapps  by uknowapps|2019/06/20 09:53

    글자색은 선명하고 배경색은 투명하게 처리하기 배경색은 투명하게 처리하려고 배경색에 opacity 속성을 사용하면 글자색도 투명도가 적용되어 흐려지는 현상이 일어난다. 이럴 경우 rgba를 이용해서 배경색에 투명도를 지정하면 글자색은 선명하고 배경색을 투명하게 처리할 수..

    , , 

  • 클릭하시면, 다른 썸네일을 보실 수 있습니다. CSS div 태그에서 수직으로 정렬하기
    CSS div 태그에서 수직으로 정렬하기
    uknowapps  by uknowapps|2019/06/14 20:31

    div 태그에서 수직으로 정렬하기 div 태그안의 내용을 수직으로 정렬할 때 vertical-align를 사용하는데 적용이 안 된다. 그럴 경우 아래와 같은 속성을 명시함으로써 해결할 수 있다. 1. display: table-cell..

  • CSS 목록 스타일 이미지 처리 및 위치 이동하기
    uknowapps  by uknowapps|2019/06/13 21:32

    목록 스타일 이미지 처리 및 위치 이동하기 ul 태그를 사용할 때 검정색 점 대신 이미지로 나열하고 싶은데 막상 나열하게 되면 이미지 사이즈를 잘 조정해서 글자와 맞추지 않으면 이미지와 글자의 차이로 어색해지는 경우가 있다. 이미지의 위치와 글자의 위치를 조정해서 자연스럽..

    , 

  • css zoom in / out
    어린왕자와 여우  by 어린왕자|2019/04/19 15:56

    /* 특정 요소를 200%로 변경 */.cssZoomIn { -ms-zoom: 2.0; // IE -moz-transform: scale(2.0); // Firefox -moz-transform-origin: 0 0; -o-transform: scale(2.0); // Opera -o-transform-origin: 0 0; -webkit-transform: scale(2.0); // Chrome -webkit-t..

  • 01.11 리액트 컴포넌트 CSS 적용 ( CSS Module, Sass, styled-co..
    BENGGRI의 블로그  by 벵그리|2019/02/01 17:03

    React.js01.11. 컴포넌트 CSS 적용 ( CSS Module, Sass, styled-components )CSS Module : 모듈화된 CSS로 CSS 클래스를 만들면 자동으로 고유한 클래스네임을 생성하여 스코프를 지역적으로 제한하는 방법이다.Sass : CSS 전처리기 중 하나로, 확장된 CS..

    , , , , 

1 2 3 4 5 6 7 8 9 10 다음