# width

40개의 포스트

HTML_CSS_025_viewport

css height의 비율은 inherit이 아니므로 포함하는 태그 모두를 적용시켜야 한다.

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

SVG

SVG 애증의 SVG.. 알고 씁시다!😂

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

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

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

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

[CSS]width 100%와 auto의 차이

부모 너비의 전체를 사용하며 마진, 패딩, 보더 영역을 다 포함한 값입니다.포함하지 않고 해결방법은 box-sizing: border-box; 로 해주면 됩니다.태그의 요소 성질(block,inline-block,inline)에 맞춰 자동설정이 됩니다.마진, 패딩, 보

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

[CSS]width 속성과 너비 결정 매커니즘

px와 같은 절대 단위를 사용하여 width 속성값을 지정해주면 해당 엘리먼트는 항상 고정된 너비를 갖게 된다. 엘리먼트의 너비가 가용 너비에 비례해서 작용% : 부모 엘리먼트로 부터 주어진 가용 너비에서 margin 크기를 포함한 너비를 width 속성값으로 사용au

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

Front-end 국비지원 #060일

JQuery Progress Bar 01 >결과 >HTML >CSS >script >변수는 감싸고 있는 .progress-bar 와 안에 .bar , .num 이 있고 .num의 안에 data-num이 있는데 progressData 로 만들었다. progressBar 의 애니메이션은 progressData 의 width + '%' 의 값으로 만...

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

[HTML] 5. 이미지 넣기 <img>

src = 이미지 태그에 이미지 경로를 입력시켜 출력해줌width = 가로길이 픽셀, 100%로 지정하면 비율 맞춰줌height = 세로길이 픽셀

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

width요소(outerWidth & innerWidth & width)

※여러줄 주석 처리주석 구역 드래그 후, Alt + Shift + A요소의 순수 너비 + padding + border= 300px + 100px + 20px = 420pxouterWidth + margin= 420px + 100px = 520px요소의 순수 너비 +

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

on&event&detail&wheelDelta&원시타입과참조타입&3항연산자&switch

출처 : https&#x3A;//m.blog.naver.com/naan_ace/220847459928아래로 스크롤 : +3위로 스크롤 : -3아래로 스크롤 : -120위로 스크롤 : +120아래 두 코드는 같은 식break : switch문 종료.befault : sw

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

width요소(outerWidth & innerWidth & width)

※여러줄 주석 처리주석 구역 드래그 후, Alt + Shift + A요소의 순수 너비 + padding + border= 300px + 100px + 20px = 420pxouterWidth + margin= 420px + 100px = 520px요소의 순수 너비 +

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

Front-end 국비지원 #034일

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다. 정규표현식은 하나의 언어라고 할 수 있다. \*정규식 공부하기 좋은 예제 : https&#x3A;//regexr

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

소록소록 Day 3_flex / space-between / calc 활용하기

flex의 space-between아래버튼

2022년 11월 22일
·
0개의 댓글
·

width요소(outerWidth & innerWidth & width)

※여러줄 주석 처리주석 구역 드래그 후, Alt + Shift + A요소의 순수 너비 + padding + border= 300px + 100px + 20px = 420pxouterWidth + margin= 420px + 100px = 520px요소의 순수 너비 +

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

220823 JavaScript

※여러줄 주석 처리 주석 구역 드래그 후, Alt + Shift + A innerheight outerWidth & width 이벤트객체 mouseWheel이벤트 파이어폭스에서는 작동하지 않음 원시타입과 참조타입 3항연산자 switch

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

생활코딩 - <Web> 10~11 : 코딩(coding) 실습하기, 일반인과 코딩을 배운 지식인의 차이점, HTML 의 중요성, 속성(Attribute) 이해하기, 인기 있는 태그 img (이미지 넣기)

생활코딩. web과 HTML 10 ~ 11 학습정리내용입니다. 10) html (html이 중요한 이유) 누구나 기초가 중요하다고 말한다. 하지만 기초가 중요하다는 말을 잘 들어보면 응용으로 가는 과정으로서 기초가 중요하다는 뜻인 경우도 많이 있다. 사실 기초는

2022년 7월 12일
·
0개의 댓글
·

5월26일 개발일지

오늘도 css와 관련된 수업을 들었다. html 을 기본으로스타일을 주어 꾸미는 작업을 하였다. 어려웠던 점으로 width나margin, padding을 주어 크기를 조절하는 작업이 어려웠고해결 방법으로 내가 연습하며 익숙해져야 겠다.오늘 강의도 유익한 내용을 배웠다.

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

[CSS] width(min-content, max-content, fit-content)

width를 적용하는방법은 여러가지가 있습니다.절대값을 적용하는 px상대값을 적용하는 %이 외의 속성으로는 다음과 같습니다.글보다는 그림으로 보시면 이해가 빠를것입니다.엘리먼트의 너비를 최소로 줄이고 싶을 때 사용합니다.최소 너비는 엘리먼트의 컨텐츠 크기로 결정됩니다.

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