상호작용과 표준모형

요약 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의 Flexbox 레이아웃은 웹개발에 있어서 요소들을 효율적으로 배치하고 정렬하는 강력한 도구입니다. 그중에서도 'align-items'와 'justify-content' 속성은 중요한 역할을 합니다. 이 두 가지 속성은 순서대로 각각 수직 방향과 수평 방향의 정렬을 다루게 됩니다. 그 차이점을 명확히 이해하고 사용해야 매력적인 레이아웃을 만들 수 있습니다. 1. justify-content 'justify-content' 속성은 수평 방향(가로)을 다룹니다. 이 속성은 Flex 컨테이너 내부의 아이템들을 수평 축을 따라 정렬하는 데 사용됩니다. 어떤 값들이 사용되는지 알아보겠습니다. 'flex-start': 아이템들을 수직 축의 시작점에 정렬 'flex-end': 아이템들을 수직 축의 끝점에 정렬..

2024.02.24 - [[WEB \ HTML CSS]] - CSS 박스 모델: 웹 레이아웃 기초 CSS 박스 모델이 무엇인지 궁금하다면 이 글을 참고하세요. 저번 글에서 CSS의 가장 핵심적인 내용인 박스 모델에 대해서 알아보았습니다. 이번에는 박스 모델 속성 값 중 특이한 경우를 살펴볼 건데요, 바로 속성 값이 마이너스인 경우입니다. 박스 모델을 구성하는 Content, Padding, Border, Margin의 속성 값이 마이너스 일 때 어떻게 되는지 살펴보겠습니다. 1. Margin과 Padding에서의 마이너스 값 마이너스 값을 사용하면 해당 요소의 경계를 벗어나게 된다. Margin의 경우에는 다른 요소와의 간격을 음수로 설정해 요소를 겹치게 만들 수 있다. Padding의 경우는 마이너스 ..

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 문서 내에서도 미디어 쿼리를 활용하여 반응형 스타일을 쉽게 적용할 수 있다. 외부..