본문 바로가기

UIUX Web Standard/COA Lab's CSS

background 속성 5 - clip 배경에 색상을 적용 할 때 범위를 지정하는 속성이다. 속성 속성값 설명 background-clip border-box 기본값, 테두리 포함 배경색상 적용 padding-box 테두리 안쪽부터 배경색상 적용 content-box 안쪽 여백 제외 배경색상 적용 initial 기본값이 적용된대로 배경색상 적용 inherit 상위요소에 대한 상속을 받아 적용 Browser Support background-clip 크롬4.0 엣지9.0 파이어폭스4.0 사파리3.0 오페라10.5 See the Pen zYGRrrq by LimsUIUX (@LimsUIUX) on CodePen. 더보기
background속성 4 - blend-mode 두개의 이미지가 합성관계를 만들어 내는것을 블렌드 모드라고 하는데, css에서도 속성으로 지원하고 있다. 포토샵에서 blend mode와 같은 모습을 css에서 구현할 수 있다. 즉 겹쳐져 있는 이미지가 있을 때, 아래있는 이미지와의 합성관계를 만들어 주는데, 각 모드별로 이미지를 다르게 합성해 주어 표현력이 더 다양해 졌다. 배경에 이미지를 두개를 넣은 다음, 아래와 같은 속성 값 들 중에 한가지를 적용한다. CSS Syntax background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity; Browser Support 아래와 같이 브라우저.. 더보기
img에 filter 처리하는 방법 지금까지 이미지에 효과를 적용하기 위해서는 포토샵으로 효과를 적용한 다음 저장하여 이미지를 사용했다. 하지만, filter()라는 속성을 활용해 css문서에서 적용해 볼 수 있게 되었다. 아래 속성값 중에서 선택하여 작성한 코드는 아래를 참고한다. CSS 속성 Syntax filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); See the Pen xxGYwvO by LimsUIUX (@LimsUIUX) on CodePen. 이미지처리의 업그레이드 속성들 filer : 이미지의 이펙트 효과를 적.. 더보기
background 속성 3 - gradient 그라디언트는 두가지 이상의 색상을 서서히 변형되게 만들어 주는 역할을 한다. 여기에는 방향과 색상을 표현하는 속성이 적용된다. 선형 그라디언트 적용 예 : background-image: linear-gradient(direction, color-stop1, color-stop2, ...); background-image: linear-gradient(angle, color-stop1, color-stop2); - 방향을 right처럼 정해주거나 45deg처럼 각도를 넣는 방법이 있다. 원형 그라디언트 적용예 : background-image: radial-gradient(shape size at position, start-color, ..., last-color); 예를 들어 아래와 같이 색상의 범위.. 더보기
background속성 2 - attachment 스크롤을 내리거나 올릴때 배경을 고정하고자 할 때 많이 사용하는 속성이다. fixed 속성값을 가장 많이 사용하게 된다. background-attachment: scroll|fixed|local|initial|inherit; See the Pen background-attatchment by LimsUIUX (@LimsUIUX) on CodePen. 여기에서도 이미지를 폴더안에 있는 것으로 적용해 본다. 더보기
background 속성 1 - 기본 배경에 이미지를 넣을 때 사용하는 기본적인 속성이다. 속성 속성값 설명 background-color color name, #fff(hex code), rgba(0,0,0,1) 브라우저에서 지원하는 색상표현방법으로 모두 가능 background-image url('') 이미지의 경로를 ' ' 안에 적는다. background-repeat no-repeat | repeat-x | repeat-y 반복에 대한 속성 background-attachment scroll | fixed 배경을 문서에서 스크롤할지 고정할지에 대한 속성 background-position left top | right bottom | center center 배경 위치 속성 background-size auto | 100px 100p.. 더보기
display 속성 2, 가시속성 가시속성에 해당하는 속성들을 보면, 다음과 같다. 아래 표에서 보듯이, display는 요소가 인라인인지 블록인지를 정하는 것 외에도, none이라는 요소를 안보이게 하는 속성값도 있다. 이 외에도, 안보이게 하는 속성으로 visibility, opacity, overflow까지 설명을 참고해서 작성 해 본다. 속성명 속성값 설명 display inline| block | inline-block | none | table-cell 안보이고, 공간 없어짐 visibility visible | hidden 안보이고, 공간 남음 opacity 0~1까지의 수 0 : 안보이고, 공간 남음 | 0이상 : 보이고, 공간 남음 overflow hidden | auto | scroll | visible 요소 안의 내용.. 더보기
display 속성 ※ display 속성은 요소의 성격을 변경할 수 있는 속성이다. 주로, 블록요소를 인라인요소로 혹은 인라인요소를 블록요소로 변경할 때 사용하게 되며, 그 외에도 가시속성으로 안보이게 처리할 수도 있으며, 최근에는 레이아웃을 적용하는 속성으로도 사용하게 된다. 속성값 설명 inline 한줄만 차지하며 공간의 크기가 내부의 요소 크기로 한정됩니다. 따라서 옆에 남는 공간에 다른 요소가 올 수 있다. 즉 요소의 너비도 해당 라인 전체가 아닌 해당 요소의 내용만큼만 차지한다. inline속성을 갖고 있는 요소의 대표적으로는 span, a, img... block 블록속성은 전체 행을 차지하게 되는 특징을 갖고 있다. p, div, h1~h6, p, form, header, section, footer... f.. 더보기
문단과 관련된 속성 ※ 문단과 관련된 속성 문단의 내용을 정리할 때 사용하는 속성으로, 문단 뿐만 아니라, 블록 요소에 적용할 수 있는 속성들이다. 속성 값 설명 text-align left | right | center | justify 좌|우|가운데|양끝 정렬을 의미 적용된 태그의 안에 있는 요소들을 정렬하는 것이다. 예: p태그같은 블록요소 안의 텍스트,이미지 등의 요소가 정렬됨. vertical-align top | middle | bottom 이미지나 폼요소에 주로 사용하며, 이미지의 세로 정렬이 아닌, 이미지 주변의 요소들과 이미지와의 세로배치를 정렬하는 것이다. text-indent 양수 | 음수px 들여쓰기다 되며, 기본은 왼쪽에 여백이 생기고, 음수를 적용하면 왼쪽으로 여백이 줄어든다. word-wrap n.. 더보기
CSS 기초개념 : selector(선택자), 문자관련속성 ※ HTML과 CSS HTML CSS hyper text markup language cascading style sheet ※ CSS적용방식 적용방식 의미 inline 방식 html 태그 안에 적용 내부style 방식 head 태그 안에 style태그를 작성해서 적용 외부style방식 @import규칙, link태그에 외부문서를 연결해서 적용 ※ CSS 개요 및 선택자 : 선택자란 html문서에서 가져오는 요소 선택자 종류 설명 태그(타입) 선택자 태그이름을 사용 클래스 선택자 [.]을 붙이고, 요소에 중복적용 아이디 선택자 [#]을 붙이고, 한번만 지명적용 전체 선택자 *, 문서안의 모든요소에 적용 후손선택자 선택자 선택자(공백)으로 연결 자식선택자 [>]으로 연결 반응선택자 (pseudo) :act.. 더보기
웹접근성을 위한 :focus 문서 상단에 본문내용으로 이동 푸터로 이동 위와 같이 메뉴를 작성한다. 이때 문서의 어딘가에는 id=contents, id=footer 속성을 가지고 있는 태그가 있어야 한다. CSS에서는 .skipnavi{position: absolute;left: 0;top: -50px; text-indent: -9999px;font-size: 0; width: 100%;z-index: 9999; } .skipnavi li a:focus, .skipnavi li a:active{ position: absolute;left: 0;top: 50px; display: block;width: 100%;padding:5px 0; text-align: center;text-indent: 0; font-size: 13px;fon.. 더보기

티스토리툴바