프로그램 언어 활용 6일차(24/11/18)

웹프로그래밍/CSS

프로그램 언어 활용 6일차(24/11/18)

wkun 2024. 11. 18. 17:57

CONTENTS

Test & reviwe

Section1 CSS 사용법과 선택자

5. 속성 선택자

6.가상 클래스 선택자

7. 조합 선택자

----------------------------

CONTENTS

Test & review

1.다음의 요구사항을 만족하는 태그를 알맞게 제시하시오.(각 2점 /총 10점)
 - 요구사항 5가지는 첨부된 압축파일의 img폴더에 exam1.png로 제시되어있습니다.


2.다음의 html 코드에서 a태그를 클릭하면 해당 지점으로 스크롤 이동하도록 제작하시오.
 - 포인트 이동 5점, 탑으로 이동 5점
<html>
   <head></head>
   <body>
      <a>포인트 4으로 이동하기</a>
      <!-- br 10개 –>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <p id=”point1”>포인트 1</p>
<!-- br 10개 –>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <p id=”point2”>포인트 2</p>
<!-- br 10개 –>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <p id=”point3”>포인트 3</p>
<!-- br 10개 –>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <p id=”point4”>포인트 4</p>
      <a>탑으로 이동</a>
   </body>
</html>


3.첨부되어있는 프로젝터 exam3 폴더에 img 폴더와 index.html이 들어있습니다. index.html의 <img>코드에서 test.jpg를 사용하기 위한 코드를 완성하시오(10점).
단, 상대경로로 작성하시오


4. 첨부되어있는 table그림 exam4.png를 확인하고 같은 구조의 테이블 코드를 작성하시오.(10점)
첨부되어있는 압축파일의 img폴더에 exam4.png로 첨부되었습니다


5. 요구사항을 만족하는  코드로 작성하시오.(각 5점 40점)
 - 폼의 이름(회원가입양식) 과 테두리를 표현하시오. (폼의 이름과 폼의 테두리를 표현하는 태그를 사용, 그외는 오답)(5점)
 - 아이디를 입력받는 요소를 만들고 공백을 허용하지 않아야합니다(5점)
 - 아이디를 입력받는 요소는 “원하는 아이디를 입력하세요"라는 가이드 문자를 제공합니다(5점)
 - 패스워드는 입력이 비밀로 입력되어야 합니다.(5점)
 - 이메일을 입력하되 양식에 맞지 않으면 반려되어야합니다(경고문구)(5점)
 - 성별을 입력받는 버튼은 둘중 하나만 선택되어야하며 로딩시 여자가 선택되어있어야 합니다.(5점)
 - 생년월일을 입력받을시 2020년 1월 1일을 포함하여 이후는 선택되어서는 안됩니다.(5점)
 - 나이를 입력할시 선택할수 있는 값은 1~100까지로 제한합니다.(5점)

6.블록요소와 인라인 요소의 차이점에 대해서 서술하시오.(각 5점 / 10점)

7.상대경로와 절대경로에 대해서 서술하시오.(각 5점 / 총 10점)

1.
요구사항1 : 2<sup>3</sup>
요구사항2 : <mark>안녕하세요</mark>
요구사항3 : 줄바꿈<br>
요구사항4 : C<sub>8</sub>H<sub>10</sub>
요구사항5 : <del>nothing</del> (<s>도 가능)

*꾸며진 부분 생략하고 생각할 것! '요구사항5': th부분 <mark> 사용 안해도 됨

2.
<a href=#point4><a>
<a href="#top"><a>

*문제 신중하게 읽고 답변하기/탑으로 이동 미기재함

3.
<img src="../img/test.jpg">

*경로 찾은 뒤에 폴더명 잊지말 것!

4.

<body>
  <table border="1" style="50%">
    <tr>
      <th>월</th>
      <th>화</th>
      <th>수</th>
      <th>목</th>
      <th>금</th>
      <th>토</th>
      <th>일</th>
    </tr>
    <tr>
      <td colspan="2">쌀밥</td>
      <td colspan="3">잡곡밥</td>
      <td>스파게티</td>
      <td>짜장면</td>
    </tr>
    <tr>
      <td rowspan="2">불고기</td>
      <td>떡갈비</td>
      <td>돈까스</td>
      <td>오징어볶음</td>
      <td rowspan="3">제육볶음</td>
      <td rowspan="2">피클</td>
      <td rowspan="2">단무지</td>
    </tr>
    <tr>
      <td colspan="3">단무지</td>
    </tr>
    <tr>
      <td colspan="4">특식:라면</td>
      <td colspan="2">특식:냉면</td>
    </tr>
  </table>
</body>

5.
<body>
  <form>
    <fieldset>
      <legend>회원가입양식</legend>
-아이디<input type="text" name=id id="id" required placeholder="원하는 아이디를 입력하세요">
-패스워드<input type="password">
-이메일<input type="email">
-성별<input type="radio" name="sex" value="female" checked>여성
              <input type="radio" name="sex" value="male">남성
-생년월일<input type="date"  max="2019-12-31">
-나이<input type="number" min="1" max="100">

-입력<input type="submit" value="전송">
<input type="reset" value="취소">
</fieldset>
</form>
</body>

*'포함하여' 제외 "2020-01-01" 아님

6.
블록요소란 요소를 세로로 쌓으며 크기를 조절할 수 있다.

인라인요소란 요소를 가로로 쌓으며 크기를 조절 할 수 없다.

7.
상대경로란 현재 작업 디렉토리 기준으로 특정 파일이나 디렉토리를 나타내는 경로이다. 기준점이 변할 수 있다.
절대경로란 특정 파일이나 디렉토리의 위치를 나타내는 전체 경로이다. 기준점이 변할 수 없다.

---------------------------------------------------------------------------------------------

Section1 CSS 사용법과 선택자

5. 속성 선택자

<속성 선택자의 형식>

형식	설명	사용 예
[속성]	해당 속성이 정의된 모든 태그를 선택, 속성의 값과는 무관	p[text]
[속성=값]	정의된 속성과 속성값이 동일한 태그를 선택	p[text="red"
[속성~=값]	공백으로 구분된 속성값 목록 중 하나가 주어진 값과 동일한 태그를 선택	p[text~"red blue"]
[속성\|=값](or)	속성값이 해당 값과 동일하거나 또는 주어진 값으로 시작하고 '─' 기호로 이어지는 값을 가진 태그를 선택	p[text="red─blue"]
[속성^=값]	속성값이 주어진 값으로 시작하는 태그를 선택	p[text^="img"]
[속성$=값]	속성값이 주어진 값으로 끝나는 태그를 선택	p[text$=".png"]
*[속성=값]**	속성값이 주어진 값을 부분 문자열로 가지는 태그를 선택	p[text*="ong"]

속성 선택자 사용 형식 살펴보기

<head>

<style>

p[text] {color: red;}

p[text="red"] {color: yellow; background-color: purple;}

p[text~="bb"] {color: yellow; background-color: green;}

p[text|="a1"] {color: yellow; background-color: blue;}

p[text^="img"] {color: yellow; background-color: red;}

p[text$=".png"] {color: yellow; background-color: gray;}

p[text*="ong"] {color: yellow; background-color: pink;}

</style>

</head>

<body>

</body>

ch)기호 [" | " = shift키+\]

6.가상 클래스 선택자

◎가상 선택자

-웹 문서에는 보이지 않지만 동작에 영향을 주는 속성을 가상 선택자로 이용

◎이벤트 가상 클래스 선택자

-사용자가 마우스 이벤트 행위를 어떻게 하는지에 따라서 스타일 시트 다르게 적용

a:link { color: blue; }
│
가상선택자

<이벤트 가상 클래스 선택자 종류>

사용방법	설명	사용 예
:link 선택자	웹 문서에서 사용자가 방문하지 않았던 곳을 표시	a:link { color: red; text-decoration: none; }
:visited 선택자	웹 문서에서 사용자가 방문한 곳을 표시	a:visited { color: blue; }
:active 선택자	웹 문서에서 사용자가 링크를 클릭하는 순간을 나타냄	a:active { color: black; ]
:hover 선택자	웹 문서에서 사용자가 링크에 마우스 포인터를 올리는 순간을 나타냄	a:hover { color: green; }
:focus 선택자	해당 요소에 초점이 맞춰졌을 때 적용	a:focus { color : yellow; } cf)input:focus { color: blue;}

*순서대로 작성해야 잘 작동:link->:visited-> :hover->:active->:focus

이벤트 가상 클래스 선택자 사용하기

<head>

<style>

/*가상 클래스 */

a:link {color: blue; text-decoration: underline;}

a:visited {color:red;}

a:hover {text-decoration: overline;}

a:active {background-color: yellow;}

div.d1 {border: 1px dashed red; width: 400px; padding: 5px;}

/* 가상 클래스 */

div.d1:hover {background-color: yellow;}

div.d2 {border: 1px dashed green; width: 400px; padding: 5px;}

/* 가상 클래스 */

div.d2:hover {background-color: green;}

</style>

</head>

<body>

<h2>Pseudo Class</h2>

마우스 위치에 따른 박스의 스타일 변화를 보세요.

</div>

마우스 위치에 따른 박스의 스타일 변화를 보세요.

</div>

</body>

<head>

<style>

div {width: 200px; height: 100px; color: blue;

background-color: green; opacity: 0.9;

}

/* 가상 클래스 */

div:hover {

width: 400px; height: 50px; color: red;

background: yellow; opacity: 0.5;

transition: all 1.5s linear 0.5s;

}

</style>

</head>

<body>

<div>

가상 클래스를 이용한 애니메이션 효과<br>

마우스가 위에 있으면 박스가 늘어나요.

</div>

</body>

cf)cpacity: 0; 요소 투명/1(기본값); 요소 불투명

<구조적 가상 클래스 선택자의 종류>

사용 방법	설명
E:root	문서의 최상위 태그(html)를 선택
E:nth-child(n)	부모 요소의 n번째 자식 요소(n은 숫자 또는 수식) (E가 아닌 태그의 순서가 계산에 포함) *(2n)=(even) 짝수/ (2n+1)=(odd) 홀수/(n) 모든 것
E:nth-last-child(n)	부모 요소의 끝에서부터 n번째 자식 요소(n은 숫자 또는 수식) (E가 아닌 태그의 순서가 계산에 포함)
E:nth-of-type(n)	부모 요소 내에서 동일한 유형의 n번째 자식 요소 (E 태그의 순서만 계산에 포함)
E:nth-last-of-type(n)	부모 요소 내에서 끝에서부터 동일한 유형의 n번째 자식 요소 (E 태그의 순서만 계산에 포함)
E: first-child	부모 요소의 첫번째 자식 요소 (E가 아닌 태그의 순서가 계산에 포함)
E:last-child	부모 요소의 마지막자식 요소 (E가 아닌 태그의 순서가 계산에 포함)
E:first-of-type	부모 요소 내에서 같은 유형의 첫번째 자식 요소 (E 태그의 순서만 계산에 포함)
E:last-of-type	부모 요소 내에서 같은 유형의 마지막 자식 요소 (E 태그의 순서만 계산에 포함)
E:only-child	부모 요소의 유일한 자식 요소(태그 유형 상관 없이) (E가 아닌 태그가 하나라도 포함되면 선택 안함)
E:only-od-type	부모 요소에서 같은 유형의 유일한 자식 요소 (E가 아닌 태그가 포함되어도 E타입이 유일하면 선택)
E:empty	텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택

구조적 가상 클래스 선택자 사용하기

<head>

<style>

h4:first-child { /*첫번째 태그의 텍스트 색상*/

color: blue;

font-size: 20px;

}

h4:last-of-type { /*마지막 태그의 텍스트 색상*/

color: red;

font-size: 20px;

}

h4:nth-child(2n+1) { /*홀수 태그*/

background-color: green;

}

h4:nth-last-of-type(2n) { /*짝수 태그*/

background-color: yellow;

}

</style>

</head>

<body>

<h4>웹프로그래밍</h4>

</body>

◎UI 요소 상태 가상 클래스 선택자

-입력 폼의 상태를 선택할 때 사용

<UI요소 상태 가상 클래스 선택자의 종류>

사용 방법	의미
E:enabled	사용 가능한 폼 컨트롤 E를 선택
E:disabled	사용 불가능한 폼 컨트롤 E를 선택
E:checked	선택된 폼 컨트롤을 선택
E:focus	초점이 맞추어진 input 태그를 선택

<기타 가상 클래스 선택자>

선택자 이름	사용 방법	의미
언어 선택자	E:lang(ko)	HTML lang 속성의 값이 'ko'로 지정된 태그를 선택
부정 선택자	E:not(S)	S가 아닌 E태그를 선택
목적 선택자	E:target	E의 url이 요청되면 선택
가상 엘리먼트 선택자	E::first-line	E 태그의 첫 번째 라인을 선택
	E::first-letter	E 태그의 첫 번째 문자를 선택
	E::before	E 태그의 시작 지점에 생성된 태그 선택
	E::after	E 태그의 끝 지점에 생성된 태그 선택

UI 요소 상태 가상 클래스 선택자 사용하기

<head>

<style>

div {

color: white;

}

h2:first-letter {

font-size: 30px;

color: red;

text-transform: uppercase;

}

h3:first-line

{color: blue;

}

input:focus {

background-color: red;

}

input:checked + div.d1{

background-color: gray;

}

input:checked + div.d2{

background-color: black;

}

</style>

</head>

<body>

<h2>states pseudo-classes</h2>

<h2>answer</h2>

힌트 보기 : <input type="checkbox">

남대문이 있는 곳이죠.

</div>

정답 보기: <input type="checkbox">

서울

</div>

</body>

7. 조합 선택자

◎조합 선택자

-기존의 여러 선택자를 복합적으로 조합하는 방법을 제공

<조합 선택자의 종류>

구분	조합 방법	설명
후손 선택자	선택자A 선택자B (공백으로 표시)	선택자B가 선택자A에 반드시 포함되어 있을 경우에 선택
자손 선택자	선택자A >선택자B	부모 선택자A의 직계 자손인 선택자B를 선택
인접 형제 선택자	선택자A+선택자B	선택자A 바로 다음에 위치한 선택자B를 선택
일반 형제 선택자	선택자A~선택자B	선택자A 뒤에 인접하여 나타나는 모든 선택자B를 선택
그룹 선택자	선택자A, 선택자B	선택자A과 선택자B를 모두 선택

◎조합 선택자의 이해

후손 선택자 사용하기

<head>

<style>

div ul { color: red;}

div h2 {color: yellow; background-color: purple;}

</style>

</head>

<body>

<div>

<h2>Descendant Selector_1</h2>

<ul>후손 선택자

</ul>

</div>

<h2>Descendant Selector_2</h2>

</body>

자손 선택자 사용하기

<head>

<style>

body>div>h3 {color: red;}

body>p{color: green; background-color: yellow;}

body>h3>tel>home {color: blue;}

</style>

</head>

<body>

<div>

<h3>Child Selector_1</h3>

</div>

<h3>

<tel>

</tel>

</h3>

</body>

인접 형제 선택자 사용하기

<head>

<style>

h1+h2+ul {color: blue;}

div+h3 {color: red;}

h3+p {color: purple; background-color: yellow;}

</style>

</head>

<body>

<div>

<ul>목록

</ul>

</div>

<h3>Adjacent Selector_1</h3>

<h3>Adjacent Selector_2</h3>

</body>

일반 형제 선택자 사용하기

<head>

<style>

h1~ul {color: blue;}

div~h3 {color: red;}

h3~p {color: purple; background-color: yellow;}

</style>

</head>

<body>

<div>

<ul>목록

</ul>

</div>

<h3>Sibling Selector-1</h3>

<h3>Sibling Selector-2</h3>

<h3>Sibling Selector-3</h3>

</body>

◎그룹 선택자

그룹 선택자 사용하기

<head>

<style>

h3, p, h2 {color: red; background-color: yellow;}

</style>

</head>

<body>

<h2>Group Selector_1</h2>

<div>

<h3>Group Selector_2</h3>

</div>

</body>

'웹프로그래밍 > CSS' 카테고리의 다른 글

프로그래밍 언어 활용 10일차 (24/11/22) (0)	2024.11.22
프로그래밍 언어 활용 9일차(24/11/21) (0)	2024.11.21
프로그래밍 언어 활용 8일차(24/11/20) (2)	2024.11.20
프로그래밍 언어 활용 7일차(24/11/19) (2)	2024.11.19
프로그래밍 언어 활용 5일차(24/11/15) (2)	2024.11.15

현재글프로그램 언어 활용 6일차(24/11/18)

wkun 님의 블로그

wkun 님의 블로그 입니다.

Today :
Yesterday :

wkun 님의 블로그