[HTML/CSS] Margin 병합 현상

형제지간의 마진 병합 Hello World Hello World /* style.css 문서 */ .box1 { margin-bottom: 150px; } .box2 { margin-top: 100px; } margin-bottom과 margin-top 중 숫자가 큰 값으로 적용 부모자식의 마진 병합 (❗️주의) /* style.css 문서 */ article { width: 200px; height: 200px; margin-top: 100px; } 자식인 뿐만 아니라 부모인 에도 영향을 미침

• format_list_bulleted 카테고리 없음
• · 2023. 2. 27.
• textsms

[HTML/CSS] 박스 모델

박스 모델 구조 margin / border / padding / content margin과 padding 의 차이 margin-left border 바깥쪽에서 왼쪽에 여백을 만듦 padding-left border 안쪽에서 왼쪽에 여백을 만듦 공간이 여백을 포함한 크기로 변경되는 점 유의 margin과 padding 작성 방법 top right bottom left 순서로 한 줄에 작성 가능 (시계방향) padding도 동일

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[CSS] Cascading

CSS의 우선순위를 결정하는 세 가지 요소 순서 / 디테일 / 선택자 순서에 의한 Cascading // HTML 문서 Hello World // style.css 문서 p { color: red; } p { color: blue; } 나중에 적용한 속성값의 우선순위가 높음 ( p { color: blue; } ) 디테일에 의한 Cascading // HTML 문서 Hello World // style.css 문서 header p { color: red; } p { color: blue; } 더 구체적으로 작성된 선택자의 우선순위가 높음 ( header p { color: red; } ) 선택자에 의한 Cascading // HTML 문서 color // style.css 문서 #color { color..

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[CSS] 속성의 상속

부모 자식 관계 Header h1 Header p // style.css 문서 header { color: red; } h1 { color: blue; } p { color: green; } 부모 자식 관계 : 와 , 형제 관계 : 과 원하는 지역에만 CSS 속성 적용 Header h1 Header p Footer h1 Footer p // style.css 문서 header { color: red; } header h1 { color: blue; } header p { color: green; } 원하는 지역에만 css 속성을 적용하기 위해 부모를 구체적으로 표기한다.

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[CSS] CSS 선택자 - Type / Class / ID

선택자 HTML의 어떤 요소에 CSS를 적용할 것인가 Type (태그) / Class (태그 별명) / ID (태그 이름) Type 선택자 // Type Hello World 특정 태그에 스타일을 적용 Class 선택자 // Class Hello World 클래스 이름으로 특정 위치에 스타일을 적용 ID 선택자 // ID Hello World ID를 이용하여 스타일을 적용 클래스보다 선택자 우선순위가 높음

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[CSS] CSS란 / CSS 구성 요소 / CSS 연동방식

CSS란? Cascading Style Sheet 정보(HTML)와 디자인(CSS)의 분리 문서의 레이아웃과 스타일 정의 HTML로 작성된 정보를 꾸며주는 언어 CSS 구성 요소 선택자 { 속성 : 속성값; } h1 { font-size: 20px; font-family: sans-serif; color: blue; background-color: yellow; text-align: center; } 선택자 디자인을 적용할 HTML 영역 속성 어떤 디자인을 적용할지 정의 속성값 어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;) 필수 입력 CSS 연동 방법 세 가지 Inline Style Sheet coding 101 태그 안에 직접 원하는 스타일을 적용 Internal Style Sheet 태그 안에..

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms