<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>status select</title>
<style>
div {margin-top: 15px;}
a{
margin:0;
padding:3px;
border:2px solid purple;
text-decoration:none;
background:purple;
color:white;
}
span > a:hover{background:white; color:purple;}
span > a.active {background:#ff00ff; color:white;}
div > a:link {background : white; color:purple;}
div > a:visited {background : white; color:green;}
</style>
</head>
<body>
<span><a href="learn/learn_0.html">button 1</a></span>
<span><a href="learn/learn_1.html">button 2</a></span>
<span><a href="#">button 3</a></span>
<span><a href="#">button 4</a></span>
<div>
<a href="#"> button 5</a>
<a> button 6 </a>
<a href="learn/learn_2.html">button7</a>
<a>button 8</a>
</div>
</body>
</html>1. **CSS Styling**:
- The document defines styles for `<a>` elements to look like buttons, applying a purple background, white text, and a purple border. These styles apply to all `<a>` elements within the document, providing a consistent look for all buttons.
- For buttons within `<span>` elements, a hover effect is specified that reverses the background and text colors, making the buttons white with purple text.
- An "active" class is defined for `<a>` elements but is not applied in the HTML. When used, this class changes the background to magenta (`#ff00ff`) and keeps the text color white, distinguishing it as the currently active or selected button.
- Additional styles are applied to `<a>` elements within a `<div>`, differentiating between unvisited (`:link`) and visited (`:visited`) states by changing the background to white and adjusting the text color to purple or green, respectively.
2. **HTML Structure**:
- Buttons are represented by `<a>` elements and are grouped into two sections: one using `<span>` elements and another within a `<div>`. This separation allows for different styling contexts as demonstrated by the CSS.
- The first set of buttons (`button 1` to `button 4`) is wrapped in `<span>` elements, which are inline and will be affected by the hover styles defined.
- The second set of buttons (`button 5` to `button 8`) is placed directly within a `<div>`, which allows for different styling based on the link's state (link, visited).
3. **Link States**:
- The CSS styles differentiate between various link states. The `:hover` state applies when the user hovers over a link, the `.active` class can be manually added to indicate an active or current selection, and the `:link` and `:visited` pseudo-classes apply based on the link's visited status in the browser history.
### Key Points:
- The document illustrates the flexibility of CSS in creating interactive and visually distinct states for link-based buttons, enhancing the user interface with simple visual cues.
- It demonstrates the use of pseudo-classes and class selectors to style elements differently based on user interaction and the element's state.
- The separation of buttons into inline (`<span>`) and block-level (`<div>`) contexts shows how CSS can be applied selectively based on the document structure.
### Possible Improvements:
- **Accessibility Enhancements**: Ensure that the buttons are accessible, providing adequate contrast, focus styles for keyboard navigation, and ARIA roles if necessary.
- **Responsive Design**: Adapt the button sizes, padding, and margins for different screen sizes or input methods, ensuring usability across devices.
- **Dynamic State Management**: Implement JavaScript or server-side logic to dynamically add the `.active` class to the currently active button based on user interaction or page state, enhancing the interactive feedback loop.
- **Further Styling**: Explore more complex styles or animations for button interactions, such as transitions for the hover effect or additional visual cues for different states, to create a more engaging user experience.
'개념 > HTML+CSS' 카테고리의 다른 글
| CSS) CSS Customization for HTML Lists (0) | 2025.02.20 |
|---|---|
| CSS) Stylish HTML Table with CSS (0) | 2025.02.19 |
| CSS) Semantic Web Page Layout with CSS Styling (0) | 2025.02.18 |
| HTML) HTML Media Tag Usage Example (0) | 2025.02.16 |
| HTML) HTML Image and Figure Tag Example (0) | 2025.02.15 |