[필기정리] Day36 - CSS 문제 및 해답

Web/CSS

2020. 7. 30. 16:08

Q1. 다음을 전체 선택자를 사용해 모든 태그의 color 스타일 속성을 red로 변경한다.

<!DOCTYPE html> 
<html> 
	<head> 
    	<title>CoderBear's CSS Practice</title> 
	</head> 
	<body> 
	    <h1>제목 글자 태그</h1> 
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p> 
	</body> 
</html>

A.

<!DOCTYPE html> 
<html> 
	<head> 
    	<title>CoderBear's CSS Practice</title> 
        <style>
        	*{color:red;}
        </style>
	</head> 
	<body> 
	    <h1>제목 글자 태그</h1> 
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p> 
	</body> 
</html>


Q2. 태그 선택자 적용하기 : 

   태그 선택자를 사용하여 h1 태그의 color 스타일 속성에 red를 적용하고,

   p 태그의 color 스타일 속성에 blue를 적용한다.

<!DOCTYPE html> 
<html> 
	<head> 
    	<title>CoderBear's CSS Practice</title> 
	</head> 
	
    <body> 
    	<h1>제목 글자</h1> 
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p> 
    	<p>Etiam lacus felis, ornare non lobortis ac, vehicula non diam. Integer pellentesque neque eget eros pulvinar pharetra. Maecenas gravida mi dui, at sollicitudin justo. Vestibulum pretium lacus lobortis arcu egestas dapibus. Sed nunc dui, adipiscing vitae mattis in, accumsan in neque. Sed pellentesque leo quis lorem posuere consequat. Duis sapien risus, rutrum ut ullamcorper et, accumsan a lorem. Ut metus est, varius eget molestie vitae, rutrum vitae ante. Quisque eu quam leo, et hendrerit lorem. Nullam nec risus sapien. Phasellus ut mauris eget justo mollis dictum. Nullam consectetur nibh at sem luctus mollis.</p> 
	</body> 
</html>

A.

<!DOCTYPE html> 
<html> 
	<head> 
    	<title>CoderBear's CSS Practice</title>
        <style>
        	h1{color:red;}
            p{color:blue;}
        </style>
	</head> 
	
    <body> 
    	<h1>제목 글자</h1> 
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p> 
    	<p>Etiam lacus felis, ornare non lobortis ac, vehicula non diam. Integer pellentesque neque eget eros pulvinar pharetra. Maecenas gravida mi dui, at sollicitudin justo. Vestibulum pretium lacus lobortis arcu egestas dapibus. Sed nunc dui, adipiscing vitae mattis in, accumsan in neque. Sed pellentesque leo quis lorem posuere consequat. Duis sapien risus, rutrum ut ullamcorper et, accumsan a lorem. Ut metus est, varius eget molestie vitae, rutrum vitae ante. Quisque eu quam leo, et hendrerit lorem. Nullam nec risus sapien. Phasellus ut mauris eget justo mollis dictum. Nullam consectetur nibh at sem luctus mollis.</p> 
	</body> 
</html>


Q3. 한꺼번에 여러 개의 선택자를 입력하여 스타일 속성을 적용할 때는 쉼표를 사용한다.

   코드 예를 써보시오.

A.

<!DOCTYPE html> 
<html> 
	<head> 
    	<title>CoderBear's CSS Practice</title>
        <style>
        	h1, p{color:blue;}
        </style>
	</head> 
	
    <body> 
    	<h1>제목 글자</h1> 
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p> 
    	<p>Etiam lacus felis, ornare non lobortis ac, vehicula non diam. Integer pellentesque neque eget eros pulvinar pharetra. Maecenas gravida mi dui, at sollicitudin justo. Vestibulum pretium lacus lobortis arcu egestas dapibus. Sed nunc dui, adipiscing vitae mattis in, accumsan in neque. Sed pellentesque leo quis lorem posuere consequat. Duis sapien risus, rutrum ut ullamcorper et, accumsan a lorem. Ut metus est, varius eget molestie vitae, rutrum vitae ante. Quisque eu quam leo, et hendrerit lorem. Nullam nec risus sapien. Phasellus ut mauris eget justo mollis dictum. Nullam consectetur nibh at sem luctus mollis.</p> 
	</body> 
</html>

 

Q4. 클래스 선택자를 이용하여 아래와 같이 구현하시오.

문제 구현 예시

A.

<!DOCTYPE html> 
<html> 
	<head> 
    	<title>CoderBear's CSS Practice</title>
        <style>
        	.fruit{color:red;}
        </style>
	</head> 
	
    <body> 
    	<h1>제목 글자</h1> 
        <ul>
        	<li class="fruit">사과</li>
            <li>바나나</li>
            <li class="fruit">오렌지</li>
            <li>감</li>
        </ul>
	</body> 
</html>



Q5. 여러 개의 클래스 선택자 사용
     class 속성은 공백으로 구분하여 클래스를 여러 개 사용할 수 있다.
     h1태그에 두 개 이상의 클래스 선택자를 사용해 보자.

문제 구현 예시

A.

<html>
	<head>
    	<title>CoderBear's CSS Practice</title>
    	<style>
        	.item { color: red; }
        	.header { background-color: blue; }
    	</style>
	</head>

	<body>
    	<h1 class="item header">동해물과 백두산이</h1>
	</body>
</html>


Q6. 태그 선택자와 클래스 선택자
     웹 페이지 내부에서 id 속성은 중복되지 않아야 하지만 class 속성은 중복될 수 있다.

     class 속성이 서로 다른 태그에 적용되는 경우

    태그 선택자와 클래스 선택자를 함께 사용해서 태그를 더 정확하게 선택할 수 있다.
    해당 내용을 활용한 예시를 구현해보시오.

 

A.

<html>
	<head>
    	<title>CoderBear's CSS Practice</title>
    	<style>
        	.item { color: red; }
        	.header { background-color: blue; }
    	</style>
	</head>

	<body>
    	<h1 class="item header">CoderBear</h1>
	</body>
</html>

 

Q7. 속성 선택자
      input 속성을 이용하여 input type이 text이면 배경색을 빨간색

      input type이 password이면 배경색상을 파란색으로 하시오.

A.

<html>
	<head>
    	<title>CoderBear's CSS Practice</title>
    	<style>
        	input[type="text"] { color: red; }
        	input[type="password"] { background-color: blue; }
    	</style>
	</head>

	<body>
    	<input type="text" name="coder">
        <input type="password" name="bear">
	</body>
</html>


Q8. 후손 선택자
[선택자 형태 설명] 
선택자A 선택자B : 선택자A의 후손인 선택자 B선택

header id의 후손 h1은 글자색을 빨강색으로 하고
section id의 후손 h1은 글자색을 오렌지로 하자.

<!DOCTYPE html> 
<html> 
	<head> 
    	<title>CoderBear's CSS Practice</title> 
	</head> 

	<body> 
    	<div id="header"> 
        	<h1 class="title">Lorem ipsum</h1> 
        <div id="nav"> 
            <h1>Navigation</h1> 
        </div> 
    	</div> 
    	<div id="section"> 
        	<h1 class="title">Lorem ipsum</h1> 
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p> 
    	</div> 
	</body> 
</html>

 

A.

<!DOCTYPE html> 
<html> 
	<head> 
    	<title>CoderBear's CSS Practice</title>
        <style>
        	#header h1{color:red;}
            #section h1{color:orange;}
        </style>
	</head> 

	<body> 
    	<div id="header"> 
        	<h1 class="title">Lorem ipsum</h1> 
        <div id="nav"> 
            <h1>Navigation</h1> 
        </div> 
    	</div> 
    	<div id="section"> 
        	<h1 class="title">Lorem ipsum</h1> 
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p> 
    	</div> 
	</body> 
</html>

 

Q9. 다음 코드를 분석하시오

<style> 
  #header h1, h2 {color:red;} 
</style>

A.

id 선택자 중 header의 후손인 h1 태그와 h2 태그를 빨간색으로 바꿈

Q10.  다음 코드를 분석하시오.

<style> 
	#header h1, #header h2 {color:red;} 
</style>

A.

id 선택자인 header의 후손인 h1 태그, h2 태그를 빨간색으로 바꿈


Q11. 다음 소스코드의 출력 결과를 예상하시오.

<!DOCTYPE html> 
<html> 
	<head> 
    	<title>CoderBear's CSS Practice</title> 
    	<style> 
        	#header > h1  { color: red; } 
        	#section > h1 { color: orange; } 
    	</style> 
	</head> 
    
	<body> 
    	<div id="header"> 
        	<h1 class="title">Lorem ipsum</h1> 
        	<div id="nav"> 
            	<h1>Navigation</h1> 
        	</div> 
    	</div> 
    	<div id="section"> 
        	<h1 class="title">Lorem ipsum</h1> 
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p> 
    	</div> 
	</body> 
</html>

A. <h1 class="title">Lorem ipsum</h1>의 색상이 red로 바뀐다.

 

  <h1 class="title">Lorem ipsum</h1>의 색상이 orange로 바뀐다. 

    
Q11. table 태그의 요소를 선택할 때는 자손 선택자 사용을 추천하지 않는다.

       다음 코드의 실행 결과를 예측해 보자.

<!DOCTYPE html> 
<html> 
	<head> 
          <title>CoderBear's CSS Practice</title> 
          <style> 
          table > tr > th { 
              color: red; 
          } 
      </style> 
  </head> 
  <body> 
      <table border="1"> 
          <tr> 
              <th>이름</th> 
              <th>지역</th> 
          </tr> 
          <tr> 
              <td>윤인성</td> 
              <td>서울특별시 강서구 내발산동</td> 
          </tr> 
      </table> 
  </body> 
</html>


A. 대부분 th 태그에 붉은 색이 적용되는 것을 예상했겠지만 스타일 속성은 적용되지 않는다.
   크롬 브라우저에서 검사를 사용해 HTML 페이지의 계층 구조를 살펴보면 원인을 알 수 있다. 

   table 태그에 자동으로 추가된 tbody 태그를 확인할 수 있다. 

   웹 브라우저가 tbody 태그를 자동으로 추가하므로 스타일 속성이 적용되지 않는다. 

   색상을 적용하려면 선택자 table > tbody > tr > th를 입력해야 한다. 

   혼동하기 쉬운 내용이므로 table 태그에 스타일을 적용할 때는 자손 선택자를 사용하지 말자,

Q12. 반응 선택자
       반응 선택자를 사용해 코드를 구성하고 실행하자.

       h1 태그에 있는 글자 위에 마우스 커서를 올리면 붉은색이 적용되고, 클릭하면 파란색이 적용되게하자.

A.

<!DOCTYPE html> 
<html> 
	<head> 
         <title>CoderBear's CSS Practice</title> 
         <style> 
        	h1:hover{color:red;}
            h1:active{color:blue;}
      	</style> 
  </head> 
  <body> 
      <h1>coder</h1> 
  </body> 
</html>

 

Q13. 상태 선택자
       문제 input 태그가 사용 가능할 경우에 background-color 속성에 white 키워드를 적용.
       input 태그가 사용 불가능할 경우에 background-color 속성에 gray 키워드를 적용.
       input 태그에 초점이 맞추어진 경우에 background-color 속성에 orange 키워드를 적용.
A.

<!DOCTYPE html> 
<html> 
	<head> 
         <title>CoderBear's CSS Practice</title> 
         <style>
    		input:enable { background-color: white; }
    		input:disabled + span { background-color: gray; }
            input:focus{ background-color: orange; }
		</style>
  	</head> 
  	<body> 
      <input type="text">
      <input disabled>
  	</body> 
</html>



Q14. 스타일 시트 주석은?
       HTML5 주석은?

A. 스타일 시트 주석은 /* ~ */ 만 가능하고 (// 한줄 주석 불가능)

   HTML5의 주석은 <!-- -->이다.

Q15. 구조 선택자를 사용해 홀수 위치와 짝수 위치를 판별하고 스타일을 적용한다.

       첫 번째 태그와 마지막 태그는 둥근 테두리가 적용되고

       홀수와 짝수 번째에 각각 다른 색상의 스타일이 적용하자.

A.

<html>
  <head>
      <title>CoderBear's CSS Practice</title>
      <style>
          ul { overflow: hidden; }
          li {
              list-style: none;
              float:left; padding: 15px;
          }

          li:first-child { border-radius: 10px 0 0 10px; }
          li:last-child { border-radius: 0 10px 10px 0; }

          li:nth-child(2n) { background-color: #FF0003; }
          li:nth-child(2n+1) { background-color:#800000; }

          li:nth-child(5){color:aqua;}
          /* 주석입니다. */
      </style>
  </head>
  <body>
      <ul>
          <li>첫 번째</li>
          <li>두 번째</li>
          <li>세 번째</li>
          <li>네 번째</li>
          <li>다섯 번째</li>
          <li>여섯 번째</li>
          <li>일곱 번째</li>
      </ul>
  </body>
</html>

 

Q16. 다음 코드의 실행 결과를 예측하시오.

<!DOCTYPE html> 
<html> 
  <head> 
      <title>CoderBear's CSS Practice</title> 
      <style> 
          li > a:first-child a { color:red; } 
      </style> 
  </head> 
  <body> 
      <ul> 
          <li><a href="#">주의 사항</a></li> 
          <li><a href="#">주의 사항</a></li> 
          <li><a href="#">주의 사항</a></li> 
          <li><a href="#">주의 사항</a></li> 
          <li><a href="#">주의 사항</a></li> 
      </ul> 
  </body> 
</html>

A.

li 태그의 자손 태그의 색상 전체가 red로 바뀐다.

Q17. Q16번 코드에서 첫 번째 a 태그에만 붉은색을 적용하려면 어떻게 해야 하나?

A.

<!DOCTYPE html> 
<html> 
  <head> 
      <title>CoderBear's CSS Practice</title> 
      <style> 
          li:first-child>a { color:red; } 
      </style> 
  </head> 
  <body> 
      <ul> 
          <li><a href="#">주의 사항</a></li> 
          <li><a href="#">주의 사항</a></li> 
          <li><a href="#">주의 사항</a></li> 
          <li><a href="#">주의 사항</a></li> 
          <li><a href="#">주의 사항</a></li> 
      </ul> 
  </body> 
</html>

 

Q18. 조건에 맞게 아래와 같은 형태로 구현하시오.

해당 문제 참고 조건
border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 정하는 속성이다. 
border-collapse: separate | collapse | initial | inherit 중 기본값은 separate이다.

- separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둔다.
- collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앤다.
               겹치는 부분은 한 줄로 나타냅니다. 
- initial : 기본값으로 설정한다. 
- inherit : 부모 요소의 속성값을 상속받는다.

사용ex)

table{ 
    border-collapse: collapse; 
} 

	text-align : 
	속성 값들 center, right, left 

.textCenter{ 
	text-align: center;
}

 

A.

<!DOCTYPE html>
<html class="translated-ltr"><head>
  <style>
  #customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; // 폰트 지정 
    border-collapse: collapse;
    width: 100%;
  }

  #customers td, #customers th { // 후손선택자
    border: 1px solid #ddd; // #ddd = #dddddd(동일한 경우 줄여 표현 가능)
    padding: 8px;
  }

  #customers tr:nth-child(even){background-color: #f2f2f2;} // 짝수 번째 background 컬러 지정

  #customers tr:hover {background-color: #ddd;} // 마우스 커서를 올렸을 때의 색상 지정

  #customers th { 
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left; // 왼쪽 정렬
    background-color: #4CAF50;
    color: white; // 글자 색상
  }
  </style>
  <link type="text/css" rel="stylesheet" charset="UTF-8" href="https://translate.googleapis.com/translate_static/css/translateelement.css"></head>
  <body>

  <table id="customers">
    <tbody><tr>
      <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">회사</font></font></th>
      <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">접촉</font></font></th>
      <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">국가</font></font></th>
    </tr>
    <tr>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">알프레드 퍼터 키스 테</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">마리아 앤더스</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">독일</font></font></td>
    </tr>
    <tr>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Berglunds snabbköp</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">크리스티나 버 그런 드</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">스웨덴</font></font></td>
    </tr>
    <tr>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">센트로 커머셜 모테 주마</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">프란시스코 창</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">멕시코</font></font></td>
    </tr>
    <tr>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">에른스트 헨델</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">롤랜드 멘델</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">오스트리아</font></font></td>
    </tr>
    <tr>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">섬 무역</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">헬렌 베넷</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">영국</font></font></td>
    </tr>
    <tr>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">코니 글리치 에센</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">필립 크 래머</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">독일</font></font></td>
    </tr>
    <tr>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">박카스 와인 셀러 미소</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">탄시 누리 요시</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">캐나다</font></font></td>
    </tr>
    <tr>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">마가 지니 알리 멘 타리</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">지오바니 로벨 리</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">이탈리아</font></font></td>
    </tr>
    <tr>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">북쪽 / 남쪽</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">사이먼 크로우 더</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">영국</font></font></td>
    </tr>
    <tr>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">파리 스페셜 리테</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">마리 베르트랑</font></font></td>
      <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">프랑스</font></font></td>
    </tr>
  </tbody></table><div id="goog-gt-tt" class="skiptranslate" dir="ltr"><div style="padding: 8px;"><div><div class="logo"><img src="https://www.gstatic.com/images/branding/product/1x/translate_24dp.png" width="20" height="20" alt="Google 번역"></div></div></div><div class="top" style="padding: 8px; float: left; width: 100%;"><h1 class="title gray">원본 텍스트</h1></div><div class="middle" style="padding: 8px;"><div class="original-text"></div></div><div class="bottom" style="padding: 8px;"><div class="activity-links"><span class="activity-link">번역 제안하기</span><span class="activity-link"></span></div><div class="started-activity-container"><hr style="color: #CCC; background-color: #CCC; height: 1px; border: none;"><div class="activity-root"></div></div></div><div class="status-message" style="display: none;"></div></div>



  <div class="goog-te-spinner-pos"><div class="goog-te-spinner-animation"><svg xmlns="http://www.w3.org/2000/svg" class="goog-te-spinner" width="96px" height="96px" viewBox="0 0 66 66"><circle class="goog-te-spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg></div></div></body></html>

- 폰트 지정  : 여러 개 지정 시, 첫 번째 순서부터 존재하고 있는 폰트가 나온다, 

                  폰트 이름 사이에 공백이 있는 경우 " " 해줘야 한다.

 

Q19. 아이디 선택자 익히기 - 레이아웃 연습 문제
      공간 분할 태그에 아이디 선택자를 사용하여 id 속성을 적용하고 레이아웃을 구성한다.
      아래 이미지를 참고하여 html로 구현한다.
      [참고] "웹 페이지 내부에서 id 속성이 중복되면 안 된다."

A. 

<!DOCTYPE html>
<html>
	<head>
      <title>CoderBear's CSS Practice</title>
      <style>
          /* id 속성으로 header를 가지고 있는 태그의 스타일을 지정합니다. */
          #header {
              width: 800px; margin: 0 auto;
              background: red;
          }

          /* id 속성으로 wrap을 가지고 있는 태그의 스타일을 지정합니다. */
          #wrap {
              width: 800px; margin: 0 auto;
              overflow: hidden; // border 박스보다 컨텐츠의 크기가 넘어가는 범위는 보이지 않게 하는 것
          }

          /* id 속성으로 aside를 가지고 있는 태그의 스타일을 지정합니다. */
          #aside {
              width: 200px; float: left; 
              background: blue;
          }

          /* id 속성으로 content를 가지고 있는 태그의 스타일을 지정합니다. */
          #content {
              width: 600px; float: left;
              background: green;
          }
      </style>
  </head>
  <body>
      <div id="header">
          <h1>Header</h1>
      </div>
      <div id="wrap">
          <div id="aside">
              <h1>Aside</h1>
          </div>
          <div id="content">
              <h1>Content</h1>
          </div>
      </div>
  </body>
</html>

 

//Tip : float는 block 요소를 정렬할 때 사용하는 속성이다.

         ex) float:left;

             float 속성이 부여된 태그의 하위 태그가 상단의 block으로 왼쪽 정렬 되면서 이동한다.

  

728x90
저작자표시

'Web > CSS' 카테고리의 다른 글

[필기정리] Day38 - CSS 문제 및 해답  (0) 2020.08.03
[필기정리] Day38 - CSS 선택자, overflow, position 등  (0) 2020.08.03
[필기정리] Day37 - CSS 문제 및 해답  (0) 2020.07.31
[필기정리] Day37 - 색상표현단위, 박스속성 등  (0) 2020.07.31
[필기정리] Day36 - CSS 선택자(Selector)  (0) 2020.07.30

티스토리툴바