[ CSS ] <Style> 태그를 활용해 디자인 해보자 (+ <input> 태그)
2024. 4. 2. 20:08ㆍ· FRONT-END/└ CSS
환경 : Visual Studio Code
[ <style> 태그 ]
- Cascading Style Sheets(계층적 스타일 시트)의 스타일 규칙을 HTML 문서에 적용하는 데 사용
- 웹 페이지의 레이아웃, 디자인, 색상 및 기타 스타일 속성을 제어
- 화면에 보이지 않는 속성이기 때문에 <head> 섹션 내에 위치
[ CSS의 주요 속성 ]
| 속성 | 설명 | |
| color | 글자 색상 | |
| background-* | 배경 속성 (ex. 이미지, 색상, 그라데이션 ...) | |
| font-* | 글꼴 속성 | |
| font-size | 글꼴 크기(기본값 16px, 태그마다 다름) | |
| font-family | 글꼴 종류 | |
| padding-* |
내부 여백 속성 | |
| px | 수치로 지정하는 방법 | |
| em | 배율로 지정하는 방법 (1.5em = 글자 크기의 1.5배) | |
| padding-left | 왼쪽 여백 속성 | |
| padding-right | 오른쪽 여백 속성 | |
| padding-top | 상단 여백 속성 | |
| padding-bottom | 하단 여백 속성 | |
| border-* |
테두리 속성 | |
| border-color | 테두리 색상 | |
| border-style | 테두리 스타일 지정 (solid, dashed, ...) | |
| border-radius | 테두리 모서리 스타일 지정 | |
| margin-* |
외부 여백 속성(특별한 경우 제외, 보통 좌우 여백은 미설정) | |
| margin | 전체 | |
| margin: 0px 0px; | 상하/좌우를 묶어서 설정 가능 | |
| margin: 상 우 하 좌; | 상 우 하 좌 순으로 각각 설정 가능 (비추천) | |
[기본 구성 틀]
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<style>
/* CSS 규칙들이 여기에 들어갑니다 */
</style>
</head>
<body>
<!-- 웹 페이지의 내용이 여기에 들어갑니다 -->
</body>
</html>[ 사용 예 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 속성(Attributes)</title>
<style>
h1{
color: aliceblue;
background-color: cornflowerblue;
}
/* input { } */
/* input 태그 중 name=keyword인 태그를 선택(속성 선택자) */
input[name=keyword] {
font-size: 24px;
font-family: 글씨체 이름, sans-serif;
/* padding: 10px;
padding-left: 30px;
padding-right: 30px; */
padding: 0.5em;
padding-left: 1em;
padding-right: 1em;
border-color: cadetblue;
border-width: 2px;
border-style: solid;
/* border-radius: 5px; */
border-top: none;
border-left: none;
border-right: none;
}
</style>
</head>
<body>
<h1>CSS 주요 속성</h1>
<input type="text" name="keyword" value="CSS Design!">
</body>
</html>(+) input { } : name=keyword인 태그를 선택하는 선택 속성자이다.
(+) padding을 줄 때 px과 em을 비교한 코드이다.
(+) 각각의 태그 별로(<h1>, <input>) 스타일을 지정해줄 수 있다.
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ CSS' 카테고리의 다른 글
| [ CSS / HTML ] 테꾸. 테이블 태그 꾸미기 (0) | 2024.04.11 |
|---|---|
| [ CSS ] 미리 정해두고 꺼내 먹기 (0) | 2024.04.04 |
| [ CSS ] form 디자인을 해보자 - 인스타그램 로그인 화면 디자인 해보기 (0) | 2024.04.03 |
| [ CSS ] form 디자인을 해보자 (0) | 2024.04.03 |
| [ CSS ] 인라인 스타일 이해(Inline Style) (0) | 2024.04.01 |