전체 글

🌱 staticposition 속성은 일반적인 글의 흐름에 따라 배치되는 요소를 흐름에서 벗어나 자유롭게 배치하고 싶을 때 사용합니다.'static'은 position 속성의 기본값으로 요소를 일반적인 흐름에 따라 배치합니다.각각의 요소들은 작성되는 순서대로 우리가 글을 읽는 방향인 왼쪽에서 오른쪽으로 / 위에서 아래로 배치됩니다.특정 요소 a에 여백을 설정하면 주변 요소들도 해당 값만큼 밀려납니다. 브라우저에서 위치를 정할 때의 기준은 다음과 같습니다. 각각의 속성값을 다르게 주고 싶을 때는 아래와 같이 쓰면 되고,example1 { top: 10px; right: 15px; bottom: 8px; left: 20px;}만약 네 가지 값이 모두 같다면 inset이라는 속성을 사용하여 ..

🌱 정의시맨틱(semantic): 의미의, 의미론적인시맨틱 태그는 해당 태그로 감싸진 코드의 '의미'를 나타냅니다.해당 코드가 어떻게 시각적으로 보여질까? 가 아닌, 해당 코드의 목적이나 역할을 알려줍니다.- MDN Web Docs시맨틱 태그는 태그와 기능은 동일합니다.그러나 id나 class 속성이 없는 태그로 감싸진 코드는 어떤 역할을 하는지 알 수 없는 반면, 시맨틱 태그로 감싸진 코드는 웹 페이지에서 어떤 목적을 가지고 쓰였는지 알 수 있습니다.즉, 태그에 의미를 부여함으로써 웹 사이트의 구조를 쉽게 파악할 수 있게 도와주며시맨틱 태그를 사용하기 전보다 더 명시적이고 직관적인 구조로 설계할 수 있게 되었습니다. 🌱 종류태그 이름용도사이트의 위쪽에서 로고나 사이트 제목, 메뉴 등을 담고 있는..

🌱 정의경우에 따라 상하 마진은 가장 큰 크기의 여백값을 가진 단일 여백으로 결합(상쇄)되는 것을 의미합니다.단, float 요소와 절대 위치를 지정한 요소의 여백은 절대 상쇄되지 않습니다.- MDN Web Docs여기서 잊지 말아야 할 점은 상하(위아래) 마진이 겹칠 때만 상쇄가 일어나고,좌우(오른쪽/왼쪽) 마진은 겹치더라도 상쇄되지 않고 지정된 마진값 그대로 적용된다는 점입니다. 🌱 이웃한 태그의 마진 상쇄예를 들어, 아래와 같은 코드가 있다면#a { margin: 60px;}#b { margin: 40px;}-----------------------aba 태그의 마진값 > b 태그의 마진값이기 때문에 a 태그의 마진값이 적용됩니다.따라서 a, b 사이의 마진값은 60px이 됩니다.겹치지 않은..

🌱 정의html에 존재하는 모든 요소는 박스 형태로 구성되며 이것을 박스 모델이라고 부릅니다. 박스 모델 형태로 구성된 html 요소는 안쪽부터내용(content)-패딩(padding)-테두리(border)-마진(margin) 영역으로 구분됩니다.- 내용(content): 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분- 패딩(padding): 내용과 테두리 사이의 간격, 영역 안쪽 여백- 테두리(border): 내용 + 패딩을 감싸는 테두리(선)- 마진(margin): 테두리와 이웃하는 요소 사이의 간격, 영역 바깥쪽 여백🌱 box-sizing 속성기본적으로 요소의 크기를 지정하면 해당 크기는 내용(content) 영역의 크기가 됩니다.box-sizing: content-box; 따라서 아래의..