1.박스 사이징
- width, height 높이와 길이를 부여
/ 이 높이와 길이에는 padding이나 border 영역은 포함하지 않음
* box-sizing:content-box:
기존 계산법, width와 height 포함하지 않겠다
* box-sizing:border-box:
width와 height에 padding, border를 포함
만약 width 100%로 설정된 경우 padding이나 border 속성을 추가할 수 없음.
그러니까 여기에 padding을 주려면 border-box를 사용하여 포함한 길이가 100% 되도록
- 입력 코드 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스사이징</title>
</head>
<body>
<h2>박스사이징</h2>
<div class="bs1"></div>
<div class="bs2"></div>
</body>
</html>
- 스타일 코드 작성-
<style>
div {
width: 300px;
height: 150px;
border: 10px solid red;
margin: 10px;
padding: 30px;
}
.bs1{
box-sizing: content-box;
}
.bs2{
box-sizing: border-box;
width: 380px;
}
</style>
- 출력 결과 -
- 개발자 도구 켜봐서 비교하기 -
1번의 박스
content 박스의 스타일이 넣어졌을땐 컨텐츠+패딩+보더 의 사이즈가 합쳐서 = 길이 380
2번의 박스
- 다 포함해서 그냥 380 .
질문 1 . = 이러나 저러나 , 다 380인데 다른게 무슨 차이점일까? (물어보기)
2번. 둥근테두리
(전부 따로 줄 때)
border-radius > 8개의 값을 다 넣어줌
top-left-x top-right-x bottom-right-x bottom-left-x
/ top-left-y top-right-y bottom-right-y bottom-left-y
(대각선 위치의 값이 같을 때)
border-radius : top-left-x top-right-x / top-left-y top-right-y
(전부 같을 때)
border-radius : xy
- 작성 코드-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>둥근테두리</title>
</head>
<body>
<h2>둥근테두리</h2>
<div class="radius1"></div>
<div class="radius2"></div>
<div class="radius3"></div>
<div class="radius4"></div>
</body>
</html>
- 스타일 코드-
<style>
div{
width: 200px;
height: 200px;
margin: 20px;
}
.radius1{
border: 3px solid red;
border-radius: 100px 100px 50px 50px / 30px 30px 100px 100px;
}
.radius2{
border: 3px solid blue;
border-radius: 100px / 50px;
}
.radius3{
border: 3px solid green;
border-radius: 100px 20px / 50px 100px;
}
.radius4 {
border: 3px solid hotpink;
border-radius: 50%;
}
</style>
- 출력 결과 -
- 첫번째 값에 8개의 값을 넣었는데
출력 하고난후 개발자 도구를 보면 속성이 다 적용 되어있는게[ 보인다.
3. 테이블 테두리
- 테이블 셀들 간의 공백을 어떻게 처리할지 결정하는 속성
separate(기본, 셀들을 분리), collapse(셀들 사이를 합쳐서 공백을 없앰)
- 입력 코드 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 테두리 </title>
</head>
<body>
<h2>테이블 테두리</h2>
<table>
<caption>브라우저의 종류</caption>
<tr>
<th>개발사</th>
<th>브라우저 이름</th>
</tr>
<tr>
<td>구글</td>
<td>크롬</td>
</tr>
<tr>
<td>마이크로소트트</td>
<td>엣지</td>
</tr>
<tr>
<td>마이크로소트트</td>
<td>사파리</td>
</tr>
<tr>
<td>삼성</td>
<td>삼성브라우저</td>
</tr>
</table>
</body>
</html>
- 입력 스타일-
<style>
table{
border: 3px solid red;
width: 600px;
border-collapse: collapse;}
th,td{
border: 3px solid red;
height: 40px;
text-align: center;}
th{
background-color: pink;}
tr>td {background-color:moccasin;}
</style>
- 출력 결과 -
- 질문 2 : 왼쪽 면으로만 색이 채워지게 하고 싶은데 어떻게 코드를 짜야 할까?
4. 디스플레이 ( block / inline block) 의 차이점
- 웹 페이지의 레이아웃을 결정하는 속성
block : 새로운 라인에서 시작하고, 해당 라인의 모든 너비를 차지
높이값만큼 한줄을 가득채우는 속성을 가지고 있음 (DIV, HEADER, P, TABLE, H1~6...)
inline : 새로운 라인에서 시작되지 않고, 앞의 요소에 이어서 배치
width, height 값이 적용x 안의 컨텐츠 내용만큼 영역을 차지 (A, SPAN, IMG...)
* display inline일 경우 margin,padding top-bottom이 안 먹는 경우가 있음 대표적으로 span
inline-block : block과 inline 속성을 모두 적용
none : 웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라짐
- 입력 코드 -
<body>
<h2>디스플레이</h2>
<div id="inline">
<img src="./sea1.png" alt="바다"/>
<img src="./sea2.png" alt="바다"/>
<img src="./sea3.png" alt="바다"/>
</div>
<div id="block">
<img src="./sea1.png" alt="바다"/>
<img src="./sea2.png" alt="바다"/>
<img src="./sea3.png" alt="바다"/>
</div>
<hr> <!-- 직선의 줄을 그어준다 -->
<span class="ib"></span>
<span class="ib"></span>
<span class="ib"></span>
<hr>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
</body>
</html>
- 스타일 코드-
<style>
div{
margin: 20px;
border: 1px solid deeppink;
border-radius: 20px;
padding: 10px;}
img {
border: 1px solid deepskyblue;}
.ib{
border: 3px solid blue;
width: 100px;
height: 100px;
margin: 10px;}
span.ib{
display: block;}
div.ib{
display: inline-block;}
</style>- 이미지가 들어있는 전체의 div 값에 1px 핑크색인 살짝 둥그런 테두리를 만들어준다 .
이미지와 테두리 사이의 간격은 10px
- 이미지가 잘 보이기 위에 이미지 자체 테두리에 색과 넓이를 넣어주었다.
- ib 값에 기본적인 높이와,,넓이 를 정해주고 <spane>으로 묶어준 ib값에 display: block을 넣어주면
ib 에 값을 주고 만들어진 모형이 1개의 블럭처럼 되어 세로로 블럭처럼 나열 된 모습이 보인다.
- div 태그에 있는 ib 값은 inline-block 블럭처럼 나열된 모습을 보일수 있다.
- 출력 결과 -
5. 디스 플레이 ( none / hidden 의 차이점 )
- none : 웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라짐
- hidden: 말 그대로 숨김, 공간차지 함
- 입력 코드-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>디스플레이2</title>
</head>
<body>
<h2>디스플레이2</h2>
<div>
<p>display 속성값을 none으로 설정</p>
<p class="none">display 속성값을 none으로 설정</p>
</div>
<div>
<p>display 속성값을 hidden으로 설정</p>
<p class="hidden">display 속성값을 hidden으로 설정</p>
</div>
</body>
</html>
- 스타일 코드 -
<style>
div{
background-color: hotpink;
border: 3px solid blue;
margin-bottom: 20px; }
p.none{
/*display: none*/
display: block;}
p.hidden{
/*visibility: hidden */
visibility: visible;}
</style>- none 은 자리까지 없어지고 , hidden 은 공간 차지를 하지만 숨기는것
block / visible 로 적으면 다시 공간에 상관없이 입력했던 값들이 나타난다.
- 출력 결과 -
6. CSS 폼
- 폼 요소의 스타일을 설정
* 입력부분 *
선택자:
focus: 폼 요소가 포커싱 되어있을 때의 스타일을 설정된
ex) outline: none
버튼
ex) cursor:pointer -> 마우스를 올렸을 때 커서 모양을 설정
textarea: resize: none ==> textarea 크기를 사용자가 변경 불가능하도록 설정
- 입력 코드 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼</title>
</head>
<body>
<form action="">
<p> 아이디: <input type="text" placeholder="아이디를 입력하세요"required/></p>
<p>비밀번호:<input type="password" placeholder="비밀번호를 입력하세요"required/></p>
<p>
직업
<select>
<option>교사</option>
<option>강사</option>
<option>의사</option>
<option>판사</option>
<option>학사</option>
<option>주부</option>
<option>사무직</option>
<option>기타</option>
</select>
</p>
<p>자기소개
<textarea></textarea>
</p>
<p>
<input type="submit" value="회원가입"/>
<input type="reset" value="다시작성"/>
<input type="button" value="돌아가기"/>
</p>
</form>
</body>
</html>
- 입력 스타일 코드-
- text> border:none; 텍스트 박으에 있는 테두리를 없애 준다.
- text : focos > outlione:none; 비밀번호 입력창 테두리를 없애준다
- text area: > resize: none; 자기소개 입력창에 사용자가 함부로 사이즈 조절 못하게 딱 정해준다 .
- 출력 결과 -
'Class > Frontend' 카테고리의 다른 글
| [프론트 엔드 DAY08] (0) | 2022.05.23 |
|---|---|
| [프론트 엔드 DAY07] (1) | 2022.05.09 |
| [프론트 엔드 DAY05] (0) | 2022.04.27 |
| [프론트 엔드 DAY04-1] (0) | 2022.04.27 |
| [프론트 엔드 DAY04] (1) | 2022.04.26 |
댓글