# box

gwooroh23

box 박스 html 엘리먼트 구분 -block element : 화면 전체를 사용하는 태그 ->한 개의 독립된 덩어리 = 하나의 큰 그룹 ->블록 레벨 요소는 다른 블록 레벨 요소와 인라인 레벨 요소를 포함할 수 있다. -inline level element : 화면 일부를 차지하는 태그 ->"행 안의 일부"라는 의미로,"텍스트와 동격의 요소"이기 때문에 "텍스트 레벨요소"라 부르기도 한다. ->블록 레벨 요소는 포함할 수 없으며, 인라인 레벨 요소는 반드시 블록 레벨 요소 안에 포함되어 있어야 한다. 박스의 기본 크기를 결정하는 특성 -가로축:부모를 가득 채운다 -세로축:자신이 포함하고 있는 내용만큼 설정이 된다. 내용이 없으면 높이가 형성되지 않는다. 박스의 크기를 구성하는 속성의 종류 padding 속성 값의 지정 형식 -4개 : 공백으로 구분하여 4개의 값을 지정할 경우 첫번째 값이 상단여백, 그 후 우측, 하단, 왼쪽 순서로 시계방향

bori_note

✨border ** 1. border-width ** 테두리의 굵기를 지정하는 속성 픽셀(px), 백분율(%), 또는 사전 정의된 값(thin, medium, thick)을 사용하여 지정할 수 있다. ** 2. border-style ** 테두리의 스타일을 지정하는 속성 none: 테두리 없음 hidden: 테두리 숨김 dotted: 점선 테두리 dashed: 대시 테두리 solid: 실선 테두리 double: 이중 테두리 groove: 입체적인 그루브 형태 테두리 ridge: 입체적인 리지 형태 테두리 inset: 안으로 들어간 테두리 outset: 바깥으로 튀어나온 테두리 ** 3. border-color ** 테두리의 색상을 지정하는 속성 색상 이름, HEX 코드

geoni4

1. semantic tag? > 기본적으로 div태그와 비슷하지만 태그 이름을 통해 어떤 용도로 쓰일 지 의미를 유추하기 쉽게 만든 태그 > - e.g.) header, footer, section 등 2. 상대적 단위와 절대단위에 대하여 설명하시오. > 1. 상대적 단위: 절대적인 기준을 통해 만들어진 것이 아닌 대상의 크기에 따라 기준이 달라지며 그것에 비교해 만들어진 단위 > - e.g.) px(픽셀, 해상도와 디스플레이의 크기에 비례해 만들어진 단위), vh(view height), %, rem, em 등 > > 2. 절대적 단위: 절대적인 기준을 통해 만들어진 단위 > - e.g.) 길이 단위인 mm, m 등 3. display 속성 5가지에 대하여 예를 들어 설명 하시오. > | - | block | inline | inline-block | none | flex | grid | > | :-

heavenlyview

이번엔 저번 포스트에서 만들어 놨던거에서 아래에 박스를 한 번 만들어 보았다. 📌 사이트 레이아웃 디자인 만들때는 만들고 싶은 레이아웃 디자인을 네모박스로 쪼갠다. `` 태그 써서 구현한다. 📝 네모박스 만들기 태그를 만들고 그 안에 태그 만들기 `` 태그 안에 'box' 클래스를 만든다. css 파일에서 `.box` 를 만들고 아래와 같이 수정한다. 그 외 네모박스 넣고 싶으면? `` 네모박스 디자인 CSS 속성 margin: 바깥 여백 p

hajeongjj

1. Box의 역할은? > Box는 dict를 object처럼 사용할 수 있게 해주는 라이브러리입니다. dict에서 key로만 접근하는 것이 아니라, attribute로도 접근할 수 있게 해줍니다. 이렇게 attribute로 접근하면, 해당 attribute가 없을 때 에러가 발생하는 대신 을 반환합니다. 또한, dict에 nested structure가 있을 때도 쉽게 접근하고 변경할 수 있습니다. Box는 dot notation을 사용하여 dict에 접근할 수 있도록 해주는데, 이를 통해 코드 가독성이 좋아지고, 코드 작성이 더 편리해집니다. 2. nested structure가 뭐야? > Nested structure는 내부적으로 다른 객체나 자료형을 가지고 있는 객체를 의미합니다. 즉, 중첩된 구조를 갖는 것을 말합니다. 예를 들어, 리스트 내부에 딕셔너리가 있는 경우, 이는 nested structure라고 할 수 있습니다. 또한, 클래스 안에 다른

sodamjeong

Box Model 모든 HTML 요소를 박스로 표현 박스에 대한 크기, 여백, 테두리 등의 스타일을 지정하는 디자인 개념 (CSS) BOX의 구성 Margin : 이 박스와 다른 요소 사이의 공백, 가장 바깥쪽 영역 Border : 콘텐츠와 패딩을 감싸는 테두리 영역 Padding : 콘텐츠 주위에 위치하는 공백 영역 Content : 콘텐츠가 표시되는 영역 BOX구성의 방향 별 명칭 width : 폭 height : 높이 left : box 구성의 왼쪽 구역, 해당 영역이 커질 수록 오른쪽으로 이동하게 된다. right : box 구성의 오른쪽 구역, 해당 영역이 커질 수록 왼쪽으로 이동하게 된다. top : box 구성의 상단 구역, 해당 영역이 커질 수록 하단으로 이동하게 된다. bottom : box 구성의 하단 구역, 해당 영역이 커질 수록 상단으로 이동하게 된다. box-sizing conten

csj20222

CSS Casacading Style Sheets HTML 태그에 옷(=디자인)을 입혀주는 기법 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄여준다. 1. HTML문서에 CSS적용하는 방법 CSS는 HTML문서 내의 어느 위치에나 올 수 있지만, 일반적으로 head 태그 안에 위치한다. 2. HTML문서에 CSS를 적용하는 방법 CSS코드를 별도의 외부 소스파일에 작성해 두고 HTML에서 해당 파일을 참조하는 방법 이 방법은 한번 작성한 코드를 여러 페이지에서 재사용 할 수 있다는 장점이 있지만, CSS에 문제가 생길 경우 해당 파일을 참조하는 모든 웹페이지에 문제가 번질 수 있다는 위험도 있다. 3. HTML 태그에 style 속성을 사용하는 방법 이 방법은 세밀한 조정이 가능하다. 전체적으로 소스코드 양이 지나치게 많아지고, 유지보수가 쉽지 않다. 4. CSS코드를 작성하는 기본 형식 -

whtpdus97

📝Today I learned 🚀 TIL 목차 🚀 > 1) plotly란? > 2) plotly 예제 따라하기 라이브러리 로드 일별 수익률 선그래프 일별 수익률 막대그래프 facet_col를 이용해 서브플롯 그리기 hover 표현하기 range slider 표현하기 > 3) 금융 데이터에 적용하기 좋은 그래프 Candlestick OHLC(Open-High-Low-Close) > 4) 디즈니 데이터로 실습하기 데이터 불러오기 전일비 선그래프 히스토그램(marginal box) > 5) 여러 종목 데이터로 실습하기 areaplot scatterplot scatterplot matrix box violin strip 4분위수 plotly를 활용한 일별 주가 시각화 1) plotly란? 🔹 plotly 파이썬의 대표적인 인터렉티브 시각화 도구

deong_gu

29일에 리액트에서 CSS를 다루는 법과 CSS에 대한 기초 내용을 타입스크립트와 결합하여 공부했고, 테일윈드 CSS 프레임워크를 사용해봄 (프로젝트에서는 styled-component를 사용했었다.) Sass/SCSS 브라우저 호환성, 벤더 접두사 등의 어려움을 극복하기 위해 탄생 프로그래밍 기능, autoprefixer 플러그인 PostCSS 모듈화된 CSS 다양한 플러그인 웹펙이 1차로 만든 CSS를 가공하여 최종 CSS를 생성해 내는 방법으로 동작 => 테일윈드 CSS 테일윈드 CSS 설치 및 세팅 (postcss.config.js , tailwind.config.js) 테일윈드 CSS 클래스 색상 클래스 (유채색, 무채색) 텍스트 클래스 (글자크기, 글자굵기, 기울임꼴, 줄바꿈 문자, 텍스트 정렬, 텍스트 표시 줄 수)

xlntsmmr

Box 겹치는게 허용되는 FrameLayout 성격을 갖고 있음 리스트 일반적인 Column으로 구현 아이템 수가 딱 정해져 있고 미리 띄우는게 이득일때 사용하기 LazyColumn으로 구현 많은 수의 항목이나 길이를 알 수 없는 목록을 표시해야 하는 경우 Column과 같은 레이아웃을 사용하게 되면 모두 표시하게 되고 이때 성능문제가 일어날 수 있기에 LazyColumn을 사용하는게 좋다. 틀린 부분 지적은 언제나 환영해요🤗

sk1440sk

Flutter Box 오늘 새롭게 알게된 내용 박스의 폭을 % 로 설정하려면 Flexible()로 감싸주어야한다. Row()안에서 박스하나만 꽉 채우고싶을때는 Expanded 를 사용한다. => 박스폭을 % 로 주고싶으면 Flexible / 박스 하나를 넓게 채우려면 Expanded 박스를 디자인 했는데 디자인 의도와 결과가 다를때 Dev Tools 를 켜보면 된다.

owodgpdud

CSS 외부 스타일 시트 @media query reset css(css파일로 추가하여 사용) 에릭마이어 reset css nomalize.css !!!모달 공부하기 css 특징 공백 병합 벤더프리픽스 크로스브라우징 할 때 몇 버전까지 호환을 해줄 것이냐 회의 후 적용 CSS 셀렉터 범용 선택자 *{ } 타입 선택자 h1,h2{ } class 선택자(한 페이지에 여러개가 존재할 수있다, 하나의 태그에 여러개 적용시킬 수있다.) .클래스이름{ } id 선택자 (문서 내에 유일해야 한다. 하나의 태그에서만 사용 가능) #아이디 이름{ } emmet 자동생성코드 자손 형제 직계자식 명시도 원칙 (우선순위 원칙) 가중치 ( 어떤 선택자가 더 구체적인가를 판단하여 가중치 적용) id> class> 타입 (id=100, class=10, 타입=1로 계산) -> 가중치 점수표에 따라 클래

eunji0828

박스모델 대부분의 HTML 요소들의 기본적인 틀 컨텐츠 패딩 : 컨텐츠와 보더의 간 보더 : 컨텐츠와 패딩을 감싸는 테두리 마진 : 테두리와 이웃하는 요소 사이의 간격 --> 보더를 기준으로 요소의 마진과 패딩은 움직인다. --> 특별한 상황이 아니라면 마진과 패딩을 밸런스있게 구성하는 것이 디자인의 통일성을 강조할 수 있다. --> 박스모델 예시 넓이와 높이 : 기본적으로 넓이와 높이 설정은 마진, 패딩 크기는 포함하지 않는다. overflow 컨텐츠 혹은 자식 요소가 해당 요소의 영역을 벗어날 때 처리하는 방법을 정하는 속성 hidden, scroll, auto가 있다. scroll, auto의 차이 알아두기 --> 박스모델 + overflow 예시

akatapata

Container 내부의 Content !codepen[ksks2211/embed/eYGwYYQ?default-tab=html%2Cresult] 중앙정렬 1. content 수평 중앙 정렬 2. content 수직 중앙 정렬 ( 부모 요소 위아래 에 내부여백 추가하는 방법 ) 3. content 수직 + 수평 중앙 정렬 ( position + transform 속성 이용하는 방법) 4. content 수직 + 수평정렬 ( flex ) 5. content 수직 + 수평정렬 (position 과 top left right bottom 그리고 margin auto) 6. content 수직 + 수평정렬 ( grid )

wltn39

1. 구현화면 화면 캡처 2022-01-25 110533 2. HTML 코드 div 위에 하나의 구역을 만들고 텍스트를 넣기 위해 안쪽 div를 만듦 3. CSS 코드 1) 개념정리 flex :유동적인 레이아웃 (margin, wrap 등등 조합) flexbox : 구획들 배치할 때 좀 더 구분시켜주기? absolute : 부모(body 태그) 기준으로 화면 조정할 수 있게 해줌 relative : absolute의 부모를 바꿔주는 역할 Pseudo Selector(의사 선택자) e.f) nth-child(2) > nth-child(2) : 2번째 자식태그 -> 2번째 자식태그 2) 코드에 적용 -

oper2300

태그들은 Box와 Item이 돼는 태그들로 나뉠수 있다 웹사이트의 구조는 여러가지 형태로 볼수 있다 기본적으로 이 웹사이트 구조의 형태로 예를 들어보자 main영역도 디자인에 따라서 여러가지 section들로 나뉠 수 있다 article section안에서도 article태그를 이용할수 있다 article tag : 여러가지 item들을 그룹화해서 재사용 가능한 여러가지 tag나 item들이 모아져 있는 구간을 말한다 BOX BOX는 아래 tag들처럼 section이 나뉘어지는 태그들을 확인 할 수 있다 ![](https://images.

dmki7575

3일차 접어들면서 시간을 굉장히 투자하는데 왜 이해가 안가지? 하면서 대체 왜!외치던 와중에 고마운 녀석이 등장하는데....(후략) CSS는 쉽게 말하자면 벽면에 페인트 칠하는 것과 같은 작업인데 페인트를 쥐고 자꾸 엉뚱한 곳을 칠해버리니 문제가 자꾸 발생했다 심지어 나는 분명 칠했는데?어?투명해요.....투명색이 있었던가?? 이쯤되면 진지하게 고민을 하지 않을 수 없었다..... padding,border,margin 값을 제대로 부여해야지 뭘 예쁘게 꾸미던 할텐데 그러다 . . . 이 이미지를 보았다. ![](https://images.velog.io/images/dmki7575/post/07c9055e-f57

gga4638

Flexbox 반응형 웹 페이지를 구축하고 객체를 쉽게 구성하는 것을 목표로 2009년 새로운 레이아웃 시스템으로 소개되었다. 2014년 이후 대부분의 브라우저에서 지원하게 되었다. 현재는 웹 페이지의 주요 레이아웃 시스템으로 사용되고 있다. 브라우저 IE 9 이하 버전에서는 플렉스를 지원하지 않는다. 개발툴에서 보이는 flex 속성 Fle

yoon-dh

HTML의 태그는 크게 두가지 유형으로 분류할 수 있다. 첫번째는 우리한테 직접 보이지는 않지만 여러 태그를 담을 수 있는 BOX 두번째는 우리에게 직접 보이는 ITEM ex) BOX - header, footer, nav, aside, main, section, article, div, span, form 등 ITEM - a, button, input, label, img, video, audio, map, canvas, table 등 (Block vs Inline) Block 레벨의 element는 한줄에 하나만 들어갈 수 있다. Inline 레벨의 elemetn는 공간이 허용된다면 바로 옆에 배치가 가능. Block - div Inline - b, span (ol vs ul) ol = order list - 내부의 리스트들을 순서를 만들어줌 ul = unorder list - 따로

inusneo

210702 오늘은 아주 중요한 Box Modeling에 대해 학습했다. Today's tips Adobe Xd에서 Shift를 누르고 화살표로 개체를 10씩 이동할 수 있다. Must Remember 전체선택자(*)를 Asterisk(애스터리스크,아스테리스크)라고 한다. 실무에서는 Asterisk를 잘 사용하지 않는다. (문서에 들어가는 엘리먼트만 모아서 적용) margin-top은 천장에 붙으면 적용 X margin-top과 bottom값은 맞물리면 더 큰 마진 값으로 상쇄. (margin 상쇄는 인접한 두 박스가 온전한 block-level 요소일 경우에만 적용) box 내용물의 너비, 높이 값을 계산할 때 전체 크기에서 border, padding, margin 값을 모두 더해서 남은 값을 나누는 식으로 계산한다. margin 상쇄 예외 > * box가 position: absolute 된 상태 box가 float: