본문 바로가기
카테고리 없음

[메모] HTML, CSS문제

by 팁텍북 2017. 10. 18.

. html에서 주석을 다는 방법은?

<!-- 주석 -->

. 외부 css 파일을 html 페이지에서 사용하는 방법은?

<head>

 <link rel="stylesheet" type="text/css" href="mystyle.css"> 

</head>

경로수정


. bootstrap css 파일을 현재 페이지에 연결 시켜보세요.

<link rel="stylesheet" href="css/bootstrap.css"> 

경로수정


. 외부 javascript 파일을 html페이지에서 사용하는 방법은?

<script src="myscripts.js"></script>

경로수정

. jquery 라이브러리를 현재 페이지에서 사용할 수 있게 하세요.

<head>

    <script type="text/JavaScript" src="jquery-1.4.2.js"></script>

</head>

버전에 따라 js파일명 수정


. 탭이나 브라우저에 제목을 표시하는 태그는?

<head><title></title></head>

. 하이퍼링크를 만드는 태그는?

<a></a>

. 페이지에 이미지를 넣을 수 있는 방법은?

<img src="이미지위치/이미지 파일명">

. 하이퍼링크를 클릭하면 새로운 창이나 탭으로 띄우는 방법은?

<a target="_blank">

. 이미지를 넣고 이미지를 클릭하면 새탭에서 google.com으로 이동하도록 하세요.

<a href="http://www.google.com"><img src=""></img></a>

. HTML 태그를 이용하여 텍스트를 굵게 표시하는 방법은?

<b></b><strong></strong>

. 리스트를 작성하는 방법은?

<ul>

<li></li>

<li></li>

</ul>


<ol>

<li></li>

<li></li>

</ol>


. 순서가 없는 리스트와 순서가 있는 리스트를 작성해보세요.


. 라인 브레이크(새로운 줄)을 표시하는 태그는?


. 라인 브레이크와 스페이스를 작성한 대로 출력할 수 있는 태그는?


. 폼 요소 중에 input 요소의 type 속성은 어떤 것이 있는지 확인해보세요.


. input 요소의 기본 값을 설정해주는 속성은?


. input 요소에 입력받을 값에 대한 힌트를 주는 속성은?


. input 요소에 필수로 입력해야 한다고 나타내는 속성은?


. input 요소의 입력값이 패턴에 맞는지 확인할 수 있는 속성은?


. input 요소의 값을 읽을 수만 있도록 하는 속성은?


. input 요소를 사용하지 못하도록하고 submit 되었을 때도 전송되지 않도록하는 속성은?


. 폼 요소 중 드롭다운 리스트를 선택할 수 있도록하는 태그는 무엇인지 알아보고 작성해보세요.

<select>

<option value="1">1</option>

<option value="2">2</option>

</select>

. 폼 요소 중 여러 줄의 텍스트를 입력받을 수 있는 태그는?

<textarea>

. button을 만드는 태그는?

<button>

. 툴팁을 표시하는 속성은?

title

. youtube 비디오를 출력하는 iframe을 작성해보세요.

<iframe width="560" height="315" src="https://www.youtube.com/embed/Qawavt2a99w" frameborder="0" allowfullscreen></iframe>


. 테이블 그림에 해당하는 테이블을 만들어 보세요.

-만들어보자



. id 속성과 class 속성에 대해 설명해보세요.

id는 #id로

class는 .class로 선택자를 이용해 불러들여 명령한다.


. css에서 컬러를 작성하는 방법 중 16진수 표현법과 rgb함수를 이용하는 방법에 대해 알아보세요.

알아봄

. css box model에 관련된 명칭은 무엇이 있는지 알아보세요.

margin, border,padding,element,content

. width와 height가 설정하는 영역은 어디인가요?

content,element

. width와 height가 border영역까지 설정하도록 하는 css 속성은?

box-sizing속성. (원래는 가로와 세로 너비가 콘텐츠 영역만의 가로 세로 너비를 지칭하도록 되어있음.)


. html element가 배치되는 방법은 크게 inline과 block으로 나뉩니다. 두 가지 배치 방식의 차이를 알아보세요.

inline은 한 줄에 계속 입력이 되려는 특성을 가진 element

block은 줄을 차지하여 다음 element가 다음 줄에 입력이 됨.


. css position 속성의 값은 무엇이 있는지 알아보고 각 속성은 브라우저에서 어떻게 배치되는지 확인하세요.

position: static|absolute|fixed|relative|sticky|initial|inherit;

https://www.w3schools.com/cssref/pr_class_position.asp


. css 셀렉터에서 태그명으로 선택하는 방법은?

ex) <p>태그일 경우,

p { background: yellowgreen; color: darkgreen; }


. css 에서 클래스로 요소를 선택하기 위한 방법은?

ex) .class


. css 에서 id로 요소를 선택하기 위한 방법은?

#id


. 자식요소를 선택하기 위한 셀렉터 작성 방법은?

E>F{속성: 속성값;}

. 자손요소를 선택하기 위한 셀렉터 작성 방법은?

E F{속성: 속성값;}

. 모든 요소를 선택하는 셀렉터 작성방법은?

*

. 여러 셀렉터를 그룹화하는 방법은?

h1, h2 { background: yellowgreen; color: darkgreen; }

. 하이퍼링크의 상태에 따른 요소를 선택하는 방법은?

수도(pseudo, 가상)클래스를 이용함.

a:active{color:gold;}

a:hover{color:gold;}

a:link{color:gold;}

a:visited{color:gold;}


. 요소의 속성에 관련된 셀렉터 사용 방법은?

https://www.cmsfactory.net/css-reference-attribute-selector

[attribute]

[attribute="value"]

[attribute~="value"]

[attribute|="value"]

[attribute^="value"]

[attribute$="value"]

[attribute*="value"]


. 주석을 작성하는 방법은? 

// 주석

/* 주석 */



댓글