CSS

앞에서 정리한 margin의 순서는 고정값이므로 순서를 꼭 지켜야 한다.(순서 시계방향!!) 하지만 border 순서는 중요하지 않다. 그럼에도 불구하고 약속된 coding convention(코딩 규칙)에 따라 순서를 맞춰주는 것이 좋다.border: 선 두께 선 종

Margin 과 Padding 주황색은 margin 영역. 위, 오른쪽, 아래, 왼쪽에 모두 20px 노란색은 border 영역. 보더의 두께는 5px, 색상 빨강 초록색은 padding 영역. 위, 오른쪽, 아래, 왼쪽에 모두 50px 요소의 가로는 273px, 세

box-sizing : CSS의 테두리 영역의 크기를 결정하는 프로퍼티.box-sizing 속성값에는 content-box와 border-box가 있다. content-box : 지정한 CSS width 및 height를 컨텐츠 영역에만 적용한다. border, pa

이미지를 넣는 2가지 방법 1.HTML 에서 img 태그를 사용한다. 2.CSS 에서 background-image 속성을 사용한다. [HTML] img 태그를 사용하는 경우 프린트가 필요한 경우 : 백그라운드 이미지는 출력시 포함되지 않는다. 이미지에 문구가

대부분의 HTML element(이하 요소)는 block 요소와 inline 요소로 나눌 수 있다.아래의 태그들은 block요소에 해당한다.<header>, <footer>, <p>, <li>, <table>, <div>, <h1>

CSS selector를 표기하는 방법중에 해당 태그의 첫 번째 순서인지, 마지막 순서인인지,홀수/짝수 인지 등을 알 수 있는 다양한 selector 표기법이 있다. ⭐️ 다시 짚고 넘어가자ㅡ selector는 tag, .class, \`:nth-child(N) = 부

float 속성은 정렬을 위해 사용하는 속성이다.일반적인 정렬과는 다르게 float 정렬된 것 주위로 다른 컨텐츠가 흐르듯이 배치가 된다.즉 공간은 차지하지만 다른 element들의 배치에 영향을 안주는 element가 되는 것이다.float 의 사전적 의미는 '뜨다'

static : 기본값이다. position 프로퍼티를 지정하지 않았을 때와 같다.기본적으로 이 값을 지정할 일은 없지만 이미 설정된 position을 무력화하기 위해 사용될 수 있다.relative : 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동

우선 Flex는 2개의 개념으로 나눈다.첫 번째는 Container 두 번째는 Items 이다. 아래 코드와 함께 살펴보자!Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수이다.주의할 부분은 Container