Web/CSS

[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 전문가

[CSS] 선택자(selector)

선택자(selector) : 스타일을 적용시킬 범위를 선택하기 위한 표현식 ( CSS에서의 주석은 자바에서 여러줄 주석과 마찬가지로 /* ... */를 사용합니다) ​ ​ 1. 전체 선택자 - *를 사용.( 자주 사용하지는 않으며 주로 CSS적용 전 모든 값 초기화에 주로 사용됩니다. ) 선택자 전체 선택자 ​ ​ ​ 2. 타입 선택자 - 태그 이름을 지정하여 선언 - 동일한 속성에 대한 여러 요소를 콤마(,) 로 구분하여 선언 가능 선택자 타입 선택자 태그 이름을 지정하여 선언 ​ ​ ​ 3. 그룹 선택자 - 여러 요소로 각각 같은 속석 적용 - ,(콤마)로 구분 선택자 그룹 선택자 여러 요소에 각각 같은 속성을 적용한다 ​ ​ ​ 4. id 선택자 - 요소에 id를 지정하고, style에서 지정된 i..

[CSS] HTML문서에 CSS 적용 방법

CSS? CSS란 Cascading Style Sheets의 줄임말로 문서의 스타일을 지정해 주는 언어입니다. 여기서 문서(document)란 markup language(html, xml,...)를 말합니다. CSS를 적용하는 방법에는 3가지 방법이 있습니다. ​ ​ 1. 인라인 태그 안에서 적용 태그 안에서 스타일 시트를 적용하는 방법입니다. HTML CSS 이와 같이 적용할 수 있지만 는 정보 태그이며 는 시각적인 효과입니다. 이렇듯 정보와 디자인이 혼합이 되어 있어서 보기에 좋지 않다는 단점이 있습니다. ​ css 기본 문법 1. 인라인 스타일 시트 1. 인라인 스타일시트 : 우선순위 높다! ​ ​ ​ 2. 내부 스타일 시트 이 방법은 내부에 있는 css 기본 문법 2. 내부 스타일 시트 내부 스..