상호작용과 표준모형

요약 CSS 선택자 우선순위 !important: 무조건 우선 인라인 스타일(inline styles): 1000점 ID 선택자(ID selectors): 100점 클래스 선택자(Class selectors), 속성 선택자(Attribute selectors), 가상 클래스 선택자(Pseudo-class selectors): 10점 요소 선택자(Element selectors): 1점 유니버셜 선택자(Universal selectors): 0점 점수를 합산하여 가장 높은 점수를 가진 스타일을 적용. 점수가 같을 때는 나중에 선언된 스타일이 이전에 선언된 스타일을 덮어씀. CSS(Cascading Style Sheets)에서는 여러 스타일 규칙을 적용하다 보면 한 요소에 중복된 여러 스타일을 적용하게 되는..

CSS 박스 모델은 웹페이지의 레이아웃을 정의하는 핵심적인 개념이다. HTML 요소들은 박스 형태로 이루어지며, 각 박스는 Content(콘텐츠), Padding(패딩), Border(테두리), Margin(마진)으로 구성된다. - Content(콘텐츠) 그림에서 파란색 박스. 박스의 내용을 담는 영역이다. 이 영역의 크기는 `width`와 `height` 속성으로 결정된다. 그림의 콘텐츠는 width와 height가 모두 0으로 설정되어 있다. - Padding(패딩) 그림의 초록색 박스. 콘텐츠와 테두리 사이의 여백 영역이다. `padding` 속성으로 지정되며, 내부 콘텐츠와 테두리 사이의 공간을 조절한다. - Border(테두리) 그림의 주황?색 박스. 박스의 테두리 영역이다. `border` 속..

2024.02.16 - [[WEB \ HTML CSS]] - CSS 미디어쿼리를 적용하는 두 가지 방법: 내부 스타일, 외부 스타일시트 얼마 전 미디어쿼리를 적용하는 방법에 대해 알아보았다. 그중에는 화면 크기에 따라서 다른 스타일을 설정하는 것도 있다. 그런데, 개발을 하면서 화면 크기에 따라 어떤 모양으로 표시되는지 어떻게 일일이 확인할 수 있을까? 직접 화면 크기를 조정하고 디바이스들을 구해서 볼 수는 없는 노릇이다. 이를 해결해줄 방법이 여러분도 잘 아는 개발자 도구에 있다. 우클릭 -> 검사(inspect) 또는 Ctrl + Shift + i를 눌러서 개발자 도구를 켜준다. 위 사진 좌측 상단에 파랗게 표시된 아이콘을 눌러준다. 혹은 Ctrl + Shift + M을 눌러준다. Toggle dev..

이번에는 웹사이트에서 버튼 태그에 이미지를 넣는 법을 알아보겠습니다. 1. 버튼 태그 안에 이미지 넣기 img 태그를 이용해 HTML 파일 안에서 바로 해결해 줄 수 있습니다.

미디어 쿼리는 웹 개발에서 사용되는 CSS 기술 중 하나로, 미디어 유형 및 특성에 따라 스타일을 다르게 적용하는 기능을 제공합니다. 이를 통해 화면 크기, 장치 유형, 해상도 등과 같은 다양한 조건에 따라 웹 페이지의 레이아웃과 스타일을 조절할 수 있습니다. 미디어 쿼리는 주로 반응형 웹 디자인에서 사용되며, 다양한 디바이스 및 화면 크기에 대응하여 최적의 사용자 경험을 제공하는 데에 활용됩니다. 1-1. HTML 파일 요소 내부에서 미디어 쿼리 사용 위의 코드에서는 요소 내부에 미디어 쿼리를 사용하여 화면 너비가 768px 이하일 때 .content 클래스를 가진 요소의 배경색을 변경하고 있다. 이렇게 함으로써 HTML 문서 내에서도 미디어 쿼리를 활용하여 반응형 스타일을 쉽게 적용할 수 있다. 외부..

웹페이지를 둘러보면 지도가 삽입된 곳들이 있다. API를 사용해야 하는 네이버 지도와 달리 구글맵, 카카오맵은 HTML만 붙여 넣으면 간단히 삽입할 수 있다. (네이버 지도 삽입하는 법은 아래 링크 글 참고하세요!) [API] 웹 페이지에 네이버 지도 띄우고 마커 찍기 [네이버 Maps API 사용하기] - 웹 페이지에 네이버 지도 띄우고 마커 찍기 1. Naver Maps Application 등록 NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 2. 웹 yermi.tistory..