늘 겸손하게

Position 정의 CSS Position 속성은 요소의 positioning method type을 결정한다. 여기서 positioning method type은 요소가 화면에 어떤 위치에 배치될지 결정하는 방식을 말한다. 대표적인 CSS Position에는 static, absolute, fixed, relative 등이 있다. 설명을 위해 아래와 같은 html, css 로 예시를 들겠다. html 1 2 3 css .container { width: 300px; background-color: lightblue; } .container .box { border: 4px dashed red; background-color: orange ; } .container .box:nth-child(1) { ..

Margin & Padding Margin : 바깥 여백을 의미하며 요소와 다른 요소 사이 간격을 의미함. Padding : 내부 여백을 의미하며 요소의 테두리와 내부 컨텐츠 사이 간격을 의미 사용법 margin : 10px padding : 10px -> 상하좌우 모두 10px 만큼 여백을 주겠다는 것. margin : 10px 20px; padding : 10px 20px; -> 상하 10px, 좌우 20px margin : 10px 20px 30px; padding : 10px 20px 30px; -> 상 10px, 좌우 20px, 하 30px margin : 10px 20px 30px 40px; padding : 10px 20px 30px 40px; -> 상 10px, 좌 20px, 우 30px,..

10개 이상의 HTML 요소를 작성할때 복사 붙여넣기는 불편하다. 이를 Emmet 약어로 한방에 가능하다. Emmet을 설치하고 .heros*32 를 입력한 후 tab을 누르면 32개의 heros 클래스의 div 요소를 생성할 수 있다. Emmet을 적극적으로 활용하여 시간낭비를 막자.

Media Query Media query는 CSS3에서 소개된 기술로 @media 규칙을 적용해 특정 조건을 만족할 경우에만 CSS 속성이 적용되도록 할 수 있습니다. @media only screen and (max-width: 600px) { body { background-color: lightblue; } } 위 코드가 CSS에 포함되면 문서의 가로 길이가 600pixel 이하로 떨어질 경우 바탕색이 "lightblue"로 변경됩니다. Breakpoint 설정하기 Media query를 통해 breakpoint를 설정하여 화면 크기가 일정 기준 이상 또는 이하로 변경되었을 경우 디자인의 일부 혹은 전체가 다르게 배치되도록 할 수 있습니다. 항상 모바일 기준으로 먼저 디자인 데스크탑이나 다른 기기..