전체태그 보기

#CSS (93개의 포스트)

awesomelon
초 간단 팁 img 태그에 css translate를 줄 때 img의 가로,세로 중 하나라도 홀수면 이미지가 흐릿해진다. 만약 translateX 를 준다면 가로는 무조건 짝수여야하고 반대로 translateY면 세로는 무조건 짝수여야한다. 간단하게 해결하려면 image를 background로 넣어주면 된다.
chajanee
clone coding / ⭐️stagram - login page 작업중.. 세로는 멀쩡한데 창을 줄였을 때, 가로가 깨지는 현상 발생! WHY❓ = 가로 안주고 스크린샷 2019-12-04 오후 9.12.50.png...
muchogusto
image.png
개발자도구에서 ::before 라는 것을 발견하였다.
chloe
지금 HTML 작업 중인데 개발자도구로 내가 쓴 코드를 살펴보다 ::before라는 걸 발견했다. 나는 이걸 쓴 기억이 없는데? 구글 검색을 해보니 이것도 pseudo element의 일종이라고 한다. CSS의 가상 엘리먼트. 자세한 건 나중에 여기서 읽어보자. https://yubylab.tistory.com/entry/CSS-CSS-Pseudo-Ele...
ratorz

float에 대해서

2019년 11월 28일0개의 댓글
1.float * float Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법이며. 또한 레이아웃을 잡을 때도 사용하는 기능이다 . 우리가 이미지옆에 텍스트를 적절히 배치하고 싶을때 어떻게 하면 좋을까 ? img는 블록 단위 attribute라 쉽지가 않다 . 그럴때 float를 적용해주게 된다면 8.png...
ratorz

display 속성에 대해

2019년 11월 28일0개의 댓글
1.inline 속성 * 줄바꿈이 되지 않는 속성이다. 일때 display : inline 의 속성은 4.png 이와 같이 표현된다 . 2. Block 속성 각각의 Elements들이 하나의 영역을 차지하게 돼어 줄바꿈을 하게됩니다. 5.png 3. inline-block 속성 각각의 Elements들이 하나의 영역을 차...
aaronddy

CSS Layout 레이아웃

2019년 11월 28일2개의 댓글
position 속성: relative, absolute, fixed 2. inline, inline-block, block 3. what is 'float' in CSS? 1. position 속성 * relative : 'relative'는 다른 위치 설정을 추가하지 않는 한 'static'과 동일한 결과를 보여준다. 하지만 'static'과 다르...
ratorz

Position에 대해

2019년 11월 28일0개의 댓글
HTML/CSS에서 Position의 정의 HTML에서 Tag나 Elements들이 어디에 위치할것인가 를 정하는 것이다. * relative 일때는 2.png 이렇게 된다. * 아무런 값도 주지않았을때에는 부모의 위치를 기준으로 자신의 위치가 생긴다 . * absoulte를 하고 위치값을 주었을때는 부모와의 연관성이 없게된다. ...
sooonding
css 구조 https://s3.amazonaws.com/codecademy-content/courses/make-a-website/img/selector-syntax.svg font-size - rem : 웹 브라우저의 기본 글꼴 크기를 나타낸다. 웹 브라우저의 글꼴 크기에 맞춰 (기본:16px 이면 1rem) 두배면 32px === 2rem - e...
chajanee

wecode_D+2_TIL ► CSS / Layout

2019년 11월 26일0개의 댓글
CSS - 레이아웃의 모든 것 1. position 속성 - relative, absolute, fixed 2. inline, inline-block, block 에 대해서 3. float에 대해서 * ► Position html과 상관없이 css의 position 을 통해 위치를 줄 수 있음 / 레이아웃 배치 / 객체를 위치할 때 ...
meekukin

[CSS] position, display, float 속성

2019년 11월 26일0개의 댓글
position 속성 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖는다. - static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다. - absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있다. - relative: 원래 있던 위치를 기준으로 좌표를 지정한다. - fixed: 스크롤과 상...
CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해
raram2
마진 상쇄는 흔히 '마진 겹침 현상'이라고도 불립니다. (혹자는 '마진 빡침 현상'이라고도 합니다 (。•́︿•̀。);) 하지만 인과관계로 볼 때, 마진이 겹치게 되면 상쇄가 일어나기 때문에 영미권에서는 '마진 상쇄(Margin collapsing)'로 부르고 있습니다. 다음은 MDN과 WC3의 마진 상쇄에 대한 설명입니다...
IE에서 flex-direction: column 사용시 주의사항 ⚠️
poburi
문제 flex-direction: column이 문제가 되었는데 자식 영역의 height가 잡히지 않아서 전부 겹치는 문제가 생김. Chrome환경에서는 문제가 없던 것이 IE에서 문제가 되었다. 해결 flex: 1을 flex: 1 0 auto로 바꾸니까 문제가 해결되었다. IE10에서 flex의 기본값은 최신 사양에 정의 된대로 0 1 aut...
noyo0123

css - transform

2019년 11월 20일0개의 댓글
transform으로 할 수 있는 것들 * translate, translate3d 위치를 이동시킴. css3에서는 3d도 지원 translate도 종류가 다양합니다. translate(x,y) image.png 출처 : translate() - MDN translateX(200px), y, z도 있습니다. 물론 음수로 보낼때는 왼쪽으로 이동합니다....
noyo0123

css - transition

2019년 11월 20일0개의 댓글
css 프로퍼티를 변화시킬때 그 기간을 설정하여 동적인 효과를 내는 속성입니다. transition-property의 속성값에 all을 적으면 모든 변화를 transition에 적용합니다. 또한, 단일 속성만 transition 적용할 수도 있습니다. div위에 마우스를 올렸을때 width 변화만 transtion 적용한 예제
noyo0123

css - animation

2019년 11월 20일0개의 댓글
css에서 animation 형태로 @keyframes 키워드를 통해 애니메이션이 어느 타이밍에 어떻게 변할지 정의한후, css의 animation프로퍼티를 이용하여 dom에 애니메이션을 적용합니다. 1. @keyframs 정의 정리 자동으로 움직여야되는 형태는 animation을 쓰고, 뭔가 이벤트가 발생했을때 움직이는 것은 transi...
noyo0123

css - position

2019년 11월 20일0개의 댓글
position: relative absolute fixed static relative: 렌더링된 위치를 기준으로 top, right, bottom, left가 정해짐. absolute: 상위 요소의 위치를 기준으로 top, right, bottom, left가 정해짐. fixed: 브라우저 (0, 0)을 기준으로 top, right, bottom...
litien

[ BootStrap V4.3] Grid System 배치

2019년 11월 19일0개의 댓글
학부연구생으로 참여중인 과제가 개인으로 진행하기에 UI 컴포넌트에 대한 부담을 줄이고자 BootStrap을 적용하기로 결정했다. 본 포스팅에서는 BootStrap 그리드 시스템 배치 과정을 다루고자 한다. BootStrap이란? 개발자는 CSS까지 작성할 여유가 없는 경우가 대부분이다. 특히 프론트엔드를 메인으로 다루지 않은 개발자라면 CSS에 꽤나...
jmkim87

Center를 장악해보자

2019년 11월 7일0개의 댓글
Element의 Center를 찾기 화면 레이아웃을 만들고 스타일 잡다보면 vertical, horizontal center 만드는게 여간 까다로운게 아닙니다. 한번 정리를 해봅니다. horizontal center는 간단한 부분이 많지만 vertical center가 까다롭고 parent element의 영향이 많습니다. Horizontal C...