본문 바로가기

UIUX Web Standard

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.. 더보기
semantic tag 시맨틱 요소는 브라우저와 개발자 모두에게 각 영역에 태그로 그 의미를 부여한다. 비의미론적 태그 : , - 내용에 대해 아무 의미가 없는 공간만 분할해 주는 태그이다. 의미론적 태그 : , , - 내용을 명확하게 정의한다. 시맨틱 태그는 태그 자체가 보여주는 기능은 없지만, 영역에 대한 의미를 명확하게 정의하는 태그로서, 블록요소이며, 아래와 같은 태그가 있다. 태그 설명 article 게시물, 기사, 컨텐츠내용을 정의 aside 좌우측에 들어갈 컨텐츠를 정의 details 상세설명을 정의 figcaption figure의 설명을 정의 figure 특별한 이미지, 도표, 사진 등 시각적 요소를 정의 header 상단에 로고, 제목요소 등의 내용을 작성 footer, address, header는 자식요소.. 더보기
entity와 Emoji (엔티티와 이모티콘) 엔티티(entity) 문자는 예약어라고도 하며, 웹브라우저에서 예약된 문자를 표시하기 위해 사용한다. ※ 예를 들어 ..보다 작음의 기호로 ( 더보기
form 요소 HTML 양식은 검색, 로그인, 회원가입 등에서 사용자 입력을 수집하는 데 사용하며, 사용자 입력은 처리를 위해 서버로 전송된다. ※ form, fieldset 요소 태그명 설명 인라인 | 블록 form 입력값을 처리하는 프로그램으로 전송할 때 사용하는 태그 블록 action 속성을 갖는다. 서버에 전달할 값을 처리하는 프로그램 주소를 지정한다. method 속성을 갖는다. 어떤 방식으로 전달할지를 정의하며, get방식 : 검색 등 비보안 데이터를 위해 사용(method="get") post방식 : 중요정보 보안 데이터를 위해 사용(method="post") fieldset > legend 입력양식을 그룹화 할 때 사용하는 태그, 자식요소로 legend를 포함한다. 블록 팁 : 양식 데이터에 민감한 정보.. 더보기
기본태그연습 기본태그 설명 인라인 | 블록 br break line 줄 바꿈 태그 블록 p paragraph 문단 태그 블록 h headline text 제목태그 , 진하고, 크기가 크다. 블록 hr horizontal line 수평선 태그 블록 ol>li ordered list 순서가 있는 목록 태그이고 li(list)는 자식태그 블록 ul>li unordered list 순서가 없는 목록 태그이고 li(list)는 자식태그 블록 dl>dt+dd description list 정의목록, 자식으로 dt와 dd를 사용 블록 span 공간분할 인라인 div 공간분학 블록 img 이미지태그 필수속성 : src(이미지경로)와, alt(대체텍스트) 인라인(인라인블록) 오늘은 웹표준 배우는 첫번째 날입니다. 오늘은 웹표준 배우.. 더보기
텍스트 요소 모두 인라인요소에 해당함 텍스트 요소 인라인 | 블록 em 강조텍스트, 기울임체 인라인 strong 강조텍스트, 굵은체 인라인 mark 부분강조, 노란색표시 인라인 b 굵은체 인라인 small 작은글씨 인라인 sub 아래첨자 텍스트 인라인 sup 위첨자 텍스트 인라인 웹페이지 제작 시 웹표준과 웹접근성을 준수합니다. 웹페이지 제작 시 웹표준과 웹접근성을 준수합니다. 웹페이지 제작 시 웹표준과 웹접근성을 준수합니다. 웹페이지 제작 시 웹표준과 웹접근성을 준수합니다. COPYRIGHT © All rights reserved. 물의 화학식은 H 2O입니다. 100m 2 ※ strong은 중요한 택스트를 정의하기 위한 태그이며, b는 의미는 없고, 단순히 텍스트를 굵게 표현하는 태그이다. 더보기
a태그와 table태그 연습 세상 겁날 것이 없어 보이는 Friends City의 시크한 고양이 네오. 지금의 모습과는 다르게 지우고 싶은 어릴 적 기억들을 가지고 있습니다. 머리 때문에 항상 자신감 없는 학창시절을 보낸 네오. 어느 날 패션 잡지를 통해 알게 된 가발의 세계에 빠져 자신만의 가발을 만들게 되고 트렌드를 선도하게 됩니다. 이후 자신감으로 무장한 네오는 다양한 친구들을 만나게 되고 자는 순간까지도 가발을 내려놓지 않습니다. 오랫동안 네오의 모습을 지켜봐 왔던 프로도의 끊임없는 애정 공세를 지금까지도 받고 있지만, 쉽사리 마음을 주지 않습니다. 항상 주변을 맴도는 프로도를 귀찮아 하면서도 내심 그런 프로도의 모습을 귀여워 하는 네오는 오늘도 프로도의 이벤트를 기대하며 외출 준비를 합니다. 카카오프렌즈 스토리 컬러링 북 .. 더보기
table tag table 태그를 사용하여 데이터를 행과 열로 정렬할수 있다. table태그의 자식요소 table 테이블을 정의 tr 테이블 안의 행을 정의, row th 테이블 안에서 제목셀을 정의, header cell td 테이블 안의 열을 정의, cell caption 테이블 캡션(설명)을 정의 테이블 위 가운데 정렬됨 colgroup 테이블 내에서 한개 이상의 열을 그룹화 함 각 셀의 전체 스타일을 컬럼에 스타일을 적용하는 대신 반복 유용함 모든 및 요소 앞에 배치 col 열의 속성을 각각 정의 colgroup의 자식요소로 배치 thead 테이블 안에서 헤더 영역을 그룹화 함 tbody 테이블 안에서 컨텐츠 영역을 그룹화 함 tfoot 테이블 안에서 푸터영역을 그룹화 함 ※ 기본 테이블은 table의 자식요소로.. 더보기
a tag 링크는 거의 모든 웹 페이지에서 찾을 수 있습니다. 링크를 통해 사용자는 페이지간에 클릭 할 수 있습니다. syntax link text Visit Naver! 속성 attribute href 절대경로 www.naver.com/ 상대경로 sub.html 문서내 이동 #content #만 작성한 경우 문서의 최상단으로 이동 javascript:; 를 작성하면 최상단 이동을 막을 수 있다. 메일주소 링크 mailto:aaa@naver.com target _self 기본. 클릭 한 것과 동일한 창 / 탭에서 문서를 엽니다. _blank 새 창 또는 탭에서 문서를 엽니다. _parent 상위 프레임에서 문서를 엽니다. _top 창 전체에 문서를 엽니다. ※ target="_blank"로 작성하면, 스크린 리더에.. 더보기
웹접근성을 위한 :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.. 더보기

티스토리툴바