AI와 데이터 사이언스의 이론과 실전
CSS - display 속성, 폼 태그 본문
1. 디스플레이(display) 속성
CSS의 display 속성은 요소가 어떻게 표시되는지를 지정하는 중요한 속성입니다. 이 속성을 사용하여 요소의 렌더링 방식을 변경하거나 제어할 수 있습니다.
- block (블록)
- 요소를 블록 레벨 요소로 지정, 요소가 새로운 줄에서 시작되며 가로 영역 전체를 차지.
- 예: <div>, <p>, <h1> - inline (인라인)
- 요소를 인라인 요소로 지정, 요소가 줄 내에서 콘텐츠의 일부로 처리되며 자신의 내용만큼만 가로 공간을 차지
- 예: <span>, <a>, <strong> - inline-block (인라인 블록)
- 요소를 인라인과 블록 요소의 특성을 모두 가지는 요소로 지정, 인라인 요소처럼 줄 내에서 표시되지만 블록 요소처럼 가로 공간을 차지하며 수직으로 쌓일 수 있음.
- 예: <button> - none (없음)
- 요소를 화면에 표시하지 X. 요소는 레이아웃에서 제외되며 공간도 차지 X.
2. 출력 / 숨김
원하는 태그를 원하는 순간에만 보이거나 숨길 수 있습니다.
2.1. display 속성 - 칸 차지x
display를 none으로 설정하면 숨겨지며 숨김처리 동안에는 숨겨진 태그는 칸을 차지하지 않습니다 .
숨김 : display none;
출력 : display block;, display inline; , ...2.2. visibility 속성 - 칸 차지 o
visibility를 hidden으로 설정하면 숨겨지며 숨김처리 동안에도 숨겨진 태그는 칸을 차지합니다.
숨김 visibility : hidden;
출력 visibility: visible;
✔ visibility : hidden; <-> visibility: visible;
아이디: [apple]
-> 사용할 수 없는 아이디입니다. (칸을 계속 차지하는건 visibility)
-> 사용할 수 없는 아이디입니다. (칸을 보일때만 차지하는건 display none;)
비밀번호: []
< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>디스플레이</title>
<style>
div{
background-color: yellow;
border: 3px solid red;
margin-bottom: 30px;
}
p#none {
display: none;
}
p#hidden { visibility: hidden;}
</style>
</head>
<body>
<div>
<p>display값을 none으로 설정 - 칸까지 사라짐 </p>
<p id = 'none'>display값을 none으로 설정</p>
</div>
<div>
<p>visibility속성값을 hidden으로 설정 - 칸은 항상 유지</p>
<p id="hidden">visibility속성값을 hidden으로 설정</p>
</div>
</body>
</html>< 결과>
display값을 none으로 설정 - 칸까지 사라짐
display값을 none으로 설정
visibility속성값을 hidden으로 설정 - 칸은 항상 유지
3. CSS를 폼(form) 태그 적용
- border-radius : 요소의 끝 부분이 동그래짐 px, % 로 값 입력
- resize: none : 텍스트 상자의 사이즈를 사용자 마음대로 조절할 수 있는 컨트롤 바를 삭제
- cursor: pointer : 해당 태그위에 커서 올려놓으면 커서 모양 바뀜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼</title>
<style>
.input {
width: 100%;
box-sizing: border-box; /*border padding을 합해줌*/
padding: 10px 20px;
margin: 5px 0; /*norder-box를 적용했음으로 좌우에 margin을 주면 안됨*/
}
input[type='text'] /*input 태그 중에서 type이 text인걸 찾아라*/ {
border-radius: 45px; /*클수록 더 동그래짐*/
outline: none; /*이거하면 브라우저 디폴트 선 없어짐*/
}
input[type='text']:focus /*focus는 커서로 누르면*/ {
background-color: aquamarine;
border: 3px dotted black;.
}
input[type='password']{
border: none;
background-color: white;
border-bottom: 3px solid black;
}
input[type='password']:focus {
border-bottom: 3px dotted black;
}
select {
box-sizing: border-box;
width: 100%;
padding: 10px;
margin: 5px 0;
background-color: pink;
border: 2px solid deeppink;
}
textarea#content {
box-sizing: border-box;
width: 100%;
height: 200px;
resize: none;/*조절바 삭제*/
font-size: 20px;
}
button.btn {
width: 150px;
background-color: pink;
color: rebeccapurple;
padding: 12px 25px;
cursor: pointer; /*올려놓으면 커서 모양 바뀜*/
}
p.center {text-align: center;/*버튼이 글자를 가지고있으니까 margin으로 센터 잡기보다는 글자로 가운데 정렬 p태그안에 글자를 p태그 속에서 가운데 정렬한다고 보면 됨 */
}
</style>
</head>
<body>
<h2>폼</h2>
<form action="#">
<p>아이디: <input type="text" id="userid" class="input" maxlength="20" placeholder="아이디를 입력하세요"></p>
<p>비밀번호:<input type="password" id="userpw" class="input" maxlength="20" placeholder="비밀번호를 입력하세요"></p>
<p>직업: <select name="job" id="job">
<option value="프로그래머">프로그래머</option>
<option value="의사">의사</option>
<option value="법조인">법조인</option>
<option value="학생">학생</option>
<option value="유튜버">유튜버</option>
</select></p>
<p><textarea name="content" id="content">아리는바보고양이</textarea></p>
<p class="center"><button class="btn">회원가입</button></p>
</form>
</body>
</html>< 결과 >
실제로 눌러서 확인해보세요.
폼
내일은 아주 중요한 position에 관하여 포스팅하겠습니다. position에 관한 내용은 양이 방대함으로 오늘은 짧게 마치겠습니다. 하지만 오늘 포스팅한 display : none은 아주 필수적인 기능이며 border-radius는 이미지에도 쓰이는 등 쓸모가 많음으로 반드시 기억해 놓으시길 바랍니다.
'HTML과 CSS > CSS' 카테고리의 다른 글
| CSS - 수평 배치(float, flex), 겹쳐서 출력 (1) | 2023.10.22 |
|---|---|
| CSS - 위치지정(static, relative, fixed, sticky, absolute) (1) | 2023.10.21 |
| CSS - 박스 모델(내용, 패딩, 마진, 테두리) , 박스 사이징 (0) | 2023.10.19 |
| CSS - 배경 색 설정, 배경 이미지 삽입, 위치, 사이즈 조절 (1) | 2023.10.18 |
| CSS - 텍스트 간격, 정렬, 효과, 설정, 글꼴 선택 (1) | 2023.10.17 |
'HTML과 CSS/CSS' Related Articles
more
