오늘도 삽질중

기본 스타일링을 제거하는 CSS 코드의 예시 태그는 기본 스타일에 약간의 여백이 있다. width, heigth 계산이 여백을 포함하지 않아 계산에 어려움이 있다. 브라우저(크롬,사파리)마다 기본 스타일이 조금씩 다르다. 이 모든 문제들을 아래의 코드를 적용시키면 기본 스타일링을 제거하여 디자인한 대로 레이아웃 구현 가능 * { box-sizing: border-box; } body { margin: 0; padding: 0; } flexbox로 레이아웃 잡기 flexbox로 레이아웃을 잡는다 = 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는다. 🤜 display : flex - 부모박스 요소에 display : flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법 기본값으로, dis..

html ... css #label.center{...} // id가 label이며서 동시에 class가 center인 엘리먼트를 선택한다. 셀렉터 h1 {} div {} 전체 셀렉터 * {} Tag 셀렉터 section, h1 {} ( 쉼표(,) 는 section 과 h1을 다중으로 선택한다) ID 셀렉터 #only {} class 셀렉터 .widget {} .center {} 후손 셀렉터 header h1 {} 자식 셀렉터( 후손 셀렉터와의 차이를 반드시 기억하자) header > p {} 인접 형제 셀렉터 section + p {} 형제 셀렉터 section ~p {} html ... css #label.center{...} // id가 label이며서 동시에 class가 center인 엘리먼트를 ..

CSS( = Cascading Style Sheet) 시맨틱 태그 background와 background-color 차이 em과 rem css 내용 분해하기(셀렉터와 선언블록 , css 파일 추가하는법) class와 id HTML안에 CSS를 정의하는것을 권장하지 않는 이유 -하나에 집중하기 위해 파일,구간을 구분하는 관심사 분리 측면에서 권장하지 않음. 시맨틱 태그 -이름에 의미를 붙여 부르는 태그. - class 와 id id class # . 한 문서에 하나의 요소에만 적용(유일하다) 여러개 가질 수 있음 특정 요소에 이름을 붙이는데 사용 스타일의 분류에 사용 개인정보 처리방침 이용 약관 법적 고지 .personal_information{ font-size: 30px; } .how_to_use{ ..

inline은 높이 너비를 가지지 않기 때문에 inline에 margin값은 위,아래가 없다. padding은 사방 가능, margin은 좌우가능 //html hello hello //css body{ margin:20 } span{ background-color: teal; padding: 20px; margin: 30px; }

커피 바나나 토마토 HTML HTML은 HyperText Markup Language의 약자로 웹페이지를 구성하는 마크업 언어이다. 글자 그대로, HTML은 프로그래밍 언어가 아니다. HTML은 웹 페이지를 구성하는 뼈대가 된다. HTML은 구조를 표현하는 언어이기 때문에 HTML의 구조를 잘 짜 놓으면, 자바스트립트로 개발을 할 때 더욱 직관적인 코드를 작성할 수 있다. -html은 태그들의 집합 -TAG: 부등호 ()로 묶인 HTML의 기본 구성 요소 -HTML확장자 사용 HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다. HTML이 Markup language라는 것을 이해할 수 있다. "구조를 표현하는 언어" 라는 의미를 자신의 언어..

margin padding border margin: box의 border(경계)의 바깥에 있는 공간 html{ background-color: darkblue; } body{ background-color: darkgrey; } div{ width: 30px; height: 30px; background-color: lightcoral; } coallpsingmargin padding: box의 경계로부터 '안쪽'에 있는공간

block Inline block에서 inline으로, inline에서 block으로 user agent stylesheet Block : 옆에 다른요소들이 올 수 없다.(대부분의 box는 block 이다) - box이다. (box는 margin, padding, border 을 갖는다.) - 넓이, 높이 가진다. 대표적인 예) div, header, p Inline: 옆에 다른 요소들이 올 수 있다.(In the same line) - box 아니다 -넓이(width)와 높이(height)를 가질 수 없다. => 목차 block에서 inline으로, inline에서 block으로 대표적인 예) span, a, image, code ... 예시 //block //inline hello hello hell..

css파일 넣는곳 selector cascading 🤞 css파일 넣는곳은? : html 🤞 css는 html태그를 가리킨다. 가리키는것을 selelctor이라고 한다. 여기서 blueTitle은 셀렉터 blueTitle { color: 25px; } 🤞 cascading