본문 바로가기

Programming/HTML & CSS & JavaScript48

CSS 5일차 - FlexBox(2) 다) flex-grow 속성 - 화면을 크게할 때 item 의 동작방식을 제어. - flext-grow 의 기본값: 0 a. 기본동작 화면을 키우면 5번과 6번이 동시에 같은 비율로 커지거나 작아진다. 최대 350px 까지 커진다.  w/h=300px w=350px w=350px  b. 설정동작 5번에 ``flext-grow: 1`` 로 지정. 화면크기를  키우면 6번은 최대 350px 까지만 커지고 5번은 350px 넘어서 계속 커진다. 이유는 ``flex-grow: 0`` 인 요소들이 모두 너비를 차지하고 남은 너비를 ``flex-grow: 1`` 인 5번이 차지하게 되어 5번은 350px 보다 더 커질수 있다. b. 설정동작2 5번에 ``flext-.. 2024. 4. 26.
CSS 5일차 - 4일차 정리 ########################################## 15. 색상   1) 영단어 표기 ( 120 여개 됨 )     예> color:red|blue|aqua|...   2) 16진수 ( 0~15)          - #RRGGBB ( 6비트), #RGB ( 3비트 )     - #FFFFFF: 흰색       #000000: 검정           예> color: #FF6347;    3) 10진수 ( 0~255) + rgb(r,g,b)      - rgb(0~255,0~255,0~255)        rgb(0,0,0)        rgb(255,255,255)    예> color: rgb(15, 184, 226);    4) 투명도 + 10진수 ==> rgba(0~255,.. 2024. 4. 26.
CSS 4일차 - FlexBox(1) 21. FlexBox 1) 개요 전통적으로 레이아웃 처리할 때 사용했던 방식은 position 과 float 을 사용하는 방식임. FlexBox 문법을 적용하면 매우 쉽게 레이아웃 및 수직정렬, 요소순서(ordering), 동적 사이징 처리가 가능함. 2) 2가지 구성요소 - 반드시 부모/자식관계가 성립되어야 한다.( 자손은 적용안됨 ) - 중첩가능 - 1자원(행(기본)/열)으로 배치됨. ( 전형적인 normal flow 를 따르지 않음 ) - 부모는 display:flex 로 지정 ( 실행결과: - 모든 div item 들이 가로(행) 배치됨.                - 명시적으로 지정된 height 제외한 나머지는 가장 큰 height 값이 적용됨.    - 브라우저 화면을 줄이면 일정범위까지만 .. 2024. 4. 25.
CSS 4일차 - 색상, visibility, opacity, font, google font, text 15. 색상 1) 영단어 표기 ex) color:red | blue | aqua | ... 2) 16 진수 - #RRGGBB ( 6비트 ), #RGB ( 3비트 ) - #FFFFFF: 흰색   #000000: 검정 ex) color: #FF6347; 3) 10 진수 ( 0~255 ) + rgb( r, g, b ) - rgb( 0 ~ 255, 0 ~ 255, 0 ~ 255 )   rgb( 0, 0, 0 )   rgb( 255, 255, 255 ) ex) color: rgb( 15, 184, 226 ); 4) 투명도 + 10진수 ==> rgba( 0 ~ 255, 0 ~ 255, 0 ~ 255, 0 ~ 1 ) - alpha 값은 0이면 완전투명, 1이면 완전불투명 ex) color: rgba( 15, 184,.. 2024. 4. 25.

티스토리툴바