CSS

[ReactJS] Antd CSS Framework

CSS를 직업 코딩하는 방법도 있지만 기능 개발에 시간을 많이 투자하면서 CSS도 직접 코딩을 하게 되면 시간소모가 상당히 많이 될수 있습니다. 그래서 프레임워크를 사용하면 이런 시간도 절약을 할 수가 있고 실무에서도 사용하기도 하는데요. 요즘은 CSS 프레임워크가 너무 잘되어 있기때문에 프레임워크위에 다시 CSS를 입히기도합니다. React JS를 위한 CSS 프레임워크는 Material UI, React Bootstrap, Semeantic UI, Ant Design, Materialize 등이 있는데요. 이번에는 Ant Design를 사용해보려고 하는데 Ant Design는 중국에서 만들어 졌습니다. Ant Design의 너무 많은것이 들어있어 규모가 상당히 크다는 단점이 있습니다. 하지만 스타일이..

[jQuery] show(), css(), toggle(), hide()

이미지 보이기 이미지 축소 이미지 확대 이미지 추가 이미지 숨기기/보이기 ​ ​ ​ ​ $(document).ready(function(){ $("img").click(function(){ alert("이미지를 클릭했습니다."); $(this).hide(); }); }); 지난번 포스팅에서 제이쿼리문을 작성하는 두가지 방법중 하나입니다. 굳이굳이 이렇게 한번 해봤습니다,,, 해당 코드는 "img" -> 태그를 클릭하면 이벤트가 발생합니다. "이미지를 클릭했습니다."라는 메세지를 출력시키며 $(this)자신을 hide()숨깁니다. 클릭해볼까요? ​ ​ function showImg(){ $("img").show(); } 이 함수는 이미지 보이기 버튼을 클릭하면 실행됩니다. 함수가 실행되면 이미지가 show..

[CSS] animation(애니메이션), 다단

1. animation(애니메이션) 박스의 크기, 위치, 색상 등의 값을 여러 단계로 나눠 실행. (애니메이션 효과) CSS로 애니메이션 효과를 줄수 있기는 하지만 실제로 JavaScript로 많이 구현함 ​ Animation Anima 시간의 변화에 따라 도형의 색깔과 크기가 변합니다! ​ ​ ​ 2. 다단 - multi coumn 지원 ​ "우리는 별이오." "별?" "무수히 많고 그래서 어쩌면 보잘것없어 보일 수도 있지. 바라보지 않는 이상 우리는 서로를 잊을 수도 있소. 영원의 숲에서처럼 우리들은 서로를, 자신을 돌보지 않는 한 언제라도 그 빛을 잊어버리고 존재를 상실할 수도 있는 별들이지." 숲은 거대한 암흑으로 변했고 그 위의 밤하늘은 온통 빛무리들 뿐이었다. 칼의 말은 이어졌다. "그러나 우..

[CSS] transform

1. translate - 위치이동 Transform - translate translate(x, y) : 위치이동 ​ ​ ​ 2. transrotate - 회전 Transform - rotate rotate(deg) : 회전 ​ ​ ​ 3. scale - 확대/축소 Transform - scale scale(x, y) : 크기 ​ ​ ​ 4. skew - 찌그러뜨리기 Transform - skew skew(deg, deg) : 변형 ​ ​ ​ 5. transition - 속성 변환 Transition transition : 속성 전환 마우스 올리기 전(위)과 마우스 올린 후(아래) ​ ​ ​ 5-2. Moving Menu COMPANY PRODUCT SERVICE COMMUNITY

[CSS] border, background, text

1. border border-radius : 박스의 테두리 선을 둥굴게 box-shadow : 박스의 그림자 지정 border-image : 특정 이미지를 테두리의 배경으로 지정 ​ C I N E K H 2. background gradient : 여러 색을 원형이나 선형으로 칠해주는 효과 background-size : 배경 이미지 크기 조절 backgorund-origin : 배경 이미지 테두리 맞춤 multi-background : 배경 이미지 여러 개 지정 background-clip : origin과 비슷 background-size background-size multi-background multi-background backgroung-clip background-clip 3. text ..

[CSS] 레이아웃(layout) - float, clear, display, overflow, position

​ layout - 블록들의 위치를 나열 ​ ​ 1. float - 요소를 블록형태로, 특정 방향으로 정렬 드래곤 라자 "우리는 별이오." "별?" "무수히 많고 그래서 어쩌면 보잘것없어 보일 수도 있지. 바라보지 않는 이상 우리는 서로를 잊을 수도 있소. 영원의 숲에서처럼 우리들은 서로를, 자신을 돌보지 않는 한 언제라도 그 빛을 잊어버리고 존재를 상실할 수도 있는 별들이지." 숲은 거대한 암흑으로 변했고 그 위의 밤하늘은 온통 빛무리들 뿐이었다. 칼의 말은 이어졌다. "그러나 우리는 서로를 바라볼 줄 아오. 밤하늘은 어둡고, 주위는 차가운 암흑 뿐이지만, 별은 바라보는 자에겐 반드시 빛을 주지요. 우리는 어쩌면 서로를 바라보는 눈동자 속에 존재하는 별빛 같은 존재들이지. 하지만 우리의 빛은 약하지 않..

[CSS] 상자(box)

1. 상자(box) ​ 1-1. width, height : px, %, em 등으로 수치를 표기 ​ ​ 1-2. margin(바깥 여백), border(테두리), padding(안쪽 여백)​ ​ ​ 1-3. margin 병합 - 세로 방향 마진을 지정한 두 개의 서로 다른 요소가 수직 방향으로 접해있을 때 두 요소 사이의 margin 간격은 큰 쪽으로 병합 ​ ​ ​ 1-4. margin을 이용한 중앙 정렬 - 박스의 좌우 속성값을 auto로 지정해서 중앙에 위치. (정렬하려는 박스의 width를 반드시 지정) ​ 드래곤 라자 명언 샌슨 네드발 저와 말이 함께 후치를 타면 됩니다. 핸드레이크 나는 단수가 아니다.

[CSS] 배경(background)

배경(background) ​ background-color : 배경 색 지정 background-repeat : 배경 이미지 지정 background-position : 배경 이미지 반복 지정 background-attachment : 배경 이미지의 고정 여부 background : 관련 속성을 한 줄로 표기 ​ ​ 해당 위치에 png파일이 있어야 아래 코드가 정상 작동합니다. background img Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit neque ut elementum pellentesque. Nunc iaculis, felis quis rutrum pellentesque, velit tortor ac..

[CSS] 단락(paragraph)

단락(paragraph) -문단을 중심으로 정렬, 들여쓰기 등을 지정 ​ text-align : 글자의 정령 기준 지정 (justify : 양쪽정렬) vertical-align : 이미지나 폼 요소를 세로 정렬 text-indent : 들여쓰기 text-transform : 대소문자 변경 (capitalize : 첫 글자만 대문자) text-decoration : 밑줄 등(밑줄, 가운데 줄, 윗줄, 밑줄 제거) letter-spacing : 글자와 글자간의 간격 ​ zdnet korea 과학자들이 1분을 59초로 줄이려는 이유 지구는 매일 한 번 자전하는 데 이에 걸리는 시간은 24시간이다. 지구 자전 기반의 시간체계는 ‘천문시’이고, 원자의 진동수가 일정하다는 점에 착안해 만든 정교한 원자시계로 만든 ..

[CSS] 폰트(font)

font(폰트) - 글자와 관련된 스타일을 지정할 수 있는 속성 ​ font-family : 글꼴 지정 font-size : 크기 지정 font-weight : 굵기 지정 font-style : 글씨체 지정 font-variant : 소문자->대문자 변환 (일반 대문자보다 작다) Lint-height : 줄 간격 지정 font : 위 속성을 한 줄에 모두 지정(font-size/font-family 생략 불가) ​ Bigdata 전문가 과정 Bigdata 전문가