질문 내용
- display 종류와 속성에 대하여 설명하시오.
- px 과 em 의 차이는? (font)
- inline-block 태그의 종류는?
- opacity 속성 사용법은?
- display:none; 과 visibility:hidden;의 차이는?
- box-sizing 속성들에 대하여 설명하시오.
- margin 과 padding의 차이는?
- 아래의 속성에 대하여 설명하시오.
- background-image
- background-size
- background-repeat
- 요안도라 header 부분을 구현하시오.
개인 작성
- display 속성 설명
-
block 태그를 display: inline 으로 CSS 설정할 경우
-> block 태그 속성을 잃는다.
-> width, height 속성값을 무시하게 된다. -
none으로 값을 설정할 경우
-> 보이지도 않고, 메모리에 올리지도 않는 상태가 된다. 가끔씩 사용한다고 한다. -
inline-block으로 값을 설정할 경우
-> float 속성을 부여한 block 태그가 된다.
px : 하나의 픽셀 단위. 픽셀 단위가 달라지면 해당 크기도 달라진다.
기본 px의 정의로만 바라본다면 물리적 단위이지만,
특정 분야에서는 픽셀에 대한 정의가 달라질 수 있다.
em : 상위 요소의 글꼴 크기를 상속받아 크기를 조절한다.
브라우저마다 해당 단위 크기는 일반적으로 16px로 정해져 있다.- span, button, img 등
- opacity 속성
- 투명도 조절하는 속성
- 0~1 사이 숫자를 넣기
- 1 : 100%(기본) - 완전 불투명
- 0 : 0% - 완전 투명
- 요소 내 모든 것들의 투명도가 조절된다.
- display : none - 공간 차지도 하지 않고 모두 비어있는 것
visibility : hidden - 공간은 차지하지만 나머지는 숨기는 것.
- box-sizing 속성
- 요소의 크기 계산 방법을 지정하는 CSS 속성. 일반적으로 2개의 값을 가진다.
- content-box: 기본값으로 설정되어 있는, 영역 중 컨텐츠 영역만 정의하기
- border-box: 패딩(padding)과 테두리(border)까지 포함한 전체 박스의 크기값
- margin과 padding의 차이
- padding : content와 border 사이 공간 조절. 내부 공간
- margin : 요소와 요소 사이 공간 조절. 외부 공간.
- background-image : url(링크) 값을 사용한다. 배경에 이미지를 삽입하는 속성.
- background-size : 배경 이미지의 크기를 조절.
- background-repeat : 배경 이미지 배치 반복 여부를 설정. no-repeat 값은 미설정을 의미.
- margin 설정 때, 클래스 이름을 헷갈린 상태로 진행하여
공백 상태를 제거한다고 몇 시간을 날려먹었다. 아쉽다.
display 속성을 잘 활용해야겠다. 글자를 넣어두려면 어쩔수가 없겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrapper{
width: 967px;
margin: 0 auto;
text-align: center;
}
#header{
margin-top: 5%;
width : 967px;
}
.header_bg {
width: 967px;
height: 284px;
background-image: url(https://github.com/WingKill/html_example/blob/main/bg2.png?raw=true);
background-size: cover;
}
.header_bg .img_text{
display: flex;
align-items: end;
justify-content: center;
flex-direction: column;
height: 283px;
}
.img_text .text1{
margin-right: 20px;
color: beige;
}
.img_text .text2{
margin-right: 20px;
color: #cfcf3b;
}
.header_menu{
width: 967px;
height: 50px;
background-color: rgb(80, 14, 14);
margin: 0;
}
.header_menu ul{
margin: 0;
}
.header_menu ul li{
margin : 15px 30px;
list-style: none;
color: white;
display: inline-block;
}
.header_menu ul li:hover{
color: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id=header>
<div class="header_bg">
<div class="img_text">
<h1 class="text1">Joandora</h1>
<h2 class="text2">가장 제주다운 수산리집</h2>
</div>
</div>
<div class="header_menu">
<ul>
<li>이용 안내</li>
<li>객실 안내</li>
<li>예약 안내</li>
<li>예약하기</li>
</ul>
</div>
</div>
</div>
</body>
</html>
두리둥둥