6장
1분 퀴즈
1. ③
해설_ 텍스트 색상을 지정하는 속성은 font-color가 아니라 color입니다.
2. 170, 135
해설_ box-sizing 속성을 별도로 지정하지 않았기 때문에 너비와 높이는 border + padding + content 영역으로 계산해야 합니다. 따라서 너비는 170px(10px + 20px + 20px + 20px + 100px), 높이는 135px(5px + 10px + 10px + 10px + 100px)이 됩니다.
3. ④
해설_ 삽입하려는 이미지의 크기를 지정하고 싶을 때는 background-size 속성을 사용합니다.
4. ④
해설_ clear 속성은 float 속성과 같은 값이나 both 값을 적용해 해제할 수 있습니다.
5. ②
해설_ 전환 효과 속성을 지정하는 데 필요한 최소 속성은 transition-property, transition-duration 속성입니다.
6. ③
해설_ animation-delay 속성은 애니메이션 효과를 지연할 때 사용합니다.
셀프체크
1.3장에서 만든 포스트잇의 HTML 코드에 CSS를 적용하기 위해 postit 아이디를 추가합니다.
06/selfcheck/postit/index.html
<div id="postit">
<h1>To. 남편</h1>
(중략)
</div>
이렇게 작성한 HTML 코드 기반으로 CSS를 다음과 같이 작성합니다.
06/selfcheck/postit/style.css
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap'); // ①
*{
margin:100px;
padding:0;
box-sizing:border-box;
} // ②
#postit{
width:333px;
height:333px;
background-color:#ff9;
transform:rotate(10deg);
text-align:center;
font-family:"Nanum Pen Script", cursive;
} // ③
#postit h1{
font-size:44px;
margin-bottom:20px;
font-weight:normal;
} // ④
#postit p{
font-size:25px;
margin-bottom:20px;
} // ⑤
① 나눔 펜 글꼴을 적용하기 위해서 구글 웹 폰트를 추가합니다.
② 웹 브라우저의 기본 스타일 시트를 초기화합니다.
③ 텍스트 크기와 margin, 너비와 높이, 배경과 같은 CSS를 적용합니다. 텍스트 중앙 정렬은 문제에 따로 설명이 없지만, 그림처럼 중앙 정렬하기 위해서 text-align 속성을 사용합니다. 회전은 transform 속성값으로 rotate() 함수를 사용해서 지정합니다.
④ 문제에 나와 있는 것처럼 텍스트 크기와 margin, 텍스트 굵기를 적용합니다.
⑤ 문제에 나와 있는 것처럼 텍스트 크기와 margin을 적용합니다.
2. 3장에서 만든 로그인 코드에 CSS를 적용하기 위해 login 아이디를 추가합니다.
06/selfcheck/login/end/index.html
<form action="#" id ="login">
<fieldset>
(중략)
</form>
CSS 코드를 작성합니다.
06/selfcheck/login/end/style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); // ①
*{
margin:0;
padding:0;
box-sizing:border-box;
} // ②
body{
font-family:"Roboto", sans-serif;
} // ③
#login{
width:304px;
height:390px;
padding:28px 38px;
border:1px solid #000;
margin:100px auto;
} // ④
#login fieldset{
border:none;
} // ⑤
#login fieldset legend{
position:absolute;
top:-99999px;
} // ⑥
#login button{
width:228px;
height:44px;
border:1px solid #000;
background-color:white;
font-weight:bold;
} // ⑦
#login input{
width:228px;
height:44px;
border:1px solid #000;
padding:0 10px;
margin-bottom:21px;
background-color:#eaeaea;
} // ⑧
#login > fieldset + p{
margin:24px 0;
font-size:16px;
font-weight:bold;
text-align:center;
} // ⑨
#login button[type='submit']{
background-color:#373f3c;
color:white;
margin-bottom:27px;
font-weight:normal;
} // ⑩
#login a{
text-decoration:none;
color:#2c3432;
font-size:14px;
text-align:center;
display:block;
} // ⑪
① Roboto 글꼴을 적용하기 위해 구글 폰트를 추가합니다.
② 웹 브라우저의 기본 스타일 시트를 초기화합니다.
③ font-family 속성은 상속되므로 body 태그에 Roboto 글꼴을 적용합니다.
④ 로그인 영역의 너비와 높이를 지정하고 내부 여백(상하 28px, 좌우 38px)을 지정합니다. 로그인 영역의 테두리를 추가하고, 수평 방향에서 중앙에 위치할 수 있도록 margin 속성을 100px auto로 작성합니다.
⑤ fieldset 태그는 기본으로 테두리가 있는데, 디자인에서는 필요 없으므로 border 속성을 작성합니다.
⑥ 웹 접근성을 위해 legend 태그를 사용했지만, 디자인에서 필요 없는 구성 요소입니다. 그러나 display 속성값을 none으로 적용하면 웹 브라우저 화면에 아예 표시되지 않기 때문에 legend 태그를 사용한 의미가 없습니다. 그래서 position 속성을 absolute로 지정해 화면 밖으로 이동시킵니다.
⑦ 버튼 영역의 너비와 높이를 지정하고 테두리와 배경, 텍스트 굵기 등도 적용합니다. 단, 현재 login 영역에 button 태그가 2개이고, 해당 선택자로 2개의 버튼에 속성이 모두 적용되지만, 어차피 2개의 버튼 모두 너비와 높이는 같아서 문제없습니다.
⑧ 입력 요소의 너비와 높이를 지정하고 테두리와 내부 여백, 외부 여백, 배경색과 관련한 속성을 작성합니다.
⑨ 선택자가 다소 복잡해 보이지만, 최대한 HTML 구조를 건드리지 않기 위해서입니다. 로그인 영역에서 ‘or’ 부분을 선택하는데, 상하 외부 여백과 텍스트의 크기와 굵기, 중앙 정렬과 관련한 속성을 작성합니다.
⑩ Login 버튼을 꾸며야 하는데 ⑦에서 선택자로 작성한 속성 때문에 이미 어느 정도 버튼이 꾸며져 있습니다. 여기서 그림과 일치하게 텍스트 색상, 배경색, 굵기, 외부 여백 등을 다시 지정합니다.
⑪ a 태그는 기본으로 밑줄이 그어져 있습니다. 이를 삭제하기 위해 text-decoration 속성을 none으로 적용합니다. 그리고 텍스트 색상과 크기, 중앙 정렬을 위한 속성을 작성합니다. 이때 a 태그는 인라인 성격이라서 중앙 정렬되지 않습니다. 그래서 display 속성값을 block으로 적용하면 중앙 정렬됩니다.
3. 3장에서 만든 목차에 CSS를 적용하기 위해 list 클래스를 추가합니다.
06/selfcheck/wiki/end/index.html
<div class="list">
<h1>목차</h1>
(중략)
</div>
CSS 코드를 다음과 같이 작성합니다.
06/selfcheck/wiki/end/style.css
*{
margin:0;
padding:0;
box-sizing:border-box;
} // ①
a{
color:#0645ad;
} // ②
.list{
width:346px;
height:265px;
background-color:#f8f9fa;
border:1px solid #a2a9b1;
padding:6px 5px;
margin:20px auto;
} // ③
.list h1{
font-size:13px;
text-align:center;
} // ④
.list ol li{
list-style:none;
font-size:13px;
} // ⑤
.list ol li a{
text-decoration:none;
height:21px;
display:inline-block;
} // ⑥
.list ol li ol{
margin-left:26px;
} // ⑦
① 웹 브라우저의 기본 스타일 시트를 초기화합니다.
② a 태그의 색상을 #0645ad로 지정합니다.
③ 너비를 346px, 높이를 265px로 지정합니다. padding은 상하, 좌우에 각각 6px, 5px을 적용합니다. 목차가 수평으로 중앙에 오도록 margin을 20px auto로 지정합니다. 배경색도 #f8f9fa로 지정합니다.
④ h1 태그로 작성한 요소의 텍스트 크기는 13px이고, text-align 속성으로 중앙 정렬합니다.
⑤ li 태그는 자동으로 번호가 붙는 목록 스타일입니다. 따라서 list-style 속성을 none으로 지정해 리스트 스타일을 없앱니다. 텍스트 크기도 13px로 지정합니다.
⑥ a 태그는 기본으로 밑줄이 그어져 있습니다. 이를 제거하기 위해서 text-decoration 속성값을 none으로 지정합니다. a 태그는 박스 모델이 인라인 성격이어서 height 속성이 적용되지 않습니다. 그래서 display 속성값을 inline-block으로 지정하고 height 속성을 지정합니다.
⑦ 목록을 들여 쓰기 위해 margin을 왼쪽에 26px로 지정합니다.