AHRIBORI.COM
v0.9
search
Search
vpn_key
Home
About (2)
Javascript (7)
CSS (12)
React (3)
Webpack (1)
Java (0)
Node.js (4)
ElasticSearch (1)
자료구조 (8)
알고리즘 (6)
Selenium (1)
Linux (2)
Docker (1)
Git (1)
Tip (4)
Issue (1)
Memo (3)
star
0
[CSS] 플렉스박스 (Flexbox)
플렉스박스 (FLEXBOX) 레이아웃을 잡는다는 것은 굉장히 어려운 일이다. 정답이 없기 때문이다. table을 이용하거나 position 또는 float 속성을 이용하는 등 여러가지 방법을 조합하여 어찌어찌 레이아웃을 잡고 나면 여러 부작용이 꼬리에 꼬리를 물고 나타난다. 하지만 Flexbox를 이용하면 표준화된 방법으로 쉽게 원하는 레이아웃을 잡을 수 ...
6년 전
아리보리
댓글 1
|
조회 2607
star
0
[CSS] 트랜지션(Transition)과 애니메이션(Animation)
트랜지션과 애니메이션 요소의 속성값이 변화하면 보통 즉각 그 효과가 나타나는데, 트랜지션과 애니메이션을 사용하면 변화가 일정 시간(duration)에 걸쳐 나타나게 할 수 있다. 트랜지션과 애니메이션의 사용법과 각각의 특징을 정리한다. 1. 트랜지션 * 요소의 변화를 일정 기간(duration)동안 일어나게 함 * 자동으로 발동되지 않음 (hover나...
6년 전
아리보리
댓글 0
|
조회 20423
star
0
[CSS] position, z-index, overflow
1. 위치(POSITION) 1-1. STATIC * 기본값 * HTML 기본 배치 순서인 왼쪽에서 오른쪽, 위에서 아래로 배치 * 부모 요소의 위치가 기준이 됨 1-2. RELATIVE * top, bottom, left, right 속성 사용 가능 * 부모 요소를 기준 * 기본적인 동작 원리는 기본값인 static과 동일 1-3. ABSO...
6년 전
아리보리
댓글 0
|
조회 1513
star
0
[CSS] white-space, text-overflow, word-wrap, word-break 속성에 대하여
WHITE-SPACE, TEXT-OVERFLOW, WORD-WRAP, WORD-BREAK 속성 정리 볼 때 마다 헷갈리는 속성들이라 따로 정리함 1. WHITE-SPACE * space, tab, line break 세 가지를 white space라고 함 * html은 기본적으로 white space를 연속으로 아무리 입력해봤자 space 한 번만 적...
6년 전
아리보리
댓글 0
|
조회 1703
star
0
[CSS] 폰트(Font)와 텍스트(Text)
FONT와 TEXT에 대하여 1. FONT-SIZE 폰트의 크기를 정의 2. FONT-FAMILY 폰트를 지정 * 디바이스에 해당 폰트가 설치되어 있어야함 * 폰트는 여러개 동시에 지정 가능 * 첫 번째로 지정한 폰트가 디바이스에 설치되어있지 않으면 두 번째로 지정한 폰트가 적용 * 지정한 폰트가 모두 디바이스에 설치되어 있지 않으면 OS 디폴트...
6년 전
아리보리
댓글 0
|
조회 431
star
0
[CSS] 백그라운드(Background) 속성
BACKGROUND 1. BACKGROUND-IMAGE * 요소의 배경 이미지 지정 body { background-image: url("http://image-server.com/my-image.png"); } * 여러 개의 이미지를 설정할 수 있음 (먼저 설정된게 앞에 출력) body { background-image: ur...
6년 전
아리보리
댓글 0
|
조회 1500
star
0
[CSS] 디스플레이(Display) 관련 속성
DISPLAY 1. DISPLAY 1.1 BLOCK * 항상 새로운 라인에서 시작 * width: 100% * width, height, margin, padding 지정 가능 * block 엘리먼트 내부에 inline 요소 포함 가능 * div, h1~h6, p, ol, ul, li, hr, table, form 등이 있음 1.2 INLINE ...
6년 전
아리보리
댓글 0
|
조회 417
star
0
[SCSS] 반응형 코딩을 쉽게 할 수 있는 개꿀 Mixin
SCSS 설정은 생략~ _MIXIN.SCSS $breakpoints: ( 'small': (max-width: 767px), 'medium': (max-width: 992px), 'large': (max-width: 1200px), ) !default; @mixin respond-to($breakpoint)...
6년 전
아리보리
댓글 1
|
조회 2144
star
0
[CSS] 박스 모델 (Box Model)
박스 모델(BOX MODEL) 1. BOX MODEL 1.1. CONTENT: * 태그 안에 내용을 넣었을 때 그 내용이 표시되는 영역. * width와 height 속성을 가짐 1.2. PADDING: * Border 안쪽 여백 * 기본 색은 transparent * 요소에 적용된 배경색과 이미지를 따름 1.3. BORDER: * 테두리...
6년 전
아리보리
댓글 0
|
조회 425
star
0
[CSS] 크기 단위와 색상 단위
크기 단위, 색상 1. 크기 단위 PX * px는 픽셀이며 화소 한 개를 의미. 절대값 단위 % * 엘리먼트 사이즈 기준 백분율 크기 EM * 폰트 사이즈 기준 배수 단위 크기 REM * em과 같이 폰트 사이즈를 기준으로 하는 배수 단위의 크기이지만 em이 해당 엘리먼트의 폰트 사이즈를 기준으로 한다면 rem은 루트 엘리먼트의 폰트 사이...
6년 전
아리보리
댓글 0
|
조회 343
star
0
[CSS] 선택자(Selector)
셀렉터 정리 1. 전체 셀렉터 * { } 문서 내의 모든 요소를 선택 2. 태그 셀렉터 p { } span, div { } 태그명으로 요소를 선택 3. ID 셀렉터 #hello { } id가 일치하는 요소를 선택 4. CLASS 셀렉터 .hello { } class가 일치하는 요소를 모두 선택 5. ATTRIBUTE 셀...
6년 전
아리보리
댓글 0
|
조회 499
star
0
[CSS] 문법(Syntax)
1. 셀렉터 (SELECTOR, 선택자) 스타일을 먹일 HTML 요소들을 선택하기 위해 CSS에서 제공하는 방법. 제목을 빨간색으로 바꾸려면 먼저 제목을 선택해야된다. p { color: red; } 여기서 p를 selector라고 한다. 2. 프로퍼티 (PROPERTY, 속성) p { color: red; } 여기서 color...
6년 전
아리보리
댓글 0
|
조회 239
1
뒤로가기
홈
맨 아래로