👩🏻‍💻

웹페이지에서 우클릭 후 검사를 클릭하면 개발자 도구가 열립니다. 개발자 도구 상단의 두번째 아이콘인 'Toggle device toolbar'를 클릭하면 위와 같이 모바일, pc 등 다양한 기기, 다양한 크기의 화면에서 웹페이지가 어떻게 보이는지 확인해볼 수 있습니다. 미디어 쿼리를 이용하면 위 예시와 같이 뷰포트(화면 상의 표시 영역)의 넓이가 500px 이상일 때, 이하일 때 등 특정 조건을 만족했을 때의 웹페이지의 디자인을 다르게 설정할 수 있습니다. 미디어 쿼리의 기본 형태 @media mediatype and (expressions) { CSS-Code; } mediatype은 웹 페이지가 보여지는 장치를 의미합니다. expressions의 조건들이 모두 참이면 css-code의 내용을 웹 페이..

caniuse라는 HTML, CSS, Javascript의 기술들을 웹브라우저들이 얼마나 채택하고 있는지에 대한 통계를 볼 수 있는 사이트에 따르면, CSS의 Grid Layout은 거의 모든 웹브라우저에 적용시킬 수 있고, 전 세계 95.27%의 사용자들이 이 기술을 적용한 사이트를 이용할 수 있다는 것을 알 수 있습니다. 이처럼 Grid Layout은 웹페이지에 레이아웃을 구현하기 위한 아주 유용한 기술입니다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web tech..

웹페이지에서 오른쪽 마우스를 클릭한 후 검사를 클릭하면 위와 같은 개발자 도구가 열립니다. 코드에서 원하는 부분을 선택하고 오른쪽 박스에 마우스를 가져다 대면 해당하는 부분이 같은 색깔로 웹페이지에 표시되고, 이를 통해 원하는 부분의 여백이 어떤 값의 영향을 받고 있는지 분석해볼 수 있습니다. margin, border, padding 따라서 margin, border, padding, 파란색 부분인 content를 조정하면 원하는 레이아웃을 만들 수 있습니다. 1. margin : border 바깥의 공간으로, 다른 태그와의 거리를 나타냄 2. border : 테두리 3. padding : content와 border 사이의 공간으로, 글자와 테두리 사이의 간격을 설정 블록 레벨 요소와 인라인 레벨 요..

1. 전체 선택자 HTML 문서 내의 모든 태그에 같은 속성을 적용합니다. * { color: red;} 2. 태그 선택자 지정된 태그명을 가지는 모든 요소에 같은 속성을 적용합니다. p { color: red; } 모든 p 태그를 가지는 요소를 선택합니다. 3. 클래스 선택자 주어진 class 속성값을 가지는 모든 요소에 같은 속성을 적용합니다. .class1 { color: red; } div.class1 { color: blue; } paragraph 와 같이 class 속성값이 class1인 요소를 선택합니다. paragraph와 같이 div 태그이며, class 속성값이 class1인 요소를 선택합니다. paragraph 는 선택되지 않습니다. 4. ID 선택자 주어진 id 속성값을 가지는 요소..