# box-sizing

43개의 포스트
post-thumbnail

HTML+CSS - 기초 (반응형 width & box-sizing)

공중에 떠있는 애들이 많을 때 z-index 숫자가 높을수록 앞으로 온다width : -% 의 문제는 pc사이즈에서 끝없이 커진다max-width를 주면 최대 폭을 결정해준다⭐⭐⭐ width 는 content 영역의 너비를 의미박스에 width: 600px를 줘도 pa

2023년 3월 15일
·
0개의 댓글
·
post-thumbnail

[코코아클론] chat창_message input 만들기

position: absolute -> 부모(조상) 요쇼를 기준으로 배치position: relative -> 요소 자기 자신을 기준으로 배치참고부모요소>자식요소 특정 부모 요소를 지정해, 그 부모의 첫번째 자식요소만 지정참고box-sizing: border-box테두

2023년 3월 10일
·
0개의 댓글
·
post-thumbnail

[CSS] box-sizing에 대해 알아보자.

강의를 듣던 중 box-sizing에 대해 정확한 이해를 하고싶어져 내가 정리해 보기로 하였다.정확하게 이해하고 정리하여 글을 쓰기위해 연습용 예제를 만들었다.부모인 Parent-container div안에 position을 absolute를 준 Child-contai

2023년 3월 3일
·
0개의 댓글
·
post-thumbnail

box-sizing border-box 적용 안됨 해결방법

css에서 body에 box-sizing: border-box 를 적용시켜보면,이렇게 흐릿하게 box-sizing 속성이 뜨는 것을 알수 있다.이건 적용이 덜 되어서 뜨는 표시이다.이런 문제를 해결하려면 알아야하는 특성이 있다.일단 box-sizing: border-b

2023년 2월 18일
·
0개의 댓글
·

SVG 사용법

svg 파일 포맷은 웹 사이트에 2D 그래픽, 차트, 일러스트레이션을 표현하는 데 널리 사용되는 툴로, 특히 아이콘 및 로고 등에 많이 사용한다.벡터 파일이므로 확대하거나 축소해도 해상도가 저하되지 않는다.기본 SVG 파일은 많은 컬러 픽셀로 생성되는 래스터 이미지보다

2023년 1월 26일
·
0개의 댓글
·

[CSS] 박스 모델(2) 2-7

border 속성을 사용하면 요소에 테두리를 줄 수 있다. 선의 굵기와 스타일, 그리고 색을 다양한 값으로 줄 수 있다.ex) border: 2px solid black / 0.5em dashed 너비와 높이 값에 padding과 border 값을 포함시킬지 결정한다.

2023년 1월 25일
·
0개의 댓글
·
post-thumbnail

CSS 리마인드 -Box Sizing, Position-

Box Sizing과 Position

2023년 1월 3일
·
0개의 댓글
·
post-thumbnail

[CSS] CSS 개요(box-sizing, inline vs block)

1\. 인라인 방식 <div style="background-color: red;">DIV입니다.</div>속성을 적용할 HJTML 태그에 직접 CSS를 입력해주는 방식(실무에서는 거의 사용X)2\. <style>태그 이용해 html 파일 내 작성반드시

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

Front-end 국비지원 #013일

블록요소의 종류dt, dd, ul, li, ol, dl, div, p, h1, h2, h3, h4, h5, h6인라인요소의 종류a, img, span, srong, input, textarea, select\*인라인은 width , height , padding-top

2022년 11월 1일
·
0개의 댓글
·
post-thumbnail

Day6 (CSS와 이벤트 버블링)

CSS margin : 외부 여백 상하는 입력한 것보다 작게 보일 수 있음 margin: 10px auto 이런식으로는 박스형태일때만 가능함, 주로 반응형 웹을 만들때 사용된다 block tag 많이 사용하는 방법 상하 여백을 지정하고 화면 중앙에 box를 배치하는

2022년 10월 18일
·
0개의 댓글
·

[CSS] box sizing _박스 크기 설정

box-sizing : CSS의 테두리 영역의 크기를 결정하는 프로퍼티.box-sizing 속성값에는 content-box와 border-box가 있다. content-box : 지정한 CSS width 및 height를 컨텐츠 영역에만 적용한다. border, pa

2022년 10월 10일
·
0개의 댓글
·
post-thumbnail

[ CSS ] Box-sizing

✅ Box-sizing 이전에 공부했던 box model에 의하면 요소의 전체너비는 width를 포함한 양쪽 여백(margin, padding), border가 모두 더해진 값으로 계산된다 아래 예시는 width는 같지만, padding값의 유무로 크기가 다르게 보인다 디자인을 할때는 대략적인 크기만 작성했는데 실제 코딩으로 옮기게 되면 굉장히 귀찮아진...

2022년 10월 8일
·
0개의 댓글
·
post-thumbnail

css 크기 계산, 넘침 제어 | box-sizing, overflow

요소의 크기 계산 기준을 지정요소의 내용(content)으로 크기 계산box-sizing의 기본값요소의 내용 + padding + border 로 크기 계산그림 출처 : 강영웅 강사님 인터넷 강의요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성vis

2022년 9월 19일
·
0개의 댓글
·

[CSS] Navigation, box-sizing: border-box

nav>ul>li\*4>anav안에 ul 안에 li x4개 는 각각 a를 가진다.

2022년 9월 5일
·
0개의 댓글
·

Box Model

: 줄바꿈이 일어나는 박스<div> <h1> <p> : 줄바꿈이 일어나지 않고, 사이즈를 지정할 수 없는 박스<span>예를 들어, <span> 요소에 width="100px"; height="100px" 스타일을 지정해도, 사이즈는 변하지

2022년 8월 26일
·
0개의 댓글
·
post-thumbnail

CSS 속성 (1)

HTML 속성 (Attributes) CSS 속성 (Properties) JS 속성 (Properties) 박스 모델: HTML요소의 기본적인 모양을 만들어내는 여러가지 속성들 (가로너비, 세로너비, 여백 등등) 글꼴, 문자: 폰트(서체) 배경, 배치(특정 요소를

2022년 7월 25일
·
0개의 댓글
·
post-thumbnail

[내보정CSS] 모르면 곤란한 box-sizing

😲 모르면 큰 코 다치는 box-sizing

2022년 7월 14일
·
0개의 댓글
·
post-thumbnail

box-model / box-sizing

문서상의 요소들을 시각적인 목적을 위해서, 모든 요소를 하나의 "직사각형 박스"로 여기는 모델이다. 모든 박스는 아래 영역들을 갖는다.컨텐츠 영역(Content Area) : 글이나 이미지, 비디오 등 요소의 실제 내용을 포함한다.안쪽여백 영역(Padding Area)

2022년 7월 4일
·
0개의 댓글
·
post-thumbnail

css 포지셔닝 & 주요속성

브라우저 화면 안에 각 컨텐츠 영역을 float 속성과 position 속성을 이용하여 어떻게 배치할지 결정하는 것을 말함박스 모델의 margin은 width 속성에 포함되지 않음box-sizing: content-box | border-box | initial | i

2022년 6월 29일
·
0개의 댓글
·