본문 바로가기

HTML & CSS12

[CSS] Box Sizing 📌 참고 사이트 box-sizing - CSS: Cascading Style Sheets | MDN (mozilla.org) box-sizing - CSS: Cascading Style Sheets | MDN box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다. developer.mozilla.org 📋 box-sizing 속성 요소의 너비와 높이를 계산하는 방법을 지정한다. 📍 content-box ➡️ 기본값으로, 지정한 너비와 높이는 요소의 content box 크기에만 적용된다. 즉, 요소에 테두리나 안쪽 여백이 있으면 기존 너비와 높이에 확장하여 화면에 그린다. 즉, 요소의 크기는 너비 == content 너비, 높이 == content 높이 라고 볼 수 있다. e.. 2023. 8. 7.
[CSS] Box Model 📌 참고 사이트 CSS 기본 박스 모델 입문 - CSS: Cascading Style Sheets | MDN (mozilla.org) CSS 기본 박스 모델 입문 - CSS: Cascading Style Sheets | MDN 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 developer.mozilla.org 📋 CSS 기본 박스 모델 ➡️ 문서의 레이아웃 계산 시 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. ➡️ CSS로 박스의 크기, 위치, 속성(색깔, 배경, 테두리 모양 등) 등을 결정할 수.. 2023. 8. 7.
CSS 기초 CSS(Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS는 HTML처럼 마크업 언어가 아닌 Style sheet 언어입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. HTML 문서에 CSS를 적용하기 위해서는 HTML 파일의 태그 사이에 다음과 같은 코드를 붙여 넣어야 합니다. styles 폴더 하부에 style.css 파일을 생성하였다고 가정하고 진행해 봅시다. - rel: relation의 약자로 위의 경우 HTML에 stylesheet으로 연결됨을 의미합니다. - type: 해당 파일의 성격을 지정하는데 text/css는 text 형식의 css 파일을 의미합니다. 생략 가능한 코드이기도 합니다. 이제 예를 들어 HTML.. 2023. 1. 17.
HTML 기본 HTML(Hypertext Markup Language)은 웹페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. HTML은 컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게 하거나 특정한 방식으로 동작하도록 하는 일련의 요소(elements)로 이루어져 있습니다. tags로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다. ex) 어느 한 줄의 문장이 독립적인 구문이길 원한다면, 문단 태그(paragraph tags)로 둘러쌈으로 해서 그것이 하나의 문단임을 알 수 있습니다. My c.. 2023. 1. 17.