전체태그 보기

#CSS (64개의 포스트)

devzunky
element의 style 태그 내에 있는 속성들의 값을 읽기위해 사용하는 method입니다. element.style."attribute"의 경우, 특정 값을 할당할 때는 사용할 수 있지만 현재 element.style."attribute"내에 들어있는 값을 읽어오는 것은 불가능하기 때문입니다. * 1. 문법 let style = window.g...
devzunky

TIL no.17 - Image Sprite

5일 전0개의 댓글
Image Sprite 만약 사용자와의 상호작용을 통해 아이콘이 변경되는 웹을 구현해야하는 경우, 이벤트가 있을 때마다 서버 통신을 통해 다른 아이콘을 불러온다면 불필요한 통신이 굉장히 많아질 것입니다. 이러한 경우를 대비해 사용하는 기법이 Image Sprite 입니다. CSS를 이용해 하나의 큰 이미지의 부분 부분을 상황마다 잘라서 보여주는 것입니다...
devzunky
사용자와 웹페이지 간의 상호작용하는 모습을 예제를 통해 HTML/CSS/JavaScript가 어떻게 쓰이는지 포스팅하겠습니다. * 1. Log-in 버튼 활성화 1-1. 소스 코드 HTML 기본 클래스였던 unactivatedLoginColor가 삭제되고 activatedLoginColor가 추가된 것을 확인할 수 있습니다. * 실제...
devzunky
HTML/CSS에서 div 3개를 나란히 정렬하는 방법에 대해 포스팅하겠습니다. ** 결과 스크린샷, 2019-10-04 17-55-47.png 가운데 요소에 margin값을 줘서 1번 방법과 같은 결과가 나오도록 했습니다. flex는 부모요소의 display를 flex로 설정하고 자식요소의 flex값을 설정하는 방법입니다....
hyksmine

Enermy Rain Game

2019년 10월 4일0개의 댓글
aac063eef02bb1f9674bf510c84312c2.jpg game * 백그라운드 이미지 가운데에 넣기 * 귀신내려오는 중 스크린샷 2019-10-05 오후 2.14.57.png :: 뭔가 신기해. 뭔가 만들어내고 있는 것 같아서 기분도 묘하고... 되게 단순해 보이는 데 저렇게 이미지를 띄우고 움직이게 하는 데까...
[번역] 확장성 있는 CSS
leejh3224

[번역] 확장성 있는 CSS

2019년 10월 3일4개의 댓글
수 년전부터 나는 확장성 있는 CSS에 대해 고민하게 됐다. 그 때는 친구들이 빌려준 책 몇 권이나 괜찮은 블로그 글 몇 개를 제외하면 지금처럼 참고할 수 있는 자료가 많지 않았다. 당시엔 CSS가 꽤 새로운 존재였고, 대부분의 사람들은 거대한 애플리케이션을 만들 때의 확장성과 같은 개념에 대해 깊게 생각하지 않았다. 그 시절엔 Css zen garden...
ssseungzz7

CSS Basics

2019년 10월 3일0개의 댓글
CSS의 기본을 다룹니다. CSS를 HTML에 적용시키는 방법, 기초 문법, 선택자와 가상 요소 및 상속에 대한 내용입니다.
yumin25

css 기초

2019년 10월 3일0개의 댓글
css- coding factory HTML에 CSS를 적용시키는 방법 * * Inline Style Sheet * Internal Style Sheet * Linking Style Sheet Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣어 적용시키는 방법. 해당 태그가 선택자가 되고, css 코...
holab

Perceivable <대체 텍스트>

2019년 10월 1일0개의 댓글
검사항목 (적절한 대체 텍스트 제공) 텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다. IR기법 .blind{position:absolute;line-height:0;overflow:hidden;} .blind{position:absolute;top:-1000em;line-height:0;overflow:hid...
devzunky

TIL no.2 - CSS 레이아웃

2019년 9월 30일0개의 댓글
CSS 레이아웃 ** 1. display property block - 한줄을 전부 차지하는 엘리먼트. 대표적으로 div, p가 있으며, HTML5에서는 header, footer, section 등이 추가 되었습니다. inline - 컨텐츠의 크기 만큼만 차지하는 엘리먼트. 대표적으로 span이 있습니다. none ...
devzunky
HTML/CSS 놓치기 쉬운 포인트 1. [block] vs [inline] div와 다르게 span은 line break 되지 않는다. div 같은 태그를 block element, span과 같은 태그를 inline element라고 한다. 2. font-family 설정해줄 때 font-family: Georgia, "Times Ne...
ehensr3n

CSS Selectors and IE support

2019년 9월 28일0개의 댓글
::before - IE8++ ::after - IE8++ :first-child - IE7++ :last-child - IE9++ :nth-child - IE9++ @font-face - IE9++ inline-block - IE8++ transitions - IE10++ transform - IE9++ animation - IE10++ rem - IE1...
runningwater

[TIL]css로 gradient 효과 주기

2019년 9월 25일0개의 댓글
css에 gradient 넣기 내가 익숙한 기술에만 집착하면 더 성장할 수 없다고는 생각하지만 내가 생각지도 못한 디자인을 어떻게 생각을 할 수 있을까? 그런 의미에서 디자이너와 작업하는 것은 즐겁다. 요구하는 디자인에 사용할 기술에 대해서 가능한 지 불가능한 지 하나씩 찾다보면 이미지가 아니라 그냥 코드로도 만들 수 있는 거였구나 하는 깨달음을 얻을 수...
hyksmine

CSS continued..2

2019년 9월 24일0개의 댓글
f73aa992a62349e55068249570d83b69.jpg [HTML//CSS] ; input & textarea * Input ; type, placeholder 속성(attribute)가 있다 _ _ :: 크게 흔들렸고, 길게 대화를 나누었다. 처음와서 고민은 진도와 실력의 갭이 과연 메꾸어 질 수 있는 가 였는 데 고새 ...
hyksmine

CSS continued..

2019년 9월 24일0개의 댓글
444fd906e02899c7f1afc1b4b4e924d8.jpg [CSS] ; 상속(Inheritance) 문자 그대로의 상속, css의 특징으로 부모에게 적용된 효과가 그 자식에게도 동일하게 적용이 될 수 있다. 가령, body태그에 글씨 색상을 핑크로 해놓으면 그 밑의 p태그 등 자식 태그들도 자연스럽게 핑크색 글씨를 갖게 됨. 물론, ...
hyksmine

HTML/ CSS

2019년 9월 24일0개의 댓글
스크린샷 2019-09-05 오후 9.08.01.png [CSS] ;Margin & Padding & Border 9921C3505A42FB1B07.png - MARGIN ; ELEMENT사이의 여백. 마진에 값을 주면 그 만큼의 거리만큼 다른 엘리먼트와의 거리가 멀어지게됨. - BORDER : 테두리. ELEMENT의 경...
decody
css에서 font-family로 동일한 font-size를 적용했을 때, 서로 다른 높이값을 가지게 된다. 각 폰트 자체가 갖고 있는 다른 매트릭스로 인해 높이값이 다르게 된다. 이전까지만 해도 글자가 위아래로 짤릴 경우, line-height: 1.0이나 line-height: 1.5 등의 값을 적용하면서 오류를 수정하곤 했다. 하지만 출처에 명시한 아...
decody

유용한 텍스트 CSS 말줄임

2019년 9월 3일0개의 댓글
CSS로 작성되는 텍스트 말줄임은 웹 접근성에 반하지만 널리 사용된다. 일반적으로 적용하고자 하는 요소(또는 태그)를 block처리하고 text-overflow: ellipsis; white-space: nowrap; overflow: hidden 스타일을 적용하면 된다. 그러나 일반적인 텍스트 말줄임 외에의 텍스트 말줄임을 처리하는 방법을 소개한다. ...
🚫 안티 패턴으로서의 CSS background-image 속성
chris
CSS background-image 속성은 여러가지 놀라운 일들을 할 수 있었지만, 대부분의 경우에는 더 이상 사용하지 않는 것이 좋습니다.
decody

sticky 내비게이션 만들기

2019년 8월 13일0개의 댓글
sticky 내비게이션은 스크롤시 페이지 상단에 고정되는 내비게이션이다. css의 postition:sticky 속성을 이용해 간단히 해당 내비게이션을 만들 수 있다. IE는 지원하지 않으며, Edge 16+, Firefox 32+, Chrome 56+ 지원한다. ~js const agent = navigator.userAgent.toLowerCase()...