그럼에도 불구하고

내가 사용하고 싶은 패턴을 클릭하여 사용하면 된다, :) https://projects.verou.me/css3patterns/ CSS3 Patterns Gallery CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for ex projects.verou.me

스크롤 앵커링에 대해 알아보자 [ 스크롤 앵커링 / overflow-anchor ] 스크롤 앵커링이란 데스크톱 혹은 모바일 기기를 통해 웹 페이지를 볼 때, 이미지 로딩 등으로 화면이 갑자기 다른 곳으로 스크롤링되어 버리는 현상을 해소하기 위해 도입된 기능이다. 데스크톱이나 모바일 기기를 이용해서 인터넷 뉴스나 블로그 같은 웹 페이지들을 보다 보면, 갑자기 웹 페이지의 다른 곳으로 화면이 스크롤되어 버리는 현상이 나타나고는? 했다. ( 이제는 그러지 않는다. 적어도 크롬에서는!!! ) 이는 웹 페이지를 로딩하는 방식에서 용량이 작은 텍스트를 먼저 로딩하고, 고해상도의 이미지나 비디오 같은 오브젝트들을 나중에 로딩해서 발생하는 문제이다. 사용자가 웹 페이지를 스크롤 다운로드 하면서 보고 있을 때, 이미 스..

텍스트를 세로로 표시하는 법을 알아보자 // 세로로 왼쪽 -> 오른쪽 writing-mode: vertical-lr; // 세로로 오른쪽 -> 왼쪽 writing-mode: vertical-rl; // 영어는 추가로 작성 text-orientation: upright; writing-mode 속성을 이용해서 세로로 텍스트를 표시해 줄 수 있다. 한글을 타이핑할 때는 세로로 보이지만, 영어로 타이핑될 때는 기존 속성으로는 90 º 돌아간 모습으로 표시된다. 이를 해결하는 방법으로는 text-orientation 속성을 이용하면 된다.

오늘은 벤더 프리픽스에 대해 알아보자 CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용해야 한다. Can I use? 에서 제공하는 브라우저별 CSS 지원 정보를 보면 텍스트와 요소의 선택을 방지하는 user-select 프로퍼티는 모든 브라우저에 벤더 프리픽스를 사용하여야 한다. 브라우저의 버전이 올라감에 따라 벤더 프리픽스를 사용하지 않아도 될 수 있다. 그러나 구형 브라우저를 지원하기 위하여 벤더 프리픽스를 사용하여야 할 필요가 있다. Can I use... Support tables for HTML5, CSS3, etc caniuse.com * { -webkit-user-select: none; /*..

오늘은 noopener / noreferrer에 대해 알아보자 우선 noopenner와 noreferrer에 대해 살펴보기 전에 a 태그의 target 속성을 살펴봐야 한다. [ target ] a 태그의 속성 중에는 target이라는 속성이 있다. Value Description target = "_self " 연결할 페이지의 URL 클릭 시 현재의 탭에서 연결 target = "_blank " 연결할 페이지의 URL 클릭 시 새 탭에서 연결 즉, target은 "href 속성의 URL에 해당하는 웹 페이지를 어디에서 열 것인가?"를 지정하기 위한 속성이다. target = "_self " _self의 경우 연결한 웹 페이지를 현재의 탭에서 연다. _self는 기본 설정이므로 target 속성을 생략하..

오늘은 display 프로퍼티 / block / inline / inline - block 레벨 요소를 배워보자 [ display 프로퍼티 ] display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다. 프로퍼티값 키워드 설명 block block 특성을 가지는 요소(block 레벨 요소)로 지정 inline inline 특성을 가지는 요소(inline 레벨 요소)로 지정 inline-block inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정 none 해당 요소를 화면에 표시하지 않는다. (공간조차 사라진다) 모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 표시값을 가진다. HTML 요소는 block 또는..

오늘은 CSS의 프로퍼티 값의 단위에 대해 알아보자 [ CSS 프로퍼티 ] CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다. [ 키워드 ] 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다. 자세한 내용은 각각의 프로퍼티를 참조하기 바란다. [ 크기 단위 ] cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, % 이다. px은 절댓값이고 em, % 는 상대 값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. 프로퍼티 값이 0인 경우, 단위를 ..

오늘은 Viewport 단위에 대해 알아보자 [ Viewport ] 반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다. 하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다. Viewport 단위는 상대적인 단위로 Viewport를 기준으로 한 상대적 사이즈를 의미한다. 단위 Description vw viewport 너비의 1/100 vh viewport 높이의 1/100 vmin viewport 너비 또는 높이 중 작은 쪽의 1/100 vmax viewport 너비 또는 높이 중 큰 쪽의 1/100 예를 들어 viewport 너비가 1000px, 높이가 600px인 경우, 1vw : viewport 너비 1000px의 1%인 10px 1vh : v..

오늘은 시맨틱 웹(Sementic Web)과 시맨틱 태그(Sementic tag)에 대해 알아보자 [ 시멘틱 웹 ] 시멘틱 웹이란? 시멘틱 웹은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산 환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임 워크이자 기술이다. [ HTML5에서의 시맨틱 웹 ] HTML5에서는 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었다. 예를 들어 기존에는 내용 로만 나타낼 수 있던 머리 부분을 내용 로 쉽게 더 의미론 적으로 나타낼 수 있게 되었다. 이는 div와 id = h..

오늘은 여러 가지 선택자에 대해 알아보자 [ 연결 선택자 ] 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. 그리고 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 한다. [ 하위 선택자 ] 하위 선택자(descendant selector)를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택 자라고도한다. 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다. 상위요소 하위요소 [ 자식 선택자 ] 자식 선택자(child selector)는 하위 선택자와 ..

오늘은 그러데이션 효과에 대해 알아보자 [ 그러데이션 효과 ] 웹 문서의 배경을 꾸밀 때 배경색이나 이미지를 사용하는 것 외에 그러데이션 효과로 색 다른 느낌을 줄 수 있다. [ 선형 그러데이션 ] 선형 그러데이션이란 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다. 함수 : linear-gradient linear-gradient( to 방향 / 각도, 색상 중지점, [색상 중지점.....]); [ 방향 ] 그라데이션 방향을 지시할 때는 끝 지점을 기준으로 to 예약어와 함께 사용한다. to 다음에는 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다. 여기서 예약어는 수평 방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용한다. ex) 1..

오늘은 캐스케이딩과 스타일 우선순위에 대해 알아보자 [ 캐스케이딩 ] CSS에서 'C'는 캐스케이딩(cascading)의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용된다. 다시 말해 CSS는 우선순위가 있는 스타일 시트 정도로 해석할 수 있다. 그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다. 캐스케이딩은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념이다. 스타일이 충돌되지 않게 하는 방법으로는 다음 2가지 방법이 있다. 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다. 스타일 상속: 태그의 포함 관계에 따라 부모 요소..